使用transform合并位移、旋转、缩放可提升性能，避免重排；2. 分离颜色与变换动画到不同元素以减少重绘；3. 通过animation-timing-function差异化控制各属性变化节奏，增强自然感；4. 避免使用top、left等触发重排的属性，优先采用transform和opacity实现流畅动画。
当需要对css动画元素实现多个属性的组合动画时，关键在于合理组织transform、opacity、Filter等可动画属性，并通过@keyframes精确控制每一帧的状态。正确使用这些技巧不仅能提升视觉表现力，还能保证动画流畅、性能良好。
1. 使用 transform 合并位移、旋转、缩放
transform 是实现多属性组合动画的核心属性，支持平移（translate）、旋转（rotate）、缩放（scale）和倾斜（skew）等多种变换，且浏览器对其有良好的硬件加速支持。
重要的是将多个变换写在同一个 transform 中，而不是拆分到多个CSS规则中，避免触发重排或样式冲突。
示例：
.element { animation: comboTransform 2s ease-in-out infinite; } <p>@keyframes comboTransform { 0% { transform: translateX(0) rotate(0deg) scale(1); } 50% { transform: translateX(100px) rotate(180deg) scale(1.5); } 100% { transform: translateX(0) rotate(360deg) scale(1); } }</p>
这样在一个transform中组合多个变换，浏览器能高效合成图层，减少渲染开销。
立即学习“前端免费学习笔记（深入）”；
2. 分离独立变化属性以避免重绘
某些属性如color、background会触发重绘，而opacity和transform通常只影响合成层。为了性能，应尽量让动画集中在这些“轻量级”属性上。
如果必须同时动画颜色和位置，建议将不同属性交由不同元素承担，通过结构分离来优化渲染。
结构建议：
<div class="container"><div class="move-part">平移动画</div><div class="color-part">颜色渐变</div></div>
.move-part { animation: slide 2s infinite alternate; transform: translateZ(0); /* 提升为合成层 */ } <p>.color-part { animation: changeColor 2s infinite alternate; }</p>
这样每个元素只负责一个主要动画属性，避免复合属性导致频繁重绘。
3. 利用 animation-timing-function 精细控制节奏
多个属性同时变化时，统一使用线性缓动可能显得生硬。可以通过为@keyframes中的不同属性设置不同的变化节奏，增强自然感。
技巧示例：
@keyframes naturalCombo { 0% { transform: scale(1) rotate(0deg); opacity: 0.5; filter: blur(10px); } 70% { transform: scale(1.2) rotate(10deg); /* 先快速放大 */ opacity: 0.8; /* 透明度缓慢上升 */ filter: blur(2px); /* 模糊快速收敛 */ } 100% { transform: scale(1) rotate(0deg); opacity: 1; filter: blur(0); } }
通过关键帧分布，可以让不同属性按各自逻辑变化，形成更生动的组合效果。
4. 避免 layout thrashing：优先使用 transform 和 opacity
动画中应避免使用会触发页面布局计算的属性，如width、height、top、left等。这些属性会导致浏览器频繁重排，卡顿明显。
取而代之的是：
- 用
transform: translateY()替代top - 用
transform: scale()替代width/height变化 - 用
opacity实现淡入淡出，而非visibility
这些属性不会影响文档流，动画更顺滑。
基本上就这些。掌握 transform 的合并使用、合理拆分动画层级、控制关键帧节奏，并始终关注渲染性能，就能写出既炫酷又高效的多属性CSS组合动画。