3.2 动画与过渡

3.2 动画与过渡

1. 什么是 CSS 动画？

CSS 动画（CSS Animations）允许你在网页上创建平滑、渐变的动画效果。与传统的 JavaScript 动画不同，CSS 动画是由 CSS 属性控制的，因此在性能和实现上通常更加高效。

CSS 动画由两个主要部分组成：

1. 定义关键帧（Keyframes）：指定动画的不同阶段，定义动画如何从一个状态过渡到另一个状态。
2. 应用动画：将定义的关键帧动画应用到元素上，并设置动画的时长、延迟、次数等。

2. CSS 动画的基本语法

关键帧（Keyframes）

关键帧用于定义动画过程中的不同状态，可以控制元素在不同时间点的样式。关键帧使用 @keyframes 规则来定义。

@keyframes example {
  0% {
    transform: rotate(0deg);
    opacity: 1;
  }
  50% {
    transform: rotate(180deg);
    opacity: 0.5;
  }
  100% {
    transform: rotate(360deg);
    opacity: 1;
  }
}

上面的代码定义了一个名为 example 的动画，该动画将元素从 0deg 旋转到 360deg，并且在过程中其透明度从 1 变为 0.5，再变回 1。

应用动画

定义了关键帧后，可以使用 animation 属性将动画应用到元素上。animation 属性可以设置多个值，如动画名称、时长、延迟、重复次数等。

.element {
  animation: example 4s infinite;
}

在这段代码中，.element 会应用 example 动画，动画时长为 4 秒，并且会无限次重复。

animation 属性的常用值：

• animation-name：动画的名称，引用 @keyframes 中定义的动画。
• animation-duration：动画的持续时间。
• animation-timing-function：动画的速度曲线，控制动画的加速与减速。
• animation-delay：动画延迟开始的时间。
• animation-iteration-count：动画循环的次数，infinite 表示无限循环。
• animation-direction：控制动画的播放方向，如 normal（正向播放），reverse（反向播放），alternate（交替播放）。
• animation-fill-mode：动画结束时的状态，forwards 会保持动画的最终状态。

3. CSS 动画的示例

示例 1：旋转动画

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.element {
  width: 100px;
  height: 100px;
  background-color: #3498db;
  animation: rotate 5s linear infinite;
}

在这个例子中，.element 元素会不断旋转。

示例 2：渐变动画

@keyframes fade {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.element {
  width: 100px;
  height: 100px;
  background-color: #e74c3c;
  animation: fade 3s ease-in-out infinite;
}

这段代码会使 .element 元素在 3 秒钟内渐变显示和消失。

4. CSS 过渡（Transitions）

CSS 过渡（Transitions）是用于在元素状态变化时添加平滑过渡效果的技术。过渡效果通常用于响应用户的交互，例如悬停（hover）或焦点（focus）。

CSS 过渡让你控制属性值的变化过程，使得元素的样式变化更加平滑。

过渡的基本语法

element {
  transition: property duration timing-function delay;
}

• property：要过渡的属性名称，例如 background-color、opacity 等。
• duration：过渡的持续时间。
• timing-function：过渡的速度曲线，常见值有 ease、linear、ease-in、ease-out 等。
• delay：延迟时间，表示在变化开始前的等待时间。

示例 1：背景颜色变化

.element {
  width: 100px;
  height: 100px;
  background-color: #3498db;
  transition: background-color 0.5s ease;
}

.element:hover {
  background-color: #e74c3c;
}

在这个例子中，当 .element 被悬停时，它的背景颜色会从蓝色 (#3498db) 平滑过渡到红色 (#e74c3c)，并且过渡时长为 0.5 秒。

示例 2：缩放效果

.element {
  width: 100px;
  height: 100px;
  background-color: #e74c3c;
  transition: transform 0.3s ease;
}

.element:hover {
  transform: scale(1.2);
}

在此示例中，当 .element 被悬停时，它会平滑地放大 1.2 倍。

5. 过渡与动画的区别

• 过渡：通常是响应某些事件（如 hover）时发生的变化，过渡是由用户的交互触发的，仅定义了开始和结束状态。
• 动画：可以在没有用户交互的情况下自动运行，通常用于更加复杂和长时间的变化过程。动画可以通过 @keyframes 定义多个关键帧。

6. 结论

• CSS 动画 是用来制作复杂、动态的效果，可以在多个步骤中精确控制元素的状态变化。
• CSS 过渡 是用来制作简洁、平滑的过渡效果，主要用于响应用户交互时的变化。

通过灵活使用 CSS 动画和过渡，可以大大增强网页的视觉效果，提升用户体验。