CSS3 动画

CSS 动画

让元素生动起来

CSS 动画允许你在不同的 CSS 样式配置之间创建过渡动画。你定义一系列关键帧（keyframes），描述元素在不同时间点的样式，然后浏览器会在这些关键帧之间平滑地进行插值（interpolate）。

这使得可以直接在 CSS 中创建复杂的多步动画，而无需依赖 JavaScript 或 Flash 等旧技术。

浏览器支持

CSS 动画（@keyframes 规则和 animation 属性）已广泛支持所有现代 Web 浏览器。对于这些功能，通常不再需要供应商前缀（如 -webkit-、-moz-）。

理解核心概念

创建一个 CSS 动画涉及两个主要步骤：

使用 @keyframes 定义动画： 这个规则指定了元素在动画过程中应采用的样式序列。你可以定义特定百分比时间点（或使用 from 表示 0%，to 表示 100%）的样式。
将动画应用到元素： 在你想动画的元素上使用 animation 属性（或 animation 简写属性），将其关联到已定义的 @keyframes 规则，并配置持续时间、计时函数、重复次数等方面的属性。

`@keyframes` 规则

@keyframes 规则定义了动画序列的不同阶段（关键帧）。你需要为动画指定一个名称，并在各个时间点指定样式。

示例：一个简单的动画，名为 color-change，将背景颜色从红色淡变为黄色：

@keyframes color-change {
  from { background-color: red; }
  to   { background-color: yellow; }
}

示例：一个名为 move-and-spin 的动画，使用百分比定义多个步骤：

@keyframes move-and-spin {
  0% {
    background-color: blue;
    transform: translateX(0) rotate(0deg);
  }
  50% {
    background-color: lightblue;
    transform: translateX(100px) rotate(180deg);
  }
  100% {
    background-color: blue;
    transform: translateX(0) rotate(360deg);
  }
}

使用 `animation` 属性应用动画

定义 @keyframes 规则后，就可以使用 animation 属性将其应用到元素上：

animation-name: 指定要使用的 @keyframes 规则的名称。
animation-duration: 指定动画一个周期的持续时间（例如 4s，500ms）。这是必须的；默认值为 0s，这意味着不会发生动画。
animation-timing-function: 控制动画的速度曲线（例如 linear，ease-in-out，cubic-bezier(...)）。
animation-delay: 指定动画开始前的延迟时间（例如 2s）。
animation-iteration-count: 指定动画应该重复的次数（例如 3，infinite）。
animation-direction: 指定动画是正向播放、反向播放还是交替播放（例如 normal，reverse，alternate，alternate-reverse）。
animation-fill-mode: 定义动画开始前（由于 animation-delay）或结束后应用于元素的样式（例如 none，forwards，backwards，both）。
animation-play-state: 允许暂停和恢复动画（例如 running，paused）。通常通过 JavaScript 控制。

示例：应用 move-and-spin 动画：

.animated-box {
  width: 100px;
  height: 100px;
  background-color: blue; /* 初始状态 */

  /* 应用动画 */
  animation-name: move-and-spin;
  animation-duration: 4s;
  animation-timing-function: ease-in-out;
  animation-delay: 1s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

`animation` 简写属性

通常使用 animation 简写属性更简洁，可以一次性设置多个动画值。顺序通常比较灵活，但持续时间和延迟必须能区分（如果两者都是时间值，持续时间通常在前）。

示例：使用简写属性应用上一个动画：

.animated-box {
  width: 100px;
  height: 100px;
  background-color: blue;

  /* 简写属性: name duration timing-function delay iteration-count direction */
  animation: move-and-spin 4s ease-in-out 1s infinite alternate;
}

注意：animation-play-state 和 animation-fill-mode 通常分开设置，因为它们不常包含在基本的简写属性中。

性能和可访问性注意事项

性能： 动画化某些 CSS 属性比其他属性性能更好。优先动画化 transform (如 translate, scale, rotate) 和 opacity，因为浏览器通常可以优化这些属性而无需重新计算布局。

可访问性： 一些用户对过度运动会感到不适或引发健康问题。使用 prefers-reduced-motion 媒体查询为这些用户禁用或减少非必要的动画。

@media (prefers-reduced-motion: reduce) {
  .animated-box {
    /* 为偏好减少运动的用户禁用或替换动画 */
    animation: none;
  }
}

CSS 动画属性总结

属性 / 规则	描述
`@keyframes`	定义动画序列的阶段（关键帧）。
`animation`	设置大多数动画属性的简写属性。
`animation-name`	指定要应用的 `@keyframes` 规则的名称。
`animation-duration`	设置动画一个周期的时长。
`animation-timing-function`	设置动画的速度曲线。
`animation-delay`	设置动画开始前的延迟时间。
`animation-iteration-count`	设置动画应重复的次数。
`animation-direction`	设置动画是正向、反向还是交替播放。
`animation-fill-mode`	设置动画执行时间之外应用的样式。
`animation-play-state`	允许暂停和恢复动画。