如何使用 CSS 中的过渡（transition）属性来定义元素在网页中的过渡效果

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

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

CSS的transition属性可以用来定义元素的过渡效果，使得当元素的CSS属性改变时，这个改变可以用一个平滑的动画效果进行。

基本语法如下：




transition: property duration timing-function delay;

property：定义过渡效果的CSS属性名，比如width、background-color、opacity等。如果想要所有属性都有过渡效果，可以使用all关键字。
duration：定义过渡效果的持续时间，单位通常是秒(s)或毫秒(ms)。
timing-function：定义过渡的时序函数，比如linear、ease、ease-in、ease-out、ease-in-out、cubic-bezier。
delay：定义过渡效果开始前的延迟时间。

例子：




div {
  transition: background-color 1s ease-in-out 0.5s;
}
 
div:hover {
  background-color: yellow;
}

在这个例子中，当鼠标悬停在div上时，背景色会在0.5秒后以ease-in-out时序函数在1秒内渐变到黄色。