【发布时间】：2020-03-02 20:11:36
【问题描述】：
我在按钮单击的同时进行了 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>【问题讨论】：
标签： css safari css-transitions css-animations keyframe