CSS 转换过渡 - CSS

CSS 转换过渡是一个用来实现动画效果的 CSS 属性。它可以让元素在改变时产生平滑过渡，而不是突兀地改变。这个属性通过在不同状态下设置属性值，实现元素属性的平滑转换。

如何使用 CSS 转换过渡

使用 CSS 转换过渡非常简单。我们只需要设置元素的两个状态的 CSS 属性，然后在需要平滑转换的过程中，通过改变类名或者使用 JavaScript 来切换元素的状态即可。

基本语法

transition: property duration timing-function delay;

• property: 需要设置平滑转换的属性名称，多个值使用逗号隔开。
• duration: 平滑转换所需时间，单位为秒或毫秒。
• timing-function: 平滑转换的速度曲线，也称为缓动函数。常用的值有：linear（匀速）、ease-in（慢进）、ease-out（慢出）、ease-in-out（先慢进后慢出）、cubic-bezier（贝塞尔曲线）。
• delay: 延迟执行平滑转换的时间，单位为秒或毫秒。

示例代码

<style>
.box {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: all 1s ease-in-out;
}

.box:hover {
  width: 200px;
  height: 200px;
  background-color: blue;
}
</style>

<div class="box"></div>

上面的示例代码实现了一个鼠标移入时，盒子从红色变成蓝色，并且大小从 100px × 100px 变成 200px × 200px 的效果。我们将 .box 元素的宽、高、背景颜色三个属性都设置了平滑转换，并且时间为 1 秒，速度曲线为缓进缓出。

多属性转换

CSS 转换过渡不仅可以对单个属性设置平滑转换，也可以对多个属性同时设置平滑转换。

transition: width 1s ease-out, height 2s ease-in-out, opacity 0.5s linear;

这个语法规则可以把不同的属性，以逗号分隔在一起进行转换。

总结

CSS 转换过渡可以让页面的 UI 效果更加平滑，给用户带来更好的操作体验。无论是 hover 效果、点击效果、还是菜单展开收起等，都可以通过 CSS 转换过渡来实现。