本指南介绍了如何创建高性能 CSS 动画。
请参阅为什么有些动画的播放速度很慢?,了解 背后的理论。
浏览器兼容性
本指南建议的所有 CSS 属性都具备良好的跨浏览器性能 联系。
transform
浏览器支持
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
opacity
浏览器支持
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
will-change
浏览器支持
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
移动元素
要移动元素,请使用 translate
或 rotation
关键字值(位于
transform
属性。
例如,如需将某项内容滑入视图,请使用 translate
。
.animate {
animation: slide-in 0.7s both;
}
@keyframes slide-in {
0% {
transform: translateY(-1000px);
}
100% {
transform: translateY(0);
}
}
使用 rotate
旋转元素。以下示例旋转元素
360 度。
.animate {
animation: rotate 0.7s ease-in-out both;
}
@keyframes rotate {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
调整元素大小
要调整元素的大小,请使用 scale
关键字值
transform
属性。
.animate {
animation: scale 1.5s both;
}
@keyframes scale {
50% {
transform: scale(0.5);
}
100% {
transform: scale(1);
}
}
更改元素的可见性
如需显示或隐藏某个元素,请使用 opacity
。
.animate {
animation: opacity 2.5s both;
}
@keyframes opacity {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
避免使用会触发布局或绘制的属性
对动画使用任何 CSS 属性(transform
和 opacity
除外)之前,
确定该属性对渲染流水线的影响。
除非绝对必要,否则请避免使用任何会触发布局或绘制的属性。
强制创建图层
正如为什么有些动画的播放速度很慢?中所述, 将元素放置在新层上可让浏览器重新绘制它们,而无需 重新绘制布局的其余部分。
浏览器通常可以明智地决定哪些项应该放置在
但您可以使用
will-change
属性。
顾名思义,此属性会告诉浏览器
无法对它们进行某些更改
在 CSS 中,您可以将 will-change
应用于任何选择器:
body > .sidebar {
will-change: transform;
}
不过,此规范
建议您只对那些
更改。例如,用户能够滑入的边栏可能就是正确的
。对于不经常变化的元素,我们建议将
will-change
。请务必
给浏览器留出足够的时间来执行必要的优化,同时删除
属性。
如果您在不支持 will-change
的浏览器中强制创建图层
(很可能是 Internet Explorer),您可以设置 transform: translateZ(0)
。
调试缓慢或故障动画
Chrome 开发者工具和 Firefox 开发者工具中提供了许多工具来帮助您 以及为什么动画速度缓慢或出现故障
检查动画是否会触发布局
使用 transform
以外的内容移动元素的动画是
速度可能会慢一些以下示例比较了使用 transform
的动画
使用 top
和 left
为动画添加动画效果。
.box { position: absolute; top: 10px; left: 10px; animation: move 3s ease infinite; } @keyframes move { 50% { top: calc(90vh - 160px); left: calc(90vw - 200px); } }
.box { position: absolute; top: 10px; left: 10px; animation: move 3s ease infinite; } @keyframes move { 50% { transform: translate(calc(90vw - 200px), calc(90vh - 160px)); } }
您可以在以下两个 Glitch 示例中对此进行测试: 并使用开发者工具探索性能
Chrome DevTools
- 打开性能面板。
- 记录运行时性能 在动画播放过程中添加
- 检查摘要标签页。
如果您在“摘要”标签页中看到“呈现”的值为非零值,则可能是 表示您的动画让浏览器执行布局工作。
<ph type="x-smartling-placeholder">![“Summary”(摘要)面板显示渲染时间为 37 毫秒,渲染为 79 毫秒。](https://web.developers.google.cn/static/articles/animations-guide/image/the-summary-panel-shows-3-d8a0efc73229b.jpg?authuser=9&hl=lv)
![“摘要”面板对渲染和绘制显示为零值。](https://web.developers.google.cn/static/articles/animations-guide/image/the-summary-panel-show-ze-6036893c491f8.jpg?authuser=9&hl=lv)
Firefox 开发者工具
在 Firefox 开发者工具中,点击广告瀑布流 可帮助您了解浏览器将时间都花在了哪里。
- 打开性能面板。
- 在动画播放时开始录制性能。
- 停止录制并检查 Waterfall 标签页。
如果您看到重新计算样式的条目, 也就是说,浏览器必须返回到 呈现瀑布 来渲染动画。
检查是否存在丢帧
- 在 Chrome 开发者工具中打开渲染标签页。
- 选中 FPS 计量器复选框。
- 在动画运行时观察这些值。
请注意 FPS 计量器界面顶部的 Frames 标签。
系统会显示类似 50% 1 (938 m) dropped of 1878
的值。高性能
动画所占的百分比较高(例如 99%
),这意味着很少有帧
使动画看起来流畅
![fps 计量器显示有 50% 的帧丢失](https://web.developers.google.cn/static/articles/animations-guide/image/the-fps-meter-shows-50-e279493d08c47.jpg?authuser=9&hl=lv)
![fps 计量器显示仅有 1% 的帧丢失](https://web.developers.google.cn/static/articles/animations-guide/image/the-fps-meter-shows-1-97f98fe03092a.jpg?authuser=9&hl=lv)
检查动画是否会触发绘制
对于浏览器来说,某些属性比其他属性更昂贵。对于 例如,任何涉及模糊处理的内容(如阴影)都需要处理时间较长 比绘制红色方框更复杂。这些差异并不总是很明显 但浏览器开发者工具可以帮助您确定哪些区域需要 以及与绘制相关的其他性能问题
Chrome DevTools
- 在 Chrome 开发者工具中打开渲染标签页。
- 选择 Paint Flashing。
- 在屏幕上移动指针。
![以绿色突出显示的界面元素,表示将重新绘制该元素](https://web.developers.google.cn/static/articles/animations-guide/image/a-ui-element-highlighted-43b56111254fb.jpg?authuser=9&hl=lv)
如果整个屏幕闪烁,或看到您认为不应该突出显示的区域 请进一步调查。
如果您需要确定某个特定属性是否 与绘制相关的性能问题,绘制分析器 可以帮上忙。
Firefox 开发者工具
- 打开 Settings,然后添加“Toolbox”按钮 开启/关闭绘制闪烁。
- 在您要检查的网页上,打开该按钮并移动鼠标或 滚动查看突出显示的区域。
总结
请尽可能将动画限制为 opacity
和 transform
以保持
渲染路径的合成阶段上的动画。使用开发者工具进行检查
路径的哪个阶段受到动画的影响。
使用绘制性能分析器查看是否有任何绘制操作 价格高昂。如有发现,请检查其他 CSS 属性是否提供了 外观和风格保持不变,但性能更好。
请仅在遇到性能问题时谨慎使用 will-change
属性。