css3播放动画时抖动

在CSS3中可以使用animation属性进行动画设置，然而当设置动画时，往往会出现一些抖动的问题。

这种抖动的原因是因为动画产生的变化不是线性的，而是离散的，如果动画状态在两个帧之间，则将以“交错”方式呈现，这就是为什么抖动会发生的原因。

/* 例子 */@keyframes ani {
0% {
transform: rotate(0deg)}
100% {
transform: rotate(360deg)}
}
div {
    animation: ani 2s infinite linear;
}

上面是一个简单的CSS3动画循环，但是当我们在浏览器中查看时，会发现它抖动了一下。

所以，如何避免这种抖动的问题呢？一种方法是使用animation-timing-function属性来调整动画的频率。

/* 例子 */@keyframes ani {
0% {
transform: rotate(0deg)}
100% {
transform: rotate(360deg)}
}
div {
    animation: ani 2s infinite ease-in-out;
}

如上例所示，我们将timing-function属性设置为ease-in-out（缓进缓出），使用这种函数可以帮助我们避免抖动的问题。

另一种方法是在transform属性上加上translateZ(0)，这是一种CSS技巧，可以帮助我们避免动画抖动的问题。

/* 例子 */@keyframes ani {
0% {
transform: rotate(0deg) translateZ(0)}
100% {
transform: rotate(360deg) translateZ(0)}
}
div {
    animation: ani 2s infinite linear;
}
    

如上例所示，我们在transform属性中加入了translateZ(0)，这样就可以帮助我们避免动画抖动的问题。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！