HTML CSS3里面transition怎么用

在 HTML 和 CSS3 中，transition 是用来实现动态效果的一种属性。以下是 transition 的使用方法：

1. 定义一个元素的初始状态，例如：颜色、位置、大小等。

2. 定义一个元素的结束状态，例如：颜色、位置、大小等。

3. 使用 transition 属性，设置过渡时间和过渡效果，例如：ease-in、ease-out、linear 等。

以下是 transition 的基本语法：

transition: property duration timing-function delay;

其中：

- property：表示需要过渡的 CSS 属性，例如：background-color、width、height 等。
- duration：表示过渡的时间，例如：0.5s、1s 等。
- timing-function：表示过渡效果，例如：ease-in、ease-out、linear 等。
- delay：表示过渡延迟的时间，例如：0.5s、1s 等。

例如，我们可以使用以下代码实现当鼠标悬浮在按钮上时，按钮的背景颜色从白色变成淡蓝色，并且过渡时间为 0.5 秒：

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

button:hover {
  background-color: lightblue;
}

在上面的代码中，我们首先定义了按钮的初始状态为白色背景，然后使用 transition 属性设置了 background-color 属性的过渡时间为 0.5 秒，过渡效果为 ease-in-out。当鼠标悬浮在按钮上时，我们改变了按钮的背景颜色为淡蓝色，由于我们已经设置了过渡效果，因此按钮的背景颜色会从白色平滑地过渡到淡蓝色。