前端之家

  1. 首页
  2. 问答

Safari和Chrome浏览器在ipad中的关键帧动画都是生涩的。如何在野生动物园中使动画流畅？

• 问答

我在单击按钮的同时左右移动了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,0.2),inset 50px 0 70px 6px rgba(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,245,1) 0%,rgba(190,205,214,1) 100%);
    background: -webkit-linear-gradient(top,1) 100%);
    background: linear-gradient(to bottom,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>

zhuzhu1107 回答：Safari和Chrome浏览器在ipad中的关键帧动画都是生涩的。如何在野生动物园中使动画流畅？

最后，我找到了解决方案。在Augustball课后增加了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,0.2),inset 50px 0 70px 6px rgba(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,245,1) 0%,rgba(190,205,214,1) 100%);
  background: -webkit-linear-gradient(top,1) 100%);
  background: linear-gradient(to bottom,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);
  }
}

@keyframes rotateanim {
  0% {
    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>

csscss-animationscss-transitionskeyframesafari
本文链接：https://www.f2er.com/3152892.html

大家都在问