transition如何使用

transition属性可以用来实现简单的画效果。它可以在元素的状态变时，为元素的属性添加过渡效果。下面是的使用方法[^1]：

1. 在CSS中，使用transition属性来定义过渡效果。语法如下：

transition: property duration timing-function delay;

- property：指定要过渡的CSS属性，可以是单个属性或多个属性，多个属性之间用逗号分隔。
- duration：指定过渡的持续时间，以秒或毫秒为单位。
- timing-function：指定过渡的时间曲线，可以是线性的、缓入缓出的、加速的等等。
- delay：指定过渡开始之前的延迟时间，以秒或毫秒为单位。

2. 例如，我们可以为一个按钮添加鼠标悬停时的过渡效果，使其背景颜色在0.5秒内从白色变为蓝色：

button {
  background-color: white;
  transition: background-color 0.5s;
}

button:hover {
  background-color: blue;
}

3. 还可以同时过渡多个属性，例如同时过渡宽度和高度的变化：

div {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: width 1s, height 1s;
}

div:hover {
  width: 200px;
  height: 200px;
}

4. 可以使用关键字`all`来指定所有属性都要过渡：

div {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: all 1s;
}

div:hover {
  width: 200px;
  height: 200px;
  background-color: blue;
}