CSS3 hover transform 图片会抖动怎么解决？

html-css023

CSS3 hover transform 图片会抖动怎么解决？,第1张

经测试，采用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刷新，均不会有闪动情况

css过滤动画图片变大后闪不停，将三个图片整合为一张图片可以改善。这样可以同时将三张图片一起加载，就不会出现闪烁的问题了，然后再通过background-position来切换要显示的图片的位置，这种技术叫做图片整合技术。

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

动画重复播放

动画播放速度曲线

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