css - iPad 中的关键帧动画在 safari 和 chrome 中都不稳定。如何在 safari 中平滑动画？

Question

我在点击按钮的同时做了一个 360 度的球动画旋转，同时它左右移动。它在 chrome 和 opera 中完美运行，但在 firefox 和 iPad 设备中出现问题。在 iPad 设备中，动画非常不稳定，那么如何添加流畅的动画呢？在 firefox 中，数字不显示

$(function(){
		$('#genBall').on("click", function () {
			$('.eight-ball').addClass("rotate-ball");
				setTimeout(RemoveClass, 2000);
			});
			function RemoveClass() {
				$('.eight-ball').removeClass("rotate-ball");
			}
		}); 

.eight-ball {
    width: 475px;
    height: 475px;
    overflow: hidden;
    position: relative;
    border-radius: 50%;
    background: #1f84d0;
	transform: rotate(12deg);
	user-select: none;
	display: table;
}

.eight-ball:before {
	content: "";
	width: 80px;
	height: 80px;
	background: #fff;
	position: absolute;
	top: 30px;
	left: 40px;
	z-index: 999;
	opacity: 0.8;
	border-radius: 50%;
	filter: blur(13px);
}

.eight-ball:after {
	content: "";
	width: 100%;
	height: 100%;
	opacity: 0.7;
	position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
	border-radius: 50%;
	transform: rotate(-137deg);
	box-shadow: inset -3px 0 6px 2px rgba(255, 255, 255, 0.2), 
				inset 50px 0 70px 6px rgba(0, 0, 0, 0.5);
}

