4.1 过渡（transition）：状态平滑变化的桥梁
过渡是实现元素从一种样式状态平滑过渡到另一种样式状态的基础技术。它通过定义过渡属性、过渡时长等参数，使元素属性变化过程可视化，而非瞬间切换。例如，当用户与按钮交互时，背景色的渐变、元素尺寸的缩放等效果，均可通过过渡实现自然流畅的视觉反馈。
案例 4-1：按钮悬停效果
以下代码实现了一个按钮在鼠标悬停时的背景色渐变与缩放效果，关键属性已标注注释：
css
复制代码
.hover-btn {
width: 120px;
height: 40px;
background-color: #4a90e2;
border: none;
border-radius: 4px;
color: white;
font-size: 14px;
/* 定义过渡属性：背景色和变换（缩放） */
transition-property: background-color, transform;
/* 定义过渡时长：0.3秒完成变化 */
transition-duration: 0.3s;
cursor: pointer;
}
.hover-btn:hover {
background-color: #357abd; /* 悬停时背景色变深 */
transform: scale(1.05); /* 悬停时轻微放大1.05倍 */
}在上述代码中，transition-property 指定了需要过渡的 CSS 属性（此处为 background-color 和 transform），transition-duration 则定义了过渡效果持续的时间（0.3秒）。当鼠标悬停在按钮上时，这些属性的变化会在指定时长内平滑完成，避免了状态切换的突兀感。