为啥我的 CSS3 动画在 Chrome 中的表现如此缓慢？

Posted 2023-03-06

【中文标题】为啥我的 CSS3 动画在 Chrome 中的表现如此缓慢？

【英文标题】：Why my CSS3 animation's perfonrmance so slow in Chrome?为什么我的 CSS3 动画在 Chrome 中的表现如此缓慢？

【发布时间】：2012-03-01 19:42:30

【问题描述】：

Google Chrome 中的这个动画使用了 50% 的 CPU！如何优化它？

背景（PNG24 透明）为 30KB，大小为 1440px 到 ~400px。

/* animation */

.animatedClouds1 
    background:
        url('img/clouds1.png') repeat-x 0 20px;


.animatedClouds3 
    background:
        url('img/clouds3.png') repeat-x 0 250px;


@-webkit-keyframes wind1  
         0% background-position:0px 20px;
        100% background-position:1440px 20px;


@-webkit-keyframes wind3  
         0% background-position:0px 250px;
        100% background-position:1440px 250px;


.animatedClouds1

    -webkit-animation: wind1 80s linear infinite;
    -moz-animation: wind1 80s linear infinite;
    animation: wind1 80s linear infinite;


.animatedClouds3

    -webkit-animation: wind3 160s linear infinite;
    -moz-animation: wind3 160s linear infinite;
    animation: wind3 160s linear infinite;

.animatedClouds1 和 .animatedClouds2 类具有浏览器窗口的长度。

我无法创建示例页面，但我在http://goo.gl/lNB0D 看到了同样的问题。

【问题讨论】：

你能创建一个示例页面/小提琴吗？

对不起，我不能。我编辑了问题并添加了示例。

【参考方案1】：

我会对此进行分类：

第 1 步：删除 repeat-x 并查看效果 第 2 步：将背景图片改为普通图片，看看效果 第 3 步：从位置更改为使用 translate3D 变换，看看效果

CSS 动画并不是对 CPU 最友好，但它们不应该那么糟糕