在chrome上测试没问题css3卡机，但是提交给QA测试时，发现部分机型，比如华为（系统4.2）、Oppo（系统5.1）有延迟。
我很疑惑，所以后来参考了《深入理解CSS动画和转场在浏览器中的性能问题》一文，将图像缩放中的动画元素改为变换，如下
@-webkit-keyframes imgSmall{
0%{
-webkit-transform:scale(1);
100%{
-webkit-transform:scale(.465);
果然，卡顿的问题解决了。
本文解释了浏览器对 CSS 动画和过渡的性能问题的深入理解。 现代浏览器通常有两个重要的执行线程。 这两个线程一起工作来渲染网页：主线程和合成线程。
一般情况下，主线程负责：运行JavaScript； 计算 HTML 元素的 CSS 样式； 布置页面； 将元素绘制到一个或多个位图中； 并将该位图交给合成线程。
相应地，合成线程负责：通过GPU将位图绘制到屏幕上； 通知主线程更新页面中可见或正式可见部分的位图； 计算页面的哪一部分是可见的； 当你滚动页面时，哪一部分正式可见； 当滚动页面时，相应位置的元素会连接到可见区域。
假设我们希望元素的高度从 100 px 更改为 200 px，如下所示：
div {
高度：100px；
过渡：高度1s线性；
div:悬停{
高度：200px；
主线程和综合线程会按照下面的流程图执行相应的操作。 请注意，橙红色框中的操作可能需要更长的时间，而红色框中的操作速度更快。
并使用transform:scale来实现
div {
变换：缩放（0.5）；
过渡：变换1s线性；
div:悬停{
变换：缩放（1.0）；
此时的流程如下：
也就是说css3卡机，使用transform，浏览器只需要生成一次这个元素的位图，并在动画开始时提交给GPU处理。 之后，浏览器不需要对位图进行任何布局、绘制或传递。 这样一来，浏览器就可以充分利用GPU的能力来快速绘制不同位置的位图，执行旋转或缩放。
为了从数量级上否定这个理论，我在chrome中打开Timeline查看页面FPS。
其中，当动画元素使用高度时，切换过程中的FPS仅为44。我们知道每秒60帧是最适合人眼交互的。 如果小于60，人眼就能明显感觉到，这就是滞后的原因。
渲染和绘画所花费的时间如下：
让我们再看一下使用transform:scale
FPS达到66，渲染和绘画时间减少3倍。
至此，问题已经解决。 几天后，我看到一篇关于如何解决Chrome动画“卡顿”问题的文章。 我发现打开硬件加速可以优化动画，于是又尝试了一下。
webkit 变换：translate3d(0,0,0)；
-moz-变换：translate3d(0,0,0)；
-ms-transform：translate3d(0,0,0)；
-o-变换：translate3d(0,0,0)；
变换：translate3d(0,0,0)；
神奇的事情发生了，FPS达到了72：
CSS3动画卡住的解决办法总结
尽量使用像动画一样熟悉的transform，避免使用height、width、margin、padding等；
当要求较高时，可以打开浏览器并启用GPU硬件加速。
内容概要
以上就是网络市场为您收集的CSS3动画卡顿解决方案的全部内容。 希望本文能够帮助您解决CSS3动画卡顿解决方案遇到的程序开发问题。 如果您觉得互联网集市技术教程内容不错，欢迎您向您的程序员朋友推荐互联网集市网站。
内容注释
