CSS3 transition 属性：让你的网站更加生动

什么是CSS3 transition属性？

CSS3 transition属性是一种用于改变元素属性渐变效果的CSS属性。它可以为元素的属性添加过渡效果，从而实现更加生动、流畅的动画效果。如果你想让你的网站更加生动，那么CSS3 transition属性一定是你不可或缺的工具之一。

CSS3 transition属性的语法

CSS3 transition属性的语法非常简单，如下所示：

/* 语法 */
transition: property duration timing-function delay;

其中，property表示要实现过渡效果的属性，可以是任何CSS属性；duration表示过渡效果的持续时间，以秒或毫秒为单位；timing-function表示过渡效果的时间曲线，可以是linear、ease、ease-in、ease-out、ease-in-out等值；delay表示过渡效果的延迟时间，以秒或毫秒为单位。

CSS3 transition属性的应用

CSS3 transition属性可以应用于各种元素属性，如background、color、width、height、opacity等。下面我们就来看一些具体的应用案例。

改变背景颜色

假设我们有一个按钮，它的背景颜色是红色的，我们想要在鼠标悬停时，让它的背景颜色渐变为蓝色。

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

.button:hover {
  background-color: blue;
}

在上面的代码中，我们首先为按钮设置了一个红色的背景颜色，然后使用CSS3 transition属性为其添加了一个过渡效果，持续时间为0.5秒，时间曲线为ease-in-out。最后，在:hover伪类中，我们将按钮的背景颜色设置为蓝色。这样，当鼠标悬停在按钮上时，背景颜色就会渐变为蓝色。

改变字体颜色

除了背景颜色，我们还可以使用CSS3 transition属性来改变元素的字体颜色。

.button {
  color: red;
  transition: color 0.5s ease-in-out;
}

.button:hover {
  color: blue;
}

在上面的代码中，我们首先为按钮设置了一个红色的字体颜色，然后使用CSS3 transition属性为其添加了一个过渡效果，持续时间为0.5秒，时间曲线为ease-in-out。最后，在:hover伪类中，我们将按钮的字体颜色设置为蓝色。这样，当鼠标悬停在按钮上时，字体颜色就会渐变为蓝色。

改变元素尺寸

除了颜色，我们还可以使用CSS3 transition属性来改变元素的尺寸。

.box {
  width: 100px;
  height: 100px;
  transition: width 0.5s ease-in-out, height 0.5s ease-in-out;
}

.box:hover {
  width: 200px;
  height: 200px;
}

在上面的代码中，我们首先设置了一个宽度和高度都为100像素的盒子，然后使用CSS3 transition属性为其宽度和高度添加了一个过渡效果，持续时间为0.5秒，时间曲线为ease-in-out。最后，在:hover伪类中，我们将盒子的宽度和高度都设置为200像素。这样，当鼠标悬停在盒子上时，宽度和高度就会渐变为200像素。