'transition: all”会减慢 CSS3 转换速度吗？

“过渡：全部”是否会阻碍 CSS3 过渡速度？

使用 CSS3 过渡可为 Web 元素提供动画效果。常见的做法是使用“transition: all”来统一针对多个元素的所有转换。然而，关于这种方法是否会损害渲染性能存在争议。

询问：可以针对每个元素的特定过渡属性（例如，“transition: opacity .2s escape-in​​”）与使用“过渡”相比，动画效果更快、更流畅：所有”？

澄清： CSS 引擎搜索“所有”过渡属性（即使是具有单个属性的元素）是否可能会减慢渲染速度？

答案：

是的，使用“transition: all”可能会带来显着的性能缺陷。即使某些属性保持不变或对用户不可见（例如颜色或尺寸更改），浏览器也可能会执行不必​​要的转换检查。

演示：

此 Dabblet演示了该问题：http://dabblet.com/gist/1657661。更改缩放级别或字体大小会触发所有元素上的动画，无论是否需要可见的过渡。

建议：

要优化性能，请避免使用“过渡” ：全部”并选择有针对性的过渡（例如，“过渡：边距 .2s 缓入”）。这限制了不必要的检查并降低了不需要的动画的风险。

其他注意事项：

“过渡：全部”也会导致不良效果，例如动画“飞溅”页面加载，在应用过渡效果之前渲染初始样式。有针对性的转换有助于缓解这个问题。

以上是'transition: all”会减慢 CSS3 转换速度吗？的详细内容。更多信息请关注PHP中文网其他相关文章！