在网页开发中，把CSS动画和transform结合起来使用，是提升交互体验与渲染性能的关键手段。transform属性包含的平移、旋转、缩放等操作，由浏览器合成器直接处理，不会触发布局与绘制，因此动画非常流畅。配合animation规则，我们可以定义精细的时间线与缓动效果。
为什么结合transform更流畅
传统通过改变left或top实现的位移动画，会频繁引发重排；而使用translate则只影响合成层。以下对比两种写法：
/* 不推荐：触发重排 */
.box {
position: absolute;
left: 0;
animation: moveBad 2s;
}
@keyframes moveBad {
to { left: 200px; }
}
/* 推荐：仅合成层变化 */
.box {
transform: translateX(0);
animation: moveGood 2s;
}
@keyframes moveGood {
to { transform: translateX(200px); }
}
常见transform函数与动画配合
- translate：平移元素，支持translateX、translateY、translateZ
- rotate：二维或三维旋转，如rotate(45deg)
- scale：缩放，如scale(1.2)
组合变换示例
在同一个keyframes中组合多个transform函数，可实现入场卡片效果：
.card {
animation: enter 0.6s ease-out forwards;
}
@keyframes enter {
from {
opacity: 0;
transform: translateY(20px) scale(0.95);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
开启硬件加速
某些旧版浏览器不会自动提升transform动画层，可显式添加will-change：
.animate {
will-change: transform;
transform: translateZ(0);
}
动画曲线选择
使用cubic-bezier自定义缓动，比linear更自然。例如：
@keyframes pop {
0% { transform: scale(0.8); }
60% { transform: scale(1.05); }
100% { transform: scale(1); }
}
.btn { animation: pop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
移动端注意事项
在iOS上，尽量使用translate3d触发GPU加速，并避免动画中改变非transform属性。同时减少同时运行的动画数量，防止掉帧。
合理运用transform与animation，既能写出漂亮动效，也能保证页面性能稳定。
小结
将CSS动画建立在transform之上，是前端动效优化的基础原则。掌握函数组合、缓动曲线与硬件加速，就能轻松实现流畅界面动效。