嘿，大家好！今天咱们聊聊 CSS 动画里那些“风骚”的家伙，以及那些“默默无闻”但其实很重要的幕后英雄。咱们的主题是 transform 和 opacity 这两个动画属性的性能优势，以及那些非合成属性的性能成本。准备好了吗？系好安全带，咱们要开始飙车了！ 开场：CSS 动画的江湖 想象一下，CSS 动画就像一个武林江湖，各种属性就像不同的武林高手，有的擅长轻功（transform），身手敏捷，飘逸潇洒；有的擅长隐身术（opacity），来无影去无踪；而有的则擅长重型武器（比如改变 width、height、top、left），威力巨大，但移动起来却笨重迟缓。 咱们的目标是找到那些既能打又能跑，性能又好的“武林高手”，用他们来打造流畅丝滑的动画效果。 第一章：transform 变形记：性能之王 transform 属性，绝对是 CSS 动画界的性能之王。它主要负责元素的变形，包括平移（translate）、旋转（rotate）、缩放（scale）和倾斜（skew）。 为什么它这么厉害呢？ 秘密在于“合成层”（Compositing Layers）。 1.1 合成层是个啥？ 简单来说， …