CSS动画属性与配置

CSS动画通过8个属性配置，控制动画名称、时长、缓动、循环、方向、填充模式、播放状态等。

animation-name

指定 @keyframes 定义的动画名称。

.element {
  animation-name: slideIn;
}

@keyframes slideIn {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}

animation-duration

设置动画完成一个周期的时间。

animation-duration: 1s;
animation-duration: 500ms;

/* 多个动画不同时长 */
animation-name: fadeIn, slideIn;
animation-duration: 0.3s, 0.5s;

默认值为 0s，必须显式设置才能看到动画效果。

animation-timing-function

定义动画的速度曲线。

/* 关键字 */
animation-timing-function: ease;
animation-timing-function: linear;
animation-timing-function: ease-in;
animation-timing-function: ease-out;
animation-timing-function: ease-in-out;

/* 贝塞尔曲线 */
animation-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55);

/* 阶梯函数 */
animation-timing-function: steps(4, end);

animation-delay

设置动画开始前的延迟时间。

animation-delay: 0.5s;
animation-delay: -0.3s; /* 负值：跳过前0.3秒动画 */

animation-iteration-count

设置动画播放次数。

animation-iteration-count: 1;      /* 播放1次（默认） */
animation-iteration-count: 3;      /* 播放3次 */
animation-iteration-count: infinite; /* 无限循环 */

animation-direction

设置动画播放方向。

animation-direction: normal;      /* 正向播放（默认） */
animation-direction: reverse;     /* 反向播放 */
animation-direction: alternate;    /* 正向后反向交替 */
animation-direction: alternate-reverse; /* 反向后正向交替 */

animation-fill-mode

设置动画执行前后的样式状态。

animation-fill-mode: none;       /* 默认，动画外保持原样式 */
animation-fill-mode: forwards;   /* 动画结束后保持最后一帧样式 */
animation-fill-mode: backwards;  /* 动画开始前应用第一帧样式 */
animation-fill-mode: both;       /* 同时应用 forwards 和 backwards */

/* 示例：动画结束后保持最终状态 */
.box {
  animation: fadeIn 0.5s forwards;
}

animation-play-state

控制动画播放或暂停。

animation-play-state: running; /* 播放（默认） */
animation-play-state: paused;  /* 暂停 */

交互示例

.box {
  animation: spin 2s linear infinite;
}

.box:hover {
  animation-play-state: paused;
}

简写属性

animation 简写按固定顺序排列：

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

省略规则

animation: slideIn 1s;               /* 最简写 */
animation: slideIn 1s ease-in-out;    /* 常用写法 */
animation: slideIn 1s ease 0.5s infinite alternate forwards;

多动画简写

animation:
  fadeIn 0.5s ease forwards,
  slideIn 0.3s ease-out 0.5s forwards;

完整示例

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}

.ball {
  animation-name: bounce;
  animation-duration: 0.6s;
  animation-timing-function: ease-in-out;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-fill-mode: none;
  animation-play-state: running;

  /* 等价于简写 */
  animation: bounce 0.6s ease-in-out infinite alternate;
}

要点总结

• animation-name 指定关键帧名称
• animation-duration 必须设置，默认 0s 无效果
• animation-iteration-count: infinite 实现无限循环
• animation-direction: alternate 实现往返动画
• animation-fill-mode: forwards 保持动画结束状态
• animation-play-state 可通过伪类控制暂停/播放
• 简写顺序：名称 → 时长 → 缓动 → 延迟 → 次数 → 方向 → 填充 → 状态