CSS3过渡效果怎样添加

在CSS3中，要为元素添加过渡效果，您需要使用transition属性。transition属性允许您指定一个或多个过渡效果，并定义它们的持续时间、延迟和计时函数。以下是如何使用transition属性的示例：

/* 为一个元素的背景颜色添加过渡效果 */
.element {
  background-color: blue;
  transition: background-color 0.5s ease-in-out;
}

/* 当鼠标悬停在元素上时，改变背景颜色 */
.element:hover {
  background-color: red;
}

在这个例子中，我们为一个名为.element的元素的背景颜色添加了一个过渡效果。transition属性的值包括：

1. background-color：要过渡的CSS属性。
2. 0.5s：过渡效果的持续时间，这里设置为0.5秒。
3. ease-in-out：过渡效果的计时函数，这里设置为缓入缓出。

您还可以为多个CSS属性添加过渡效果，只需用逗号分隔它们：

.element {
  background-color: blue;
  opacity: 0.5;
  transition: background-color 0.5s ease-in-out, opacity 1s linear;
}

.element:hover {
  background-color: red;
  opacity: 1;
}

在这个例子中，我们为.element元素的背景颜色和透明度添加了过渡效果。背景颜色的过渡持续时间为0.5秒，计时函数为缓入缓出；透明度的过渡持续时间为1秒，计时函数为线性。