css3动画常见属性很多，真正使用时更需要一份能快速查作用、常见取值、示例和注意点的一览表。本文聚焦animation与@keyframes相关设置，把常用属性按统一字段整理，方便你在开发中直接查阅和套用。

严格对应css3动画属性这一主题时，重点应放在animation系列属性和@keyframes规则上。@keyframes负责定义动画过程，animation负责把关键帧绑定到元素，并控制时长、速度、次数、方向和结束状态。先理解这两部分的配合关系，再查具体属性会更高效。

• @keyframes：定义动画在不同阶段的样式变化
• animation-name：把元素与某个关键帧名称绑定
• animation其他子属性：控制播放时间、节奏、次数、方向和状态

下面按“属性名、作用、常见取值、示例、注意点”统一整理，方便直接查表使用。

• animation-name｜作用：指定关键帧名称｜常见取值：fadeIn、slideUp、自定义名称｜示例：animation-name: fadeIn;｜注意点：名称必须与@keyframes后的名称完全一致
• animation-duration｜作用：设置一次动画播放时长｜常见取值：0.3s、1s、2s｜示例：animation-duration: 1s;｜注意点：默认值是0s，不写时通常看不到动画
• animation-timing-function｜作用：设置速度曲线｜常见取值：ease、linear、ease-in、ease-out、ease-in-out、cubic-bezier(...)｜示例：animation-timing-function: ease-in-out;｜注意点：做匀速旋转或跑马灯时常用linear
• animation-delay｜作用：设置动画延迟开始时间｜常见取值：0s、0.5s、2s｜示例：animation-delay: 0.5s;｜注意点：延迟期间是否应用首帧样式，常与animation-fill-mode一起看
• animation-iteration-count｜作用：设置播放次数｜常见取值：1、2、3、infinite｜示例：animation-iteration-count: infinite;｜注意点：循环动画要关注性能和用户阅读干扰
• animation-direction｜作用：设置播放方向｜常见取值：normal、reverse、alternate、alternate-reverse｜示例：animation-direction: alternate;｜注意点：alternate表示奇数次正向、偶数次反向
• animation-fill-mode｜作用：设置动画开始前或结束后的样式保留方式｜常见取值：none、forwards、backwards、both｜示例：animation-fill-mode: forwards;｜注意点：forwards保留结束状态，backwards在延迟期间应用首帧样式
• animation-play-state｜作用：控制动画运行或暂停｜常见取值：running、paused｜示例：animation-play-state: paused;｜注意点：常用于鼠标悬停暂停轮播或手动控制动画
• animation｜作用：以上属性的简写形式｜常见取值：名称 时长 曲线 延迟 次数 方向 填充状态 播放状态｜示例：animation: fadeIn 1s ease 0.3s 1 normal forwards;｜注意点：简写时至少要清楚名称和时长，其余值建议按固定顺序书写避免混淆

@keyframes本身不是普通属性，但它决定了动画每个阶段怎么变化，因此查动画属性时通常要一起看。实际开发中，0%和100%最常用，中间可以按需要加入50%或更多节点。

• from等同于0%，to等同于100%，适合简单首尾动画
• 可以写0%、50%、100%这样的多阶段节点，让动画过程更明确
• 常配合transform、opacity使用，性能通常比直接改top、left更稳定
• 不建议把display这类不可平滑过渡的属性当作关键帧主变化项
• 多个关键帧名称应语义化，例如fadeIn、cardFloat、iconShake，便于维护

只看属性定义还不够，下面给出几组能直接复制修改的完整示例。通过示例可以更快理解取值组合方式。

• 淡入动画示例：@keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } .box { animation: fadeIn 0.8s ease forwards; }
• 无限循环浮动示例：@keyframes floatY { 0% { transform: translateY(0); } 50% { transform: translateY(-10px); } 100% { transform: translateY(0); } } .card { animation: floatY 2s ease-in-out infinite; }
• 延迟进入示例：@keyframes slideUp { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0); } } .item { animation: slideUp 0.6s ease 0.4s both; }
• 悬停触发动画示例：@keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.06); } 100% { transform: scale(1); } } .btn:hover { animation: pulse 0.5s ease; }

很多动画问题并不是属性不会写，而是简写顺序、默认值、可动画属性和性能细节没有处理好。把这些易错点提前记住，比单纯背属性名更实用。

• animation简写容易写乱，推荐按“名称 时长 速度曲线 延迟 次数 方向 填充状态 播放状态”的习惯顺序书写
• 多个动画同时声明时，用逗号分隔，例如animation: fadeIn 0.6s ease, floatY 2s ease-in-out infinite;，每组参数一一对应
• 不是所有CSS属性都适合动画化，display、background-image这类属性通常不能做平滑动画，优先使用opacity和transform
• animation-duration默认是0s，animation-iteration-count默认是1，animation-fill-mode默认是none，效果异常时要先排查默认值
• 页面中大面积、长期无限循环动画会带来性能和干扰问题，移动端尤其要控制数量和频率
• 如果只是hover、focus、active等状态切换，优先用transition；只有需要完整时间轴时再用animation，避免同一效果重复叠加两套机制
• transition: all虽然写起来省事，但容易让不该过渡的属性也参与动画，实际项目中更建议明确写具体属性，如transition: opacity 0.3s ease, transform 0.3s ease;

这份css3动画属性一览表的核心，不只是列出名称，而是把作用、常见取值、示例和注意点放到同一套查阅结构里。开发时先判断是否需要@keyframes，再按表选择animation属性组合，通常就能更快写出稳定、可维护的动画效果。

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

下载APP查看