6. CSS 过渡和动画属性

CSS 为网页提供了 过渡（Transitions） 和 动画（Animations） 的功能，用于实现元素样式的动态变化和复杂的动画效果。

以下是 CSS 过渡和动画相关属性的详细分类、简要介绍以及使用方法。

1. CSS 过渡（Transitions）

CSS 过渡属性允许你定义元素样式的平滑变化（如颜色、大小、位置等），在样式发生改变时逐渐应用效果。

1.1 transition

• 用于设置一个或多个过渡效果的简写属性。

• 语法：

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

  • property：指定需要添加过渡效果的属性（如 color、all 等）。
  • duration：过渡持续时间（如 1s 表示 1 秒）。
  • timing-function：过渡的时间函数，控制过渡的速度（如 ease、linear）。
  • delay：设置过渡开始的延迟时间（如 0.5s）。

• 示例：

  div {
    transition: all 0.5s ease-in-out;
  }

1.2 transition-property

• 指定需要应用过渡效果的属性。

• 值：

  • 单个属性：如 color、background-color。
  • all（默认值）：应用到所有可以过渡的属性。

示例：

div {
  transition-property: background-color, width; /* 仅对背景颜色和宽度应用过渡 */
}

1.3 transition-duration

• 设置过渡效果的时间长度。

• 值：

  • 时间单位：如 s（秒）或 ms（毫秒）。

示例：

div {
  transition-duration: 2s; /* 过渡持续时间为 2 秒 */
}

1.4 transition-timing-function

• 定义过渡的速度曲线。

• 值：

  • ease（默认值）：缓动（开始慢，中间加速，结束减速）。
  • linear：线性（匀速）。
  • ease-in：加速（开始慢，结束快）。
  • ease-out：减速（开始快，结束慢）。
  • ease-in-out：先加速后减速。
  • 自定义函数：如 cubic-bezier(0.25, 0.1, 0.25, 1)。

示例：

div {
  transition-timing-function: ease-in-out; /* 先加速再减速 */
}

1.5 transition-delay

• 设置过渡效果的延迟时间。

• 值：

  • 时间单位：如 s 或 ms。

示例：

div {
  transition-delay: 1s; /* 过渡在 1 秒后开始 */
}

过渡完整示例：

div {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: width 0.5s ease-in-out, background-color 1s ease;
}

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

2. CSS 动画（Animations）

CSS 动画允许你定义更加复杂和灵活的动画效果，通过关键帧实现多步骤的样式变化。

2.1 @keyframes

• 定义动画的关键帧。

• 语法：

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

  • 可以使用 0% 或 from 表示动画的起点。
  • 可以使用 100% 或 to 表示动画的终点。
  • 中间状态也可以用百分比（如 50%）定义。

示例：

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

2.2 animation

• 用于设置动画效果的简写属性。

• 语法：

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

  • name：动画名称，与 @keyframes 定义的名称对应。
  • duration：动画持续时间（如 2s）。
  • timing-function：动画速度曲线（如 ease）。
  • delay：动画延迟时间（如 1s）。
  • iteration-count：动画循环次数（如 infinite，表示无限循环）。
  • direction：动画方向（如 normal、alternate）。
  • fill-mode：动画填充模式（如 forwards）。
  • play-state：动画播放状态（如 running、paused）。

示例：

div {
  animation: slide 2s ease-in-out 1s infinite alternate;
}

2.3 属性详解

2.3.1 animation-name

• 指定动画名称，与 @keyframes 定义的名称一致。

示例：

div {
  animation-name: slide;
}

2.3.2 animation-duration

• 设置动画的持续时间。

示例：

div {
  animation-duration: 3s; /* 动画持续 3 秒 */
}

2.3.3 animation-timing-function

• 设置动画的速度曲线，值与 transition-timing-function 相同。

示例：

div {
  animation-timing-function: ease-in-out;
}

2.3.4 animation-delay

• 设置动画开始前的延迟时间。

示例：

div {
  animation-delay: 1s; /* 动画延迟 1 秒启动 */
}

2.3.5 animation-iteration-count

• 设置动画的循环次数。

• 值：

  • 数值（如 1, 2）。
  • infinite：无限循环。

示例：

div {
  animation-iteration-count: infinite; /* 动画无限循环 */
}

2.3.6 animation-direction

• 设置动画播放的方向。

• 值：

  • normal（默认）：每次从头到尾播放。
  • reverse：每次从尾到头播放。
  • alternate：交替播放（正向 -> 反向）。
  • alternate-reverse：交替播放（反向 -> 正向）。

示例：

div {
  animation-direction: alternate; /* 动画交替播放 */
}

2.3.7 animation-fill-mode

• 设置动画在开始前和结束后，元素样式的状态。

• 值：

  • none（默认）：动画开始前或结束后样式不保留。
  • forwards：动画结束后，样式保留在最后一帧状态。
  • backwards：动画在延迟期间，应用第一帧样式。
  • both：同时应用 forwards 和 backwards。

示例：

div {
  animation-fill-mode: forwards; /* 动画结束后保留最后一帧样式 */
}

2.3.8 animation-play-state

• 控制动画的播放状态。

• 值：

  • running（默认）：动画播放中。
  • paused：动画暂停。

示例：

div {
  animation-play-state: paused; /* 暂停动画 */
}

动画完整示例：

@keyframes bounce {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-50px);
  }
  100% {
    transform: translateY(0);
  }
}

div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation: bounce 2s ease-in-out infinite;
}

总结

过渡（Transitions）相关属性：

动画（Animations）相关属性：

通过灵活使用 过渡 和 动画 属性，可以实现美观、流畅的动态效果，提升用户体验！