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

html-css0149

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样式

animation 属性是一个简写属性，用于设置六个动画属性：

如需修改在页面中的位置

将 .point 设为 position:absoulute ,修改其 left , top 位置即可

.point-flicker 是相对 .point 来定位的

修改大小时要将它的 margin-left: -40px margin-top: -40px改为对应大小的一半