✨ CSS 动画与性能
Transition、Animation、缓动函数、GPU 加速的可交互演示
1. Transition 过渡动画
提示： 鼠标悬停在方块上查看过渡效果
2. 缓动函数对比
.box {
transition-timing-function: linear;
transition-timing-function: ease;
transition-timing-function: ease-in;
transition-timing-function: ease-out;
transition-timing-function: ease-in-out;
transition-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
3. Animation 关键帧动画
1s
4. 常用动画效果集合
提示： 点击任意卡片查看动画效果
5. GPU 加速性能对比
⚠️ 性能提示：
• 避免： left/top/width/height (触发 Layout + Paint)
• 推荐： transform/opacity (只触发 Composite，GPU 加速)
• 使用 will-change 提前通知浏览器优化
.box-bad {
animation: move-left 2s infinite;
}
@keyframes move-left {
0% { left: 0; }
100% { left: 200px; }
}
.box-good {
animation: move-transform 2s infinite;
will-change: transform;
}
@keyframes move-transform {
0% { transform: translateX(0); }
100% { transform: translateX(200px); }
}
.box {
will-change: transform, opacity;
}
.box.animating {
will-change: transform;
}