修复 HTML/CSS 动画性能

Question

>我做了一个带有css动画和过渡的HTML页面

<div class="container-fluid" id="team">
<div class="row first">
    <div class="wrapper"></div>
</div>
<div class="row second">
    <div class="wrapper"></div>
    <div class="wrapper clickable">
        <div class="shadow"></div>
        <div class="description">
            <div>
                <h2>{{team.0.name}}</h2>
                <h5>{{team.0.position}}</h5>
                <p>{{team.0.description}}</p>
                <a href="">Learn more about {{team.0.firstName}}</a>
            </div>
        </div>
        <img src="">
    </div>
    <div class="wrapper clickable right-side">
        <div class="shadow"></div>
        <div class="description">
            <div>
                <h2>{{team.6.name}}</h2>
                <h5>{{team.6.position}}</h5>
                <p>{{team.6.description}}</p>
                <a href="">Learn more about {{team.6.firstName}}</a>
            </div>
        </div>
        <img src="">
    </div>
    <div class="wrapper"></div>
</div>
<div class="row third">
    <div class="wrapper clickable">
        <div class="shadow"></div>
        <div class="description">
            <div>
                <h2>{{team.3.name}}</h2>
                <h5>{{team.3.position}}</h5>
                <p>{{team.3.description}}</p>
                <a href="">Learn more about {{team.3.firstName}}</a>
            </div>
        </div>
        <img src="">
    </div>
    <div class="wrapper clickable">
        <div class="shadow"></div>
        <div class="description">
            <div>
                <h2>{{team.2.name}}</h2>
                <h5>{{team.2.position}}</h5>
                <p>{{team.2.description}}</p>
                <a href="">Learn more about {{team.2.firstName}}</a>
            </div>
        </div>
        <img src="">
    </div>
    <div class="wrapper clickable right-side">
        <div class="shadow"></div>
        <div class="description">
            <div>
                <h2>{{team.4.name}}</h2>
                <h5>{{team.4.position}}</h5>
                <p>{{team.4.description}}</p>
                <a href="">Learn more about {{team.4.firstName}}</a>
            </div>
        </div>
        <img src="">
    </div>
</div>
<div class="row fourth">
    <div class="wrapper"></div>
    <div class="wrapper clickable">
        <div class="shadow"></div>
        <div class="description">
            <div>
                <h2>{{team.5.name}}</h2>
                <h5>{{team.5.position}}</h5>
                <p>{{team.5.description}}</p>
                <a href="">Learn more about {{team.5.firstName}}</a>
            </div>
        </div>
        <img src="">
    </div>
    <div class="wrapper clickable right-side">
        <div class="shadow"></div>
        <div class="description">
            <div>
                <h2>{{team.1.name}}</h2>
                <h5>{{team.1.position}}</h5>
                <p>{{team.1.description}}</p>
                <a href="">Learn more about {{team.1.firstName}}</a>
            </div>
        </div>
        <img src="">
    </div>
    <div class="wrapper"></div>
</div>
<div class="row fifth">
    <div class="wrapper"></div>
    <div class="wrapper join">
        <a href="">
            <span>+ Join</span>
        </a>
    </div>
    <div class="wrapper clickable right-side">
        <div class="shadow"></div>
        <div class="description">
            <div>
                <h2>{{team.7.name}}</h2>
                <h5>{{team.7.position}}</h5>
                <p>{{team.7.description}}</p>
                <a href="">Learn more about {{team.7.firstName}}</a>
            </div>
        </div>
        <img src="">
    </div>
</div>
<div class="row sixth">
    <div class="wrapper"></div>
    <div class="wrapper blank"></div>
    <div class="wrapper"></div>
</div>
<div class="row seventh">
    <div class="wrapper"></div>
    <div class="wrapper"></div>
</div>

完整的工作版本在这里可用：http://jsfiddle.net/xs4mm5jd/

如您所见，它工作正常，动画快速流畅。

但是，当我添加一些图像时：http://jsfiddle.net/xs4mm5jd/1/动画是浮躁的。有没有加快性能的解决方案？

Answer 1

即使我没有看到您的小提琴性能不佳，您也可以在制作动画时触发硬件加速。

有些人使用一种黑客将transform: translateZ(0);或transform: translate3d(0, 0, 0);应用于动画元素。

在这里，您有一个小提琴来测试您是否看到任何性能提升：http://jsfiddle.net/gleezer/xs4mm5jd/3/

这是一篇关于它的文章。

第二种更新（可能更好）的替代方法是在 CSS 中使用 will-change 属性，例如：will-change: transform;

在此处阅读更多相关信息。