CSS3animation动画为什么会出现抖动效果，怎么解决

CSS3animation动画为什么会出现抖动效果，怎么解决

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定义和用法 animation 属性是一个简写属性，用于设置六个动画属性： animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction 默认值： none 0 ease 0 1 normal 注释：请始终规定 animation-duration 属性，否则时长为 0，就不会播放动画了。语法 animation: name duration timing-function delay iteration-count direction;animation-name 规定需要绑定到选择器的 keyframe 名称。。 animation-duration 规定完成动画所花费的时间，以秒或毫秒计。 animation-timing-function 规定动画的速度曲线。 animation-delay 规定在动画开始之前的延迟。 animation-iteration-count 规定动画应该播放的次数。（值：n次，infinite无限循环） animation-direction 规定是否应该轮流反向播放动画。 总结： 根据上述属性，只需要根据具体情况设置animation-delay和animation-iteration-count即可。 例如：div{animation:mymove 5s 5s infinite;-webkit-animation:mymove 5s 5s infinite; }