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

html-css021

CSS3animation动画为什么会出现抖动效果,怎么解决,第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样式

经测试,采用Firefox 45.0.1存在闪烁问题,并发现以下浏览器的某个版本:微信内置浏览器、QQ浏览器、Safari手机浏览器及早期的Chrome可能存在类似情况,包括载入闪动,悬停后闪动。分析:Blink对transition中,属性transform的动画渲染存在差异,而Chrome中的最新版本,已经不存在此情况。解决方法:<style>.outter { height: 375px margin: 10px auto width: 500px }.inner{}img:hover { width:110% margin-left:-5% margin-top:-5%}img{width:100% transition:0.4s ease-in-out}</style>复制代码以上CSS,在IE10、IE11、Chrome及Firefox 45.0.1中调试通过:首次载入,及Ctrl+F5刷新,均不会有闪动情况

你在设置元素position:fixed的时候,给元素添加一个transform:translateZ(0)

目的是为了开启GPU硬件加速,提高性能和流畅的动画效果 也能解决你这个问题

你说你用transform的话 如果用到translate;把translate换成translate3d,在原来的参数后面加个Z方向的平移 0即可;