6. CSS 过渡和动画

CSS 提供了强大的过渡（transition）和动画（animation）功能，可以为网页元素创建动态的视觉效果。这些功能不仅能够提升用户体验，还可以让网页更加生动和有趣。

1. CSS 过渡（Transition）

CSS 过渡（transition）用于在元素的属性值发生变化时，定义从一个状态到另一个状态的平滑过渡效果。

1.1 过渡的语法

transition: [property] [duration] [timing-function] [delay];

• property: 指定需要应用过渡效果的 CSS 属性（如 width、background-color 等）。all 表示所有支持过渡的属性。
• duration: 过渡的持续时间（如 1s、500ms 等）。
• timing-function: 过渡的时间曲线（如 ease、linear 等）。
• delay: 延迟过渡的时间。

1.2 示例：基本过渡效果

<div class="box"></div>

.box {
  width: 100px;
  height: 100px;
  background-color: blue;
  transition: all 0.5s ease; /* 设置所有支持的属性过渡 */
}

.box:hover {
  width: 200px; /* 鼠标悬停时宽度变为 200px */
  background-color: red; /* 鼠标悬停时背景颜色变为红色 */
}

效果：鼠标悬停在方块上时，方块宽度变宽，背景颜色变为红色，整个变化带有平滑过渡效果。

1.3 过渡的时间曲线（timing-function）

timing-function 决定过渡执行的速率。常见值包括：

• ease：默认值，缓慢开始，中间加速，最后减速。
• linear：匀速过渡。
• ease-in：缓慢开始。
• ease-out：缓慢结束。
• ease-in-out：缓慢开始和结束。
• cubic-bezier(n,n,n,n)：自定义贝塞尔曲线。

示例：

.box {
  width: 100px;
  height: 100px;
  background-color: blue;
  transition: all 1s ease-in-out;
}

.box:hover {
  transform: scale(1.5); /* 放大 1.5 倍 */
}

1.4 多属性过渡

可以为不同的属性设置不同的过渡效果。

.box {
  width: 100px;
  height: 100px;
  background-color: blue;
  transition: width 1s ease, background-color 2s linear;
}

.box:hover {
  width: 200px; /* 宽度过渡时间为 1s */
  background-color: red; /* 背景颜色过渡时间为 2s */
}

2. CSS 动画（Animation）

CSS 动画（animation）允许通过定义关键帧（@keyframes）实现更复杂的动画效果。这与过渡不同，动画是独立运行的，并且可以循环播放或按照需求触发。

2.1 动画的语法

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

常用属性：

• name: 动画名称，与 @keyframes 定义的名称对应。
• duration: 动画持续时间（如 1s, 500ms）。
• timing-function: 时间曲线，类似于过渡中的 timing-function。
• delay: 动画延迟开始时间。
• iteration-count: 动画播放次数（infinite 表示无限循环）。

• direction: 动画播放方向：

  • normal: 默认值，正向播放。
  • reverse: 反向播放。
  • alternate: 正向和反向交替循环。
  • alternate-reverse: 从反向开始交替循环。
• fill-mode: 动画结束后元素的状态（none、forwards、backwards、both）。
• play-state: 动画播放状态（running、paused）。

2.2 关键帧（@keyframes）

关键帧定义了动画的状态和变化过程。

语法：

@keyframes animation-name {
  0% { /* 起始状态 */ }
  50% { /* 中间状态 */ }
  100% { /* 结束状态 */ }
}

2.3 示例：基本动画

<div class="box"></div>

.box {
  width: 100px;
  height: 100px;
  background-color: blue;
  animation: move 2s ease-in-out infinite;
}

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

效果：元素左右平滑移动，周期为 2 秒，并无限循环。

2.4 动画方向

通过设置动画方向，可以让动画反向或交替播放。

示例：

.box {
  width: 100px;
  height: 100px;
  background-color: blue;
  animation: move 2s ease-in-out infinite alternate;
}

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

效果：元素来回移动，动画交替播放。

2.5 多属性动画

动画可以同时改变多个 CSS 属性。

示例：

.box {
  width: 100px;
  height: 100px;
  background-color: blue;
  animation: complex 3s infinite;
}

@keyframes complex {
  0% {
    transform: translateX(0) scale(1);
    background-color: blue;
  }
  50% {
    transform: translateX(200px) scale(1.5);
    background-color: red;
  }
  100% {
    transform: translateX(0) scale(1);
    background-color: blue;
  }
}

效果：元素在移动时会变大并改变颜色，动画循环播放。

2.6 动画的暂停与恢复

可以使用 animation-play-state 暂停或恢复动画。

示例：

<div class="box"></div>
<button onclick="toggleAnimation()">暂停/恢复动画</button>

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

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

function toggleAnimation() {
  const box = document.querySelector('.box');
  const isPaused = getComputedStyle(box).animationPlayState === 'paused';
  box.style.animationPlayState = isPaused ? 'running' : 'paused';
}

效果：点击按钮可暂停或恢复动画。

3. 过渡与动画的区别

4. 小结

• CSS 过渡：适合简单的状态变化，例如鼠标悬停、点击按钮等触发的动态效果。
• CSS 动画：用于更复杂的动画场景，支持多关键帧，可以自动播放和循环。
• 结合使用：在实际项目中，可以将过渡和动画结合使用，比如动画循环播放、过渡触发动画等。

通过熟练掌握 CSS 的过渡和动画，你可以为网页添加丰富的视觉效果，让用户体验更加生动！