过渡速记 - CSS

在 CSS 中，过渡（transition）指定义在两个不同状态之间的样式变化效果。它是使网页动态化的重要手段之一，也能使页面看起来更加生动和现代化。

基本语法

CSS 过渡的基本语法如下：

transition: property duration timing-function delay;

其中，

• property：需要应用过渡效果的 CSS 属性，如 background-color、color 等。
• duration：过渡的持续时间，可以使用 s 或 ms 作为单位。
• timing-function：过渡的时间函数，即过渡效果的速度变化曲线。
• delay（可选）：过渡开始的延迟时间，同样可以使用 s 或 ms 作为单位。

例如下面这段代码会给 div 元素的背景色配置一个渐变为红色的过渡效果，持续时间为 2 秒钟：

div {
  transition: background-color 2s;
}

div:hover {
  background-color: red;
}

时间函数

timing-function 属性决定了过渡效果的速度变化曲线。通常情况下，过渡效果需要随着时间推移而逐渐加速或减速，以使得效果更加自然。常用的时间函数如下：

• linear：线性速度变化，即等速运动。
• ease-in：由慢到快的加速运动。
• ease-out：由快到慢的减速运动。
• ease-in-out：先加速后减速的运动。

你可以尝试一下不同的过渡时间函数，看看效果有何不同。例如：

div {
  transition: background-color 2s ease-in-out;
}

div:hover {
  background-color: red;
}

多个属性的过渡

你可以同时给一个元素的多个属性配置过渡效果，即在 property 属性值中使用逗号分隔不同的属性名称。例如：

div {
  transition: background-color 2s, color 2s;
}

div:hover {
  background-color: red;
  color: white;
}

兼容性

CSS 过渡效果在大多数现代浏览器中都已经得到了支持。如果你需要为一些较老的浏览器提供支持，可以使用 JavaScript 实现过渡效果。但是，考虑到 JavaScript 实现过渡效果需要耗费更多的时间和精力，建议在必要的情况下仅使用 JavaScript 过渡。