CSS3 过渡动画 Transition 全方位解析：从基础到实战

CSS3 的过渡动画 Transition 是一个强大的工具，它允许您在元素之间创建平滑的动画过渡。它易于使用且兼容所有现代浏览器，使其成为为您的网站或应用程序添加视觉吸引力和用户体验的理想方式。

本文将深入探讨 CSS3 Transition，从其基本概念到高级用法。我们将涵盖：

CSS3 Transition 允许您在指定时间内从一个 CSS 属性值平滑过渡到另一个值。它使用 transition 属性，该属性接受一系列值来定义过渡行为。

基本语法如下：

transition: property duration timing-function delay;

• property 指定要应用过渡的 CSS 属性，例如 color、opacity 或 transform。
• duration 定义过渡的时间长度，单位为秒或毫秒。
• timing-function 控制过渡的速度，从线性到非线性。
• delay 指定过渡延迟时间，单位为秒或毫秒。

让我们创建一个简单的示例来演示 Transition 的基本用法：

<button id="my-button">点击我</button>

<script>
  const button = document.getElementById('my-button');

  button.addEventListener('click', () => {
    button.style.transition = 'background-color 1s ease';
    button.style.backgroundColor = 'red';
  });
</script>

当用户单击按钮时，它将从其默认背景色平滑过渡到红色，过渡时间为 1 秒，使用 ease 缓动函数。

Transition 提供了多种高级选项，使您可以创建复杂而引人注目的动画效果。

多重过渡： 您可以为多个 CSS 属性设置过渡，用逗号分隔它们：

transition: color 1s ease, opacity 0.5s ease-in;

过渡链： 您可以在元素上设置多个过渡，创建一个过渡链：

transition: color 1s ease 0.5s, opacity 0.5s ease;

第一组值（color 1s ease 0.5s）将延迟 0.5 秒后再应用颜色过渡。

暂停和恢复过渡： 您可以使用 transition-delay 属性暂停过渡，然后使用 transition-resume 恢复它：

button:hover {
  transition-delay: 1s;
  transition-resume: 0s;
}

当用户将鼠标悬停在按钮上时，过渡将暂停 1 秒，然后在鼠标离开时立即恢复。

Transition 可以在许多实际场景中使用，例如：

• 菜单项的淡入淡出
• 导航栏的平滑滑动
• 模态窗口的弹出动画
• 图片库中的轮播

CSS3 Transition 是一个强大的工具，可以为您的网站和应用程序添加视觉吸引力和用户体验。它易于使用且具有高度可定制性，使其成为创建平滑和引人注目的动画效果的理想选择。

通过充分利用本文中概述的基本和高级用法，您可以为您的项目创建专业且令人印象深刻的动画效果。