人生如诗，淼润灵秀

Appearance

transition 和 animation 是 CSS 中常用的两种用于元素过渡和动画效果的属性。它们虽然都可以实现元素的动态变化，但在使用场景和功能上存在差异。

一、区别 ​

1. 触发方式 ​

  • transition:

    • 需要事件触发，如 hover、focus、active 等状态变化。
    • 只能在两个状态之间平滑过渡，即从一个状态变为另一个状态时产生效果。

    示例:

    css
    .button {
  background-color: blue;
  transition: background-color 0.3s;
}

.button:hover {
  background-color: red;
}

    在鼠标悬停时触发 hover，使背景颜色在 0.3 秒内从蓝色过渡到红色。

  • animation:

    • 无需事件触发，可以自动循环播放或根据自定义的触发条件执行。
    • 可以定义复杂的关键帧（keyframes）动画，允许在动画过程中设置多个状态，并控制每个状态的变化。

    示例:

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

.box {
  animation: fadeInOut 2s infinite;
}

    该 animation 在 2 秒内通过关键帧使元素透明度从 0 到 1 再回到 0，并循环播放。

2. 复杂性 ​

  • transition: 适合简单的状态变化，只支持两个状态之间的过渡。
  • animation: 可以定义多个状态（通过 keyframes），适合复杂的动画效果，如元素的移动、旋转、颜色变化等。

3. 控制力度 ​

  • transition: 控制较为简单，只能设置属性的开始状态和结束状态，并定义过渡的时间、方式和延迟。
  • animation: 提供更强的控制能力，包括控制动画的循环、播放方向、动画的播放次数、暂停与继续等。

二、基本属性 ​

1. transition 基本属性 ​

  • transition-property: 指定要应用过渡效果的 CSS 属性（如 width、opacity 等）。可以设置 all 来应用到所有可过渡的属性。

    • 示例: transition-property: opacity;

  • transition-duration: 定义过渡效果的持续时间（如 0.5s 表示 0.5 秒）。

    • 示例: transition-duration: 0.3s;

  • transition-timing-function: 设置过渡的速度曲线（如 ease、linear、ease-in、ease-out、cubic-bezier()）。

    • 示例: transition-timing-function: ease-in-out;

  • transition-delay: 定义过渡效果的开始时间延迟。

    • 示例: transition-delay: 0.2s;

  • 综合示例:

    css
    .box {
  transition: width 1s ease-in-out 0.5s;
}

2. animation 基本属性 ​

  • animation-name: 指定要应用的关键帧动画名称，对应 @keyframes 中定义的名称。

    • 示例: animation-name: fadeInOut;

  • animation-duration: 定义动画的持续时间。

    • 示例: animation-duration: 2s;

  • animation-timing-function: 设置动画的速度曲线（如 linear、ease、ease-in 等）。

    • 示例: animation-timing-function: ease-in-out;

  • animation-delay: 定义动画开始前的延迟时间。

    • 示例: animation-delay: 1s;

  • animation-iteration-count: 设置动画播放的次数，可以是一个具体数字，也可以是 infinite 表示无限循环。

    • 示例: animation-iteration-count: infinite;

  • animation-direction: 定义动画的播放方向（如 normal、reverse、alternate 等）。

    • 示例: animation-direction: alternate;

  • animation-fill-mode: 指定动画结束时元素状态的表现（如 none、forwards、backwards、both）。

    • 示例: animation-fill-mode: forwards;

  • animation-play-state: 控制动画的播放状态，可以设置为 running（播放）或 paused（暂停）。

    • 示例: animation-play-state: paused;

  • 综合示例:

    css
    @keyframes slideIn {
  0% { transform: translateX(-100px); }
  100% { transform: translateX(0); }
}

.box {
  animation: slideIn 1s ease-in 0.5s infinite alternate;
}

总结 ​

  • transition 适用于简单的两状态过渡，需要触发事件才能生效。
  • animation 适合复杂的多状态动画，自动执行且提供更多的控制选项。

京ICP备2024072559号