4.4 CSS过渡

CSS 过渡是在更改 CSS 属性时控制动画速度的方法。可以让属性变化成为一个持续一段时间的过程，而不是立即生效。这种过程效果可以在用户与网页进行交互时（如鼠标悬停、点击等）提供视觉上的反馈，使交互操作更加顺滑。

4.4.1 CSS过渡简介

CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。实现过渡效果必须指定要添加效果的CSS属性和指定效果的持续时间。因为默认值为 0，如果未规定持续时间部分，则过渡不会有效果。使用过渡的基本步骤如下：

（1）指定过渡属性：通过transition-property属性或简写transition属性在CSS中为目标元素指定应该有过渡效果的属性。

（2）设置过渡时间：设置过渡效果的持续时间，通过transition-duration属性或简写属性中的相应部分来完成。

（3）定义时间函数（可选）：控制过渡的速度曲线，使用transition-timing-function属性或简写属性中的相应部分来定义。

（4）设置延迟（可选）：让过渡效果在触发后延迟一段时间再开始，使用transition-delay属性或简写属性中的相应部分来设置。

（5）触发过渡：当指定的CSS属性值发生变化时（如将鼠标悬停在元素上），过渡效果就会被触发。

4.4.2 CSS 过渡属性

CSS 过渡属性分别有transition-delay、transition-duration、transition-property、transition-timing-function和过渡属性的简写transition。过渡属性具体如下：

（1）transition-property：指定应用过渡的CSS属性名称。可以指定一个或多个属性，用逗号分隔。如果设置为all，表示所有可过渡属性都将应用过渡效果。

（2）transition-duration：定义过渡效果需要花费的时间，以秒（s）或毫秒（ms）为单位。如0.5s表示过渡效果将在0.5秒内完成。

（3）transition-timing-function：指定过渡效果的时间曲线，即过渡的速度如何随时间变化。预定义的值包括linear（匀速）、ease（先快后慢）、ease-in（加速）、ease-out（减速）、ease-in-out（先加速后减速）。也可以使用cubic-bezier()函数来定义自定义的贝塞尔曲线。

（4）transition-delay：指定过渡效果开始前的延迟时间，以秒（s）或毫秒（ms）为单位。这允许你控制过渡效果的开始时间，使其与页面上的其他动画或交互同步。

（5）transition：过渡属性的简写;

过渡属性使用示例如下：

4.4.3 案例：手风琴菜单

本案例使用transition属性简写过渡效果，点击菜单时，将其他已打开菜单关闭，在打开和关闭时增加过渡效果。效果如图4-4-3-1，示例如下：

4.4.4 案例：进度条

本案例使用transition属性简写过渡效果，实现进度条效果。使用JavaScript控制进度条宽度，transition属性在宽度改变时完成过渡效果。效果如图4-4-3-2，示例如下：

创作说明

名称：编程指南-CSS案例开发从学到用完美实践

版本：2024年

网站：http://www.51xueweb.cn

撰写团队：杜宇飞 侯志强 尤飞祥 段玉昆

指导审核：阮晓龙