CSS动画（抖动）问题，怎么解决

html-css018

CSS动画（抖动）问题，怎么解决,第1张

导致抖动的问题有很多， 具体需要看你的代码，比如：

动画重复播放

动画播放速度曲线

元素的大小发生了变化等等..

animation-fill-mode : forwards //设置对象状态为动画结束时的状态

animation-fill-mode

语法：

animation-fill-mode：none | forwards | backwards | both [ ,

none | forwards | backwards | both ]*

默认值：none

适用于：所有元素，包含伪对象:after和:before

继承性：无

取值：

none：

默认值。不设置对象动画之外的状态

forwards：

设置对象状态为动画结束时的状态

backwards：

设置对象状态为动画开始时的状态

both：

设置对象状态为动画结束或开始的状态

说明：

检索或设置对象动画时间之外的状态

如果提供多个属性值，以逗号进行分隔。

对应的脚本特性为animationFillMode。

这个是最简单的方法，

也可以侦听动画结束事件，给元素加个class类名，这个class定义的就是元素结束时的状态的css样式