CSS3 的动画与过渡 (Animations and Transitions)

12. CSS3 的动画与过渡 (Animations and Transitions)

12.1 过渡 (Transitions)

过渡 允许你平滑地改变元素的样式属性，在属性值发生变化时创建渐变效果。

基本语法：

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

• property: 你想要过渡的 CSS 属性。
• duration: 过渡的持续时间（如 2s 或 500ms）。
• timing-function: 过渡的时间函数（如 linear、ease-in、ease-out、ease-in-out）。
• delay: 过渡的延迟时间（可选）。

示例代码：

/* 默认状态 */
.box {
  width: 100px;
  height: 100px;
  background-color: blue;
  transition: width 0.5s ease, background-color 0.5s ease;
}

/* 鼠标悬停时的状态 */
.box:hover {
  width: 200px;
  background-color: red;
}

解释：

• .box 元素在鼠标悬停时，宽度和背景颜色会平滑过渡，持续时间为 0.5 秒。

过渡的高级用法：

• 可以为多个属性设置不同的过渡时间和时间函数。

示例代码：

.advanced-transition {
  width: 100px;
  height: 100px;
  background-color: green;
  transition: width 1s ease-in-out, height 2s linear;
}

.advanced-transition:hover {
  width: 200px;
  height: 200px;
}

解释：

• width 的过渡持续 1 秒，height 的过渡持续 2 秒，时间函数分别为 ease-in-out 和 linear。

12.2 动画 (Animations)

动画 允许你创建复杂的动画效果，通过关键帧定义动画的不同阶段。

基本语法：

@keyframes animation-name {
  from { /* 开始状态 */ }
  to { /* 结束状态 */ }
}

.element {
  animation: animation-name duration timing-function delay iteration-count direction fill-mode;
}

• animation-name: 动画的名称（对应 @keyframes 的名字）。
• duration: 动画的持续时间（如 2s）。
• timing-function: 动画的时间函数（如 linear、ease、ease-in）。
• delay: 动画的延迟时间（可选）。
• iteration-count: 动画的播放次数（如 infinite、1）。
• direction: 动画的方向（如 normal、reverse）。
• fill-mode: 动画结束后的状态（如 forwards、backwards）。

示例代码：

/* 定义动画 */
@keyframes slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100px);
  }
}

/* 使用动画 */
.animated-box {
  width: 100px;
  height: 100px;
  background-color: blue;
  animation: slide 2s ease-in-out infinite;
}

解释：

• @keyframes slide 定义了一个简单的动画，将元素从 translateX(0) 平移到 translateX(100px)。
• .animated-box 元素应用了该动画，动画持续时间为 2 秒，时间函数为 ease-in-out，无限循环播放。

动画的高级用法：

• 使用多个关键帧来创建更复杂的动画效果。

示例代码：

@keyframes complex-animation {
  0% {
    background-color: blue;
    transform: translateX(0);
  }
  50% {
    background-color: green;
    transform: translateX(50px);
  }
  100% {
    background-color: red;
    transform: translateX(100px);
  }
}

.complex-box {
  width: 100px;
  height: 100px;
  animation: complex-animation 3s ease-in-out infinite;
}

解释：

• @keyframes complex-animation 定义了一个包含三个阶段的动画：开始时蓝色，50% 时绿色，结束时红色，并且平移效果逐渐增加。
• .complex-box 元素应用了该动画，持续时间为 3 秒，时间函数为 ease-in-out，无限循环播放。

12.3 动画与过渡的结合

过渡和动画可以结合使用，使动画效果更具互动性。例如，可以使用过渡来创建平滑的状态变化，而动画则用于更复杂的视觉效果。

示例代码：

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.rotating-box {
  width: 100px;
  height: 100px;
  background-color: blue;
  transition: background-color 0.5s ease;
}

.rotating-box:hover {
  background-color: red;
  animation: rotate 2s linear infinite;
}

解释：

• .rotating-box 元素在鼠标悬停时，背景颜色平滑过渡，同时应用了旋转动画，持续时间为 2 秒，时间函数为 linear，无限循环播放。

---

以上就是 CSS3 的动画与过渡 (Animations and Transitions) 的详细讲解。通过使用过渡和动画，你可以为网页添加平滑的状态变化和复杂的视觉效果，提升用户体验。