Web动画指南
CSS 动画
/* 定义关键帧 */
@keyframes slideIn {
from { transform: translateY(-20px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
@keyframes pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
/* 应用动画 */
.modal {
animation: slideIn 300ms ease-out both;
}
.badge {
animation: pulse 2s ease-in-out infinite;
}
/* 多个动画 */
.element {
animation: slideIn 0.3s ease, pulse 2s 0.3s infinite;
}
Web Animations API (WAAPI)
const el = document.querySelector('.box');
const animation = el.animate([
{ transform: 'translateX(0)', opacity: 1 },
{ transform: 'translateX(400px)', opacity: 0 }
], {
duration: 1000,
easing: 'ease-in-out',
fill: 'forwards',
iterations: 1
});
// 控制播放
animation.pause();
animation.play();
animation.reverse();
animation.cancel();
// 完成回调
animation.finished.then(() => console.log('动画完成！'));
animation.onfinish = () => el.remove();
时间函数
| 函数 | 描述 | 感觉 |
|---|---|---|
| linear | 匀速 | 机械感 |
| ease | 慢-快-慢 | 自然（默认） |
| ease-in | 慢启动 | 物体离开 |
| ease-out | 慢结束 | 物体进入 |
| ease-in-out | 两端慢 | 物体穿越 |
| cubic-bezier() | 自定义曲线 | 任意感觉 |
性能最佳实践
/* 只对 GPU 合成属性制作动画 */
/* 好的做法 — 不触发布局/绘制 */
.anim {
transform: translateX(100px) scale(1.1);
opacity: 0.5;
filter: blur(4px);
}
/* 不好的做法 — 触发布局 */
.bad-anim {
top: 100px; /* 布局 */
width: 200px; /* 布局 */
}
/* 提示浏览器准备合成层 */
.will-animate {
will-change: transform, opacity;
}
/* 动画结束后移除以释放内存 */
element.addEventListener('animationend', () => {
element.style.willChange = 'auto';
});