CSS3 transition 属性

CSS3 transition 属性是实现在 HTML 元素状态改变时可以平滑过渡的一种方法。通过使用 CSS3 transition 属性，可以实现动态变化的效果，使网页变得更加生动、有趣。

transition 属性的基本语法

transition: property duration timing-function delay;

• property：需要过渡的 CSS 属性名称
• duration：过渡效果的持续时间
• timing-function：过渡效果的时间函数（可选）
• delay：过渡效果延迟多久开始（可选）

transition 属性的常用值

过渡的属性

transition 属性需要指定过渡的 CSS 属性名称，不同的 CSS 属性可以产生不同的效果。比如：

• background-color：背景色改变
• color：字体颜色改变
• opacity：透明度改变
• border：边框改变
• transform：变形效果

可以同时指定多个要过渡的属性，通过逗号进行分隔。

过渡的持续时间

过渡的持续时间指的是从状态改变开始到过渡效果结束的时间长度。常用的单位有秒（s）和毫秒（ms）。

时间函数

时间函数可以改变过渡效果的速度，常用的有以下几种：

• linear：等速过渡，无缓动效果
• ease：默认值，慢进快出的缓动效果
• ease-in：慢进缓动效果
• ease-out：快出缓动效果
• ease-in-out：慢进快出的缓动效果

也可使用 cubic-bezier() 函数创建自定义的时间函数。

延迟时间

延迟时间指的是指定过渡要延迟多长时间才开始执行。常用的单位有秒（s）和毫秒（ms）。

transition 属性使用示例

以下是一个使用 transition 属性的示例：

button {
  background-color: red;
  color: white;
  transition: background-color 0.5s, color 0.5s;
}

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

上述代码中，当鼠标悬浮在 button 元素上时，将会出现从红色背景和白色字体颜色缓慢过渡到蓝色背景和黑色字体颜色的效果。

注意事项

• transition 属性只能用于通过 CSS 触发的状态改变，如果是通过 JavaScript 改变状态，需要通过 JavaScript 来实现过渡效果。
• 过渡效果会对性能产生影响，如果不需要过渡效果，建议不要使用。
• 不同的浏览器对 transition 属性的支持情况可能存在差异，需要做好兼容性测试。