我制作了一个带有 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/动画是 glichy。有什么解决方案可以加快性能吗?
最佳答案
即使我没有看到你的 fiddle 表现不佳,你也可以在动画时触发硬件加速。
有些人使用一种技巧,将 transform: translateZ(0);
或 transform: translate3d(0, 0, 0);
应用于动画元素。
在这里,如果您看到任何性能提升,您可以使用 fiddle 进行测试:http://jsfiddle.net/gleezer/xs4mm5jd/3/
这是一个 article关于它。
第二种更新(可能更好)的替代方法是在 CSS 中使用 will-change
属性,例如:will-change: transform;
阅读更多相关信息 here .
关于html - 修复 HTML/CSS 动画性能,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27172717/