CSS动画(抖动)问题,怎么解决

html-css017

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

需要准备的材料分别有:电脑、chrome浏览器、html编辑器。

1、首先,打开html编辑器,新建html文件,例如:index.html。

2、在index.html中的<style>标签中,输入css代码:

@keyframes blink{

0%{opacity: 1}

100%{opacity: 0}

}

@-webkit-keyframes blink {

0% { opacity: 1}

100% { opacity: 0}

}

.blink{

color: #dd4814

animation: blink 1s linear infinite

-webkit-animation: blink 1s linear infinite

}

3、浏览器运行index.html页面,此时文字实现了闪烁的效果。