# 过渡 transition

URL: https://caijiao.org/css/09-animation/01-transition
Source: docs/css/09-animation/01-transition.md
Description: CSS 过渡（transition）用于平滑地在状态变化时改变元素的属性，实现动画效果，提升用户体验。

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

## 1. 基本语法

```css
transition: property duration timing-function delay;
```

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

## 2. 示例

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

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

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

## 过渡示例

[在线代码演示](/css/demos/23.html)