CSS3动画属性有哪些：transition与animation用法详解

CSS3动画属性有哪些：常用属性与用法说明

时间：2026-09-01 06:32

CSS3动画主要分为transition过渡与animation关键帧两类。本文梳理常用属性、简写语法与@keyframes规则，结合悬停、入场、循环等场景给出代码示例与选型建议，帮助开发者快速写出流畅且可控的动画效果。

CSS3动画开发中，属性繁多且容易混淆。本文按transition过渡与animation关键帧两大体系梳理核心属性、简写语法与@keyframes规则，结合悬停、入场、循环等典型场景给出代码示例与选型建议，帮助开发者快速写出流畅且可控的动画效果。

transition过渡属性与适用场景

transition用于元素从一种状态平滑切换到另一种状态，适合按钮悬停、卡片浮起、输入框聚焦高亮等交互效果。它不需要单独编写关键帧，只要元素原始样式与目标样式不同，浏览器即可自动生成过渡过程。多个属性同时过渡时，可分别声明或使用简写统一控制。

transition-property：指定参与过渡的CSS属性，如color、transform、opacity。
transition-duration：控制过渡持续时间，时间越长变化越平缓。
transition-timing-function：定义速度曲线，常用值包括ease、linear、ease-in-out。
transition-delay：设置过渡开始前的延迟时间。
transition：简写属性，按顺序合并属性、时长、速度曲线与延迟，例如transition: transform .3s ease, opacity .3s ease;。

animation关键帧属性与完整控制

animation用于更完整的动画过程控制，支持多阶段、循环、往返、延迟与暂停等效果。实际开发中常直接使用简写，但理解各子属性有助于排查问题与精细控制。

animation-name：绑定@keyframes定义的关键帧名称。
animation-duration：设置单次动画时长。
animation-timing-function：设置动画速度变化方式。
animation-delay：设置动画延迟时间。
animation-iteration-count：设置播放次数，使用infinite可实现无限循环。
animation-direction：设置播放方向，如normal或alternate。
animation-fill-mode：控制动画开始前与结束后的样式保留方式，常用值包括forwards、backwards、both。
animation-play-state：控制动画运行或暂停。
animation：简写属性，依次合并名称、时长、速度曲线、延迟、次数、方向与填充模式，例如animation: fadeIn 0.6s ease 0s 1 forwards;。

@keyframes规则与多阶段动画

@keyframes用于定义关键帧动画各阶段的样式变化。animation-name必须与@keyframes后的名称保持一致，否则动画不会生效。当需求涉及多个阶段、连续动作或循环播放时，应优先使用@keyframes配合animation，而非仅依赖transition。

示例：

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

常见场景选型与代码示例

选型原则：按钮悬停、输入框聚焦、卡片轻微上浮等状态切换优先使用transition；元素入场、加载循环、呼吸灯、连续位移等多阶段效果优先使用@keyframes加animation。

transition悬停示例

.btn {
  transition: background-color .3s ease, transform .3s ease;
}
.btn:hover {
  background-color: #1677ff;
  transform: translateY(-2px);
}

@keyframes + animation完整示例

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.card {
  animation-name: fadeInUp;
  animation-duration: .6s;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
}