.eight-ball-inner-white {
    width: 75%;
    height: 75%;
    overflow: hidden;
    margin-top: 55px;
	margin-left: 6px;
    border-radius: 50%;
	position: relative;
    display: inline-block;
    background: rgb(224,235,245);
    background: -moz-linear-gradient(top, rgba(224,235,245,1) 0%, rgba(190,205,214,1) 100%);
    background: -webkit-linear-gradient(top, rgba(224,235,245,1) 0%,rgba(190,205,214,1) 100%);
    background: linear-gradient(to bottom, rgba(224,235,245,1) 0%,rgba(190,205,214,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e0ebf5', endColorstr='#becdd6',GradientType=0 );
}

.rotate-ball {
	-webkit-animation: rotateanim ease-in-out 2s;
    -moz-animation: rotateanim ease-in-out 2s;
    -ms-animation: rotateanim ease-in-out 2s;
    -o-animation: rotateanim ease-in-out 2s;
    animation: rotateanim ease-in-out 2s;
}

@-webkit-keyframes rotateanim {
	0% {margin-left: 0px; transform: rotate(12deg); -webkit-transform: rotate(12deg); -moz-transform: rotate(12deg); -o-transform: rotate(12deg); -ms-transform: rotate(12deg);}
	30% {margin-left: 340px; transform: rotate(205deg); -webkit-transform: rotate(205deg); -moz-transform: rotate(205deg); -o-transform: rotate(205deg); -ms-transform: rotate(205deg);}
	50% {margin-left: -340px; transform: rotate(-320deg); transform: rotate(-320deg); -webkit-transform: rotate(-320deg); -moz-transform: rotate(-320deg); -o-transform: rotate(-320deg); -ms-transform: rotate(-320deg);}
	100% {margin-left: 0px; transform: rotate(12deg); transform: rotate(12deg); -webkit-transform: rotate(12deg); -moz-transform: rotate(12deg); -o-transform: rotate(12deg); -ms-transform: rotate(12deg);}
}

@keyframes rotateanim {
	0% {margin-left: 0px; transform: rotate(12deg); -webkit-transform: rotate(12deg); -moz-transform: rotate(12deg); -o-transform: rotate(12deg); -ms-transform: rotate(12deg);}
	30% {margin-left: 340px; transform: rotate(205deg); -webkit-transform: rotate(205deg); -moz-transform: rotate(205deg); -o-transform: rotate(205deg); -ms-transform: rotate(205deg);}
	50% {margin-left: -340px; transform: rotate(-320deg); transform: rotate(-320deg); -webkit-transform: rotate(-320deg); -moz-transform: rotate(-320deg); -o-transform: rotate(-320deg); -ms-transform: rotate(-320deg);}
	100% {margin-left: 0px; transform: rotate(12deg); transform: rotate(12deg); -webkit-transform: rotate(12deg); -moz-transform: rotate(12deg); -o-transform: rotate(12deg); -ms-transform: rotate(12deg);}
}

.eight-ball-inner-white span {
    color: #222b32;
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 140px;
    font-weight: bold;
	transition: all ease 1s;
    transform: translate(-50%,-50%);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="eight-ball">
    <div class="eight-ball-inner-white spin-ball">
        <span>GO</span>
    </div>
</div>

<button id="genBall">play</button>

Answer 1

最后，我找到了解决方案。在八球类之后添加了额外的 div。不是为一个 div 提供旋转和移动，而是为两个 div 提供单独的动画。对主 div 使用移动，对子 div 使用旋转

$(function(){
		$('#genBall').on("click", function () {
			$('.eight-ball').addClass("rotate-ball");
				setTimeout(RemoveClass, 2000);
			});
			function RemoveClass() {
				$('.eight-ball').removeClass("rotate-ball");
			}
		}); 

.eight-ball {
  width: 475px;
  height: 475px;
  overflow: hidden;
  position: relative;
  border-radius: 50%;
  background: #1f84d0;
  user-select: none;
  display: table;
}

.eight-ball>div {
  width: 100%;
  height: 100%;
}

.eight-ball>div:before {
  content: "";
  width: 80px;
  height: 80px;
  background: #fff;
  position: absolute;
  top: 30px;
  left: 40px;
  z-index: 999;
  opacity: 0.8;
  border-radius: 50%;
  filter: blur(13px);
}

.eight-ball:after {
  content: "";
  width: 100%;
  height: 100%;
  opacity: 0.7;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  border-radius: 50%;
  transform: rotate(-137deg);
  box-shadow: inset -3px 0 6px 2px rgba(255, 255, 255, 0.2), inset 50px 0 70px 6px rgba(0, 0, 0, 0.5);
}

.eight-ball-inner-white {
  width: 75%;
  height: 75%;
  overflow: hidden;
  margin-top: 55px;
  margin-left: 6px;
  border-radius: 50%;
  position: relative;
  display: inline-block;
  transform: rotate(12deg);
  background: rgb(224, 235, 245);
  background: -moz-linear-gradient(top, rgba(224, 235, 245, 1) 0%, rgba(190, 205, 214, 1) 100%);
  background: -webkit-linear-gradient(top, rgba(224, 235, 245, 1) 0%, rgba(190, 205, 214, 1) 100%);
  background: linear-gradient(to bottom, rgba(224, 235, 245, 1) 0%, rgba(190, 205, 214, 1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e0ebf5', endColorstr='#becdd6', GradientType=0);
}

.rotate-ball {
  -webkit-animation: rotateanim ease-in-out 2s;
  -moz-animation: rotateanim ease-in-out 2s;
  -ms-animation: rotateanim ease-in-out 2s;
  -o-animation: rotateanim ease-in-out 2s;
  animation: rotateanim ease-in-out 2s;
}

.rotate-ball>div {
  -webkit-animation: rotateanimInner ease-in-out 2s;
  -moz-animation: rotateanimInner ease-in-out 2s;
  -ms-animation: rotateanimInner ease-in-out 2s;
  -o-animation: rotateanimInner ease-in-out 2s;
  animation: rotateanimInner ease-in-out 2s;
}

@-webkit-keyframes rotateanim {
  0% {
    transform: translate(0px, 0px);
    -webkit-transform: translate(0px, 0px);
    -moz-transform: translate(0px, 0px);
    -o-transform: translate(0px, 0px);
    -ms-transform: translate(0px, 0px);
  }
  30% {
    transform: translate(340px, 0px);
    -webkit-transform: translate(340px, 0px);
    -moz-transform: translate(340px, 0px);
    -o-transform: translate(340px, 0px);
    -ms-transform: translate(340px, 0px);
  }
  50% {
    transform: translate(-340px, 0px);
    -webkit-transform: translate(-340px, 0px);
    -moz-transform: translate(-340px, 0px);
    -o-transform: translate(-340px, 0px);
    -ms-transform: translate(-340px, 0px);
  }
  100% {
    transform: translate(0px, 0px);
    -webkit-transform: translate(0px, 0px);
    -moz-transform: translate(0px, 0px);
    -o-transform: translate(0px, 0px);
    -ms-transform: translate(0px, 0px);
  }
}

@keyframes rotateanim {
  0% {
    transform: translate(0px, 0px);
    -webkit-transform: translate(0px, 0px);
    -moz-transform: translate(0px, 0px);
    -o-transform: translate(0px, 0px);
    -ms-transform: translate(0px, 0px);
  }
  30% {
    transform: translate(340px, 0px);
    -webkit-transform: translate(340px, 0px);
    -moz-transform: translate(340px, 0px);
    -o-transform: translate(340px, 0px);
    -ms-transform: translate(340px, 0px);
  }
  50% {
    transform: translate(-340px, 0px);
    -webkit-transform: translate(-340px, 0px);
    -moz-transform: translate(-340px, 0px);
    -o-transform: translate(-340px, 0px);
    -ms-transform: translate(-340px, 0px);
  }
  100% {
    transform: translate(0px, 0px);
    -webkit-transform: translate(0px, 0px);
    -moz-transform: translate(0px, 0px);
    -o-transform: translate(0px, 0px);
    -ms-transform: translate(0px, 0px);
  }
}

@-webkit-keyframes rotateanimInner {
  0% {
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
  }
  30% {
    transform: rotate(205deg);
    -webkit-transform: rotate(205deg);
    -moz-transform: rotate(205deg);
    -o-transform: rotate(205deg);
    -ms-transform: rotate(205deg);
  }
  50% {
    transform: rotate(-320deg);
    -webkit-transform: rotate(-320deg);
    -moz-transform: rotate(-320deg);
    -o-transform: rotate(-320deg);
    -ms-transform: rotate(-320deg);
  }
  100% {
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
  }
}

@keyframes rotateanimInner {
  0% {
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
  }
  30% {
    transform: rotate(205deg);
    -webkit-transform: rotate(205deg);
    -moz-transform: rotate(205deg);
    -o-transform: rotate(205deg);
    -ms-transform: rotate(205deg);
  }
  50% {
    transform: rotate(-320deg);
    -webkit-transform: rotate(-320deg);
    -moz-transform: rotate(-320deg);
    -o-transform: rotate(-320deg);
    -ms-transform: rotate(-320deg);
  }
  100% {
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
  }
}

.eight-ball-inner-white span {
  color: #222b32;
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 140px;
  font-weight: bold;
  transition: all ease 1s;
  transform: translate(-50%, -50%);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="eight-ball">
  <div>
    <div class="eight-ball-inner-white spin-ball">
      <span id="bingoBalls">55</span>
    </div>
  </div>
</div>


<button id="genBall">play</button>