当前位置：首页 > article >正文

让你的网页动起来：深入理解 CSS 动画和过渡

article 2025/3/1 22:05:11

静态的网页可能显得有些单调，而动态效果则能为用户带来更丰富的体验。CSS 动画和过渡为我们提供了强大的工具，无需依赖 JavaScript 即可实现各种炫酷的动态效果。本文将深入探讨 CSS 动画和过渡的概念、用法，以及如何利用它们为你的网页增添活力。

CSS 过渡（Transitions）：平滑的状态变化

CSS 过渡允许你在元素的状态发生变化时，平滑地过渡到新的状态，而不是瞬间切换。例如，当鼠标悬停在一个按钮上时，按钮的颜色平滑地改变，而不是直接跳变。

基本语法：

transition: property duration timing-function delay;

property: 指定要过渡的 CSS 属性，如 background-color、width、height 等。可以使用 all 表示所有属性。
duration: 指定过渡的持续时间，单位为秒（s）或毫秒（ms）。
timing-function: 指定过渡的速度曲线，如 ease、linear、ease-in、ease-out 和 ease-in-out。也可以使用 cubic-bezier() 自定义速度曲线。
delay: 指定过渡的延迟时间，单位为秒（s）或毫秒（ms）。

示例：

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

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

.box:hover {
  background-color: lightgreen;
}

在这个例子中，当鼠标悬停在 .box 上时，背景颜色会平滑地从 lightblue 过渡到 lightgreen，过渡时间为 0.5 秒，速度曲线为 ease。

何时使用过渡？

简单的状态变化，如鼠标悬停、点击、焦点等。
需要平滑过渡的效果，而不是瞬间切换。
不需要复杂的动画序列。

CSS 动画（Animations）：更复杂的动态效果

CSS 动画提供了更强大的功能，允许你创建复杂的动画序列，包括多个关键帧和循环播放。

基本语法：

定义关键帧：

@keyframes animation-name {
    from {
        /* 初始状态 */
    }
    to {
        /* 结束状态 */
    }
    /* 或者使用百分比定义中间状态 */
    0% {
        /* 初始状态 */
    }
    50% {
        /* 中间状态 */
    }
    100% {
        /* 结束状态 */
    }
}

应用动画：

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

name: 指定要应用的动画名称，与 @keyframes 定义的名称对应。
duration: 指定动画的持续时间，单位为秒（s）或毫秒（ms）。
timing-function: 指定动画的速度曲线，与过渡的 timing-function 相同。
delay: 指定动画的延迟时间，单位为秒（s）或毫秒（ms）。
iteration-count: 指定动画的播放次数，可以使用数字或 infinite 表示无限循环。
direction: 指定动画的播放方向，如 normal、reverse、alternate 和 alternate-reverse。
fill-mode: 指定动画在播放之前或之后的状态，如 none、forwards、backwards 和 both。
play-state: 指定动画的播放状态，如 running 和 paused。

示例：

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

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

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

在这个例子中，.box 会在水平方向上左右移动，动画时间为 2 秒，速度曲线为 linear，无限循环播放。

何时使用动画？