我设置了一个简单的关键帧动画来在Y轴上旋转元素,但是该元素不稳定,我是否缺少属性?
.circle {
height: 50px;
width: 50px;
border-radius: 50%;
border: 5px solid black;
margin: auto;
animation: rotateY 1s infinite;
}
@-webkit-keyframes rotateY {
0% { transform: rotateY( 60deg); }
20% { transform: rotateY( 120deg); }
40% { transform: rotateY( 180deg); }
60% { transform: rotateY( 240deg); }
80% { transform: rotateY( 300deg); }
100% { transform: rotateY( 360deg); }
}
<div class="circle"></div>
由于默认的动画定时功能(轻松)而创建了“波动”效果,应将其设置为linear
。
同样,对于关键帧动画,将状态指定为20%,40%...也没有意义,您只需使用“ to”关键字指定结束状态即可:
.circle {
height: 50px;
width: 50px;
border-radius: 50%;
border: 5px solid black;
margin: auto;
-webkit-animation: rotateY 1s infinite linear;
animation: rotateY 1s infinite linear;
}
@-webkit-keyframes rotateY {
to { -webkit-transform: rotateY(360deg); }
}
@keyframes rotateY {
to { transform: rotateY(360deg); }
}
<div class="circle"></div>
请注意,您还需要根据要支持的浏览器使用供应商前缀。有关更多信息,请参见canIuse。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句