CSS 动画与过渡效果

1. CSS 过渡 (Transition)

CSS 过渡提供了一种在 CSS 属性值发生变化时控制动画速度的方法。它使属性变化成为一个持续一段时间的过程，而不是立即生效。例如，将一个元素的颜色从白色改为黑色，通常这个改变是立即生效的，使用 CSS 过渡后，该元素的颜色将按照一定的曲线速率从白色变化为黑色。

特点：
- 简单易用，适用于简单的状态切换。
- 只能定义开始和结束状态，中间状态由浏览器自动补全，称为隐式过渡。
- 需要事件触发，例如 :hover、:focus、JavaScript 事件等。
基本属性：
- transition-property: 指定过渡效果应用于哪些 CSS 属性，例如 width、opacity、background-color 等。如果设置为 all，则所有可过渡的属性都将应用过渡效果。
- transition-duration: 指定过渡效果的持续时间，单位为秒 (s) 或毫秒 (ms)。
- transition-timing-function: 指定过渡效果的速度曲线，例如 linear（匀速）、ease（默认值，先加速后减速）、ease-in（加速）、ease-out（减速）、ease-in-out（先加速后减速）等。也可以使用 cubic-bezier() 函数自定义速度曲线。
- transition-delay: 指定过渡效果开始之前的延迟时间，单位为秒 (s) 或毫秒 (ms)。
简写属性：
- transition: property duration timing-function delay;

示例： CSS

css 复制代码

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: width 0.5s ease-in-out, background-color 1s linear; /* 同时过渡 width 和 background-color */
}

.box:hover {
  width: 200px;
  background-color: blue;
}

在这个例子中，当鼠标悬停在 .box 元素上时，其宽度会在 0.5 秒内平滑地过渡到 200px，背景颜色会在 1 秒内匀速过渡到蓝色。

2. CSS 动画 (Animation)

CSS 动画提供了更强大的动画控制能力，可以创建复杂的动画序列。它通过关键帧 (@keyframes) 来定义动画的各个阶段，并可以控制动画的循环、播放方向等。

特点：
- 可以创建复杂的动画序列，包括多个中间状态。
- 无需事件触发，可以自动播放。
- 可以控制动画的循环、播放方向、速度等。
基本属性：
- @keyframes: 用于定义动画的关键帧。每个关键帧使用百分比 (0% 到 100%) 或 from（相当于 0%）和 to（相当于 100%）来表示动画的不同阶段。
- animation-name: 指定要应用的动画名称，与 @keyframes 中定义的名称对应。
- animation-duration: 指定动画的持续时间。
- animation-timing-function: 指定动画的速度曲线，与 transition-timing-function 类似。
- animation-delay: 指定动画开始之前的延迟时间。
- animation-iteration-count: 指定动画的循环次数，可以设置为无限循环 (infinite)。
- animation-direction: 指定动画的播放方向，例如 normal（正常播放）、reverse（反向播放）、alternate（交替播放）、alternate-reverse（反向交替播放）。
- animation-fill-mode: 指定动画在播放之前和之后如何应用样式，例如 none（不应用任何样式）、forwards（应用动画结束时的样式）、backwards（应用动画开始时的样式）、both（同时应用开始和结束时的样式）。
- animation-play-state: 指定动画的播放状态，例如 running（播放）或 paused（暂停）。
简写属性：
- animation: name duration timing-function delay iteration-count direction fill-mode play-state;

示例： CSS

css 复制代码

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  animation: move 2s linear infinite alternate;
}

@keyframes move {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(100px);
  }
  100% {
    transform: translateX(0);
  }
}

在这个例子中，.box 元素会以 2 秒的周期，匀速地在水平方向上来回移动 100px，并无限循环播放。

3. 适用场景

Transition (过渡)： 适用于简单的状态切换动画，例如鼠标悬停效果、表单元素获得焦点效果等。代码简洁，易于使用。
Animation (动画)： 适用于复杂的动画序列，例如页面加载动画、元素入场动画、循环动画等。控制能力更强，可以实现更丰富的动画效果。