css3过渡属性属性名：transition

作者：System 时间：2024年08月13日分类：所有,css3 字数：495

这篇文章距离上次修改已过440天，其中的内容可能已经有所变动。

CSS3的transition属性用于设置元素的过渡效果，它可以使得在改变元素的CSS属性时产生平滑的过渡效果，而不是立即变化。

transition属性通常由四个部分组成：

举例来说，如果你想要当鼠标悬停在一个元素上时，改变元素的颜色，并且使用300毫秒完成过渡，可以这样写：




div {
  background-color: blue;
  transition: background-color 300ms ease-in-out;
}
 
div:hover {
  background-color: red;
}

在这个例子中，当鼠标悬停在div上时，背景色从蓝色平滑地过渡到红色，过渡的时间是300毫秒，速度曲线是ease-in-out。