CSS 动画速查
CSS 动画属性速查：animation、transition、transform 系列属性。
纯浏览器本地运行，数据不上传服务器
| 属性 | 说明 |
|---|---|
animation-name | 动画名称（@keyframes） |
animation-duration | 动画时长（s/ms） |
animation-timing-function | 缓动函数（ease/linear） |
animation-delay | 延迟开始 |
animation-iteration-count | 播放次数（infinite 无限） |
animation-direction | 方向（reverse/alternate） |
animation-fill-mode | 填充模式（forwards 保持末帧） |
animation-play-state | 播放状态（paused） |
@keyframes | 定义关键帧 |
transition | 过渡简写 |
transition-property | 过渡属性 |
transition-duration | 过渡时长 |
transition-timing-function | 过渡缓动 |
transition-delay | 过渡延迟 |
transform | 变换（translate/rotate/scale） |
transform-origin | 变换原点 |
perspective | 透视距离（3D） |
translate() | 位移 |
rotate() | 旋转 |
scale() | 缩放 |
skew() | 倾斜 |
opacity | 透明度 |
will-change | 提示浏览器优化 |
使用说明
- 速查 CSS 动画与过渡属性。
- 搜索支持按属性或说明过滤。
- 实现交互动效、页面动画时对照参考。
常见问题
transition 和 animation 区别？
transition 需触发（hover 等），animation 自动播放（@keyframes）。
哪些属性适合动画？
transform 和 opacity 性能最好（GPU 合成），避免动画 width/height。