动画简写属性
最后更新：2026-09-13
animation 动画简写属性
animation 是 CSS 中用于实现复杂动画效果的简写属性，配合 @keyframes 规则可以定义多阶段、可循环、可暂停的动画序列。与 transition 不同，animation 无需触发条件即可自动播放，适合实现加载动画、轮播、呼吸效果等持续性的视觉表现。
| 分类 | |
|---|---|
| 初始值 | none |
| 继承 | 否 |
| 适用于 | all |
| 可动画 | discrete |
| CSS 版本 | CSS3 |
| 状态 | 标准 |
📝 语法
animation: [ none | <single-animation> ]#;
/* <single-animation> = <time> || <easing-function> || <time> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode> || <single-animation-play-state> || [ none | <keyframes-name> ] */⚙️ 取值
| 值 | 类型 | 描述 |
|---|---|---|
<single-animation># | 值 | 动画简写：名称 持续时间 时序函数 延迟 次数 方向 填充模式 播放状态 |
▶ 示例
编辑下方代码，在 playground 中查看实时效果：
🌐 浏览器支持
| 浏览器 |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| animation | ✓ v43 | ✓ v12 | ✓ v16 | ✓ v9 | ✓ v30 |
| 所有主流浏览器均支持 | |||||
提示： 简写中各值的顺序不重要，但第一个可被解析为时间值的是 duration，第二个是 delay；名称若与关键字同名需避免歧义。
重要： animation 简写中若不包含 animation-name，则整个声明无效；通常建议把 animation-name 放在简写里以确保动画生效。
❓ 常见问题
Qanimation 可以中途暂停吗？
A可以。设置 animation-play-state: paused 暂停，running 恢复。最常见的用法是配合 :hover 实现「鼠标悬停时暂停动画」：平时 running，悬停时切换为 paused。注意 pause 状态下动画停留在当前帧，恢复后从暂停处继续播放。
Q如何让动画只播放一次后停在最后一帧？
A可以。设置 animation-play-state: paused 暂停，running 恢复。最常见的用法是配合 :hover 实现「悬停时暂停动画」。pause 状态下动画停留在当前帧，恢复后从暂停处继续播放。
Qanimation 简写里两个时间值哪个是 duration 哪个是 delay？
A简写中第一个可解析为时间的是 duration，第二个才是 delay。例如 animation: bounce 1.5s 0.5s ease 中，1.5s 是播放时长，0.5s 是延迟 0.5 秒后开始；只写一个时间时它就是 duration，delay 默认为 0s。把这两个时间搞反是简写最常见的错误。
QCSS 动画卡顿、掉帧怎么办？如何让 animation 更流畅？
A优先只对 transform 和 opacity 做动画，避免动画 width、height、filter 等触发重排重绘的属性；给动画元素设置 will-change 提前建层；动画元素尽量用绝对定位脱离文档流。animation-delay 取负值可跳过开头直接进入中段。
🏷️ 相关属性
💡 相关案例
📚 相关教程
