过渡 transition

CSS 过渡允许属性值在一段时间内平滑变化，无需使用复杂的动画或 JavaScript。

1. 基本语法

transition: property duration timing-function delay;

• property：指定要过渡的 CSS 属性，如 all 表示所有属性
• duration：过渡持续时间，如 0.3s
• timing-function：过渡的速度曲线，如 ease, linear
• delay：延迟开始时间，如 0s

2. 示例

button {
  background-color: #1976d2;
  transition: background-color 0.3s ease;
}

button:hover {
  background-color: #1565c0;
}

当鼠标悬停时，按钮背景颜色平滑过渡。

过渡示例

loading