css3动画属性主要包括@keyframes关键帧定义和animation相关属性。本文会先说明常见的animation子属性，再区分每个属性和它对应的常见取值，同时补充完整示例与排查方法，帮助你更快上手。

CSS3动画通常由@keyframes和animation相关属性配合完成。@keyframes负责定义动画在不同阶段的样式变化，animation则负责指定动画名称、时长、速度曲线、延迟时间、播放次数等信息。也就是说，回答“css3动画属性有哪些”时，既要知道动画离不开@keyframes关键帧定义，也要知道实际控制播放的是animation及其子属性。开发中既可以把多个子属性分开写，也可以合并为animation简写形式。先理解每个子属性的含义，再使用简写，能减少顺序写错或遗漏参数的问题。

• @keyframes：定义动画关键帧，决定元素在不同阶段如何变化
• animation：动画简写属性，用来一次性设置多个动画参数
• animation-name：指定要调用的关键帧名称
• animation-duration：指定一次动画执行所需的时间
• animation-timing-function：指定动画速度变化曲线
• animation-delay：指定动画开始前的等待时间
• animation-iteration-count：指定动画播放次数，可写数字或infinite
• animation-direction：指定动画是否反向或交替播放
• animation-fill-mode：指定动画开始前和结束后的样式保留方式
• animation-play-state：指定动画是运行还是暂停

理解css3动画属性时，要先分清“属性”和“属性值”是两层概念。比如animation-timing-function是属性，linear和ease是它的常见取值；animation-direction是属性，normal和reverse是它的常见取值。这样看会更清楚，也更符合“有哪些属性”这个问题本身。实际使用时，最先要写清楚的是animation-name和animation-duration，否则动画通常不会按预期显示。其余属性则用于控制节奏、次数、方向和最终状态。

• animation-name：指定关键帧名称，常见写法是animation-name: move;
• animation-duration：指定动画时长，常见写法是animation-duration: 1s;
• animation-timing-function：指定速度曲线，常见值有linear、ease、ease-in、ease-out、ease-in-out
• animation-delay：指定延迟时间，常见写法是animation-delay: 0.5s;
• animation-iteration-count：指定播放次数，常见值有1、2、3或infinite
• animation-direction：指定播放方向，常见值有normal、reverse、alternate、alternate-reverse
• animation-fill-mode：指定动画前后样式保留方式，常见值有none、forwards、backwards、both
• animation-play-state：指定播放状态，常见值有running、paused

如果想真正弄清css3动画属性怎么用，最好直接看一套完整写法。下面这类结构最常见：先写@keyframes，再给元素写拆分属性，最后再看animation简写如何合并。对于初学者来说，拆分写法更容易理解；熟悉后再使用简写，代码会更紧凑。

• 完整关键帧示例：@keyframes floatBox { from { transform: translateY(0); opacity: 0.6; } to { transform: translateY(-20px); opacity: 1; } }
• 拆分写法示例：.box { animation-name: floatBox; animation-duration: 1s; animation-timing-function: ease-in-out; animation-delay: 0s; animation-iteration-count: infinite; animation-direction: alternate; animation-fill-mode: forwards; animation-play-state: running; }
• 简写写法示例：.box { animation: floatBox 1s ease-in-out 0s infinite alternate forwards running; }
• 简写理解重点：更稳妥的示例顺序通常写成“名称 + 时长 + 速度曲线 + 延迟 + 次数 + 方向 + 填充模式 + 播放状态”，这样更直观，也能减少时间值混淆
• 实战建议：如果一时拿不准简写顺序，优先拆分写子属性，排查和维护都会更方便

很多人知道了css3动画属性有哪些，真正写的时候还是会遇到“为什么不动”。这时不要只盯着概念，而是按顺序排查。通常先确认有没有定义@keyframes，再检查名称是否一致，然后检查时长、样式变化和元素本身是否具备可变化条件。按这个顺序处理，大多数动画问题都能很快定位。

• 先检查是否已经定义@keyframes，且名称和animation-name完全一致
• 检查animation-duration是否大于0，时长为0时动画通常看不到效果
• 检查关键帧里是否真的有样式变化，比如transform、opacity、left等前后值不能完全一样
• 检查元素是否具备可执行变化的条件，例如定位属性是否允许left移动
• 检查是否被其他样式覆盖，尤其是transform或animation被后续代码重置
• 使用简写时注意两个时间值不要混淆，前一个通常表示时长，后一个通常表示延迟
• 如果需要停留在最后状态，记得补充animation-fill-mode: forwards，否则动画结束后可能恢复原样

掌握css3动画属性后，关键不是死记一串名词，而是分清关键帧、属性和属性值之间的关系。先用拆分写法把每个属性用明白，再根据场景合并成animation简写，写动画会更稳定，排查问题也会更高效。

《夸克》非常好用的免费AI浏览器

下载APP查看