在网页交互开发中，元素的状态变化如果直接切换样式会显得生硬，通过CSS过渡与伪类结合，可以让hover、active、focus状态的样式变化呈现平滑的动画效果，提升用户操作时的视觉体验。
CSS过渡核心属性说明
CSS过渡的核心是transition属性，它是多个过渡子属性的简写形式，常用的子属性如下：
- transition-property：指定需要添加过渡效果的CSS属性，比如
background-color、transform，取值为all时表示所有可过渡属性都生效 - transition-duration：指定过渡动画的持续时间，单位为s（秒）或ms（毫秒），必须设置该属性过渡才会生效
- transition-timing-function：指定过渡的速度曲线，常用值有
ease（默认，慢快慢）、linear（匀速）、ease-in（慢开始）等 - transition-delay：指定过渡动画开始前的延迟时间，默认值为0
简写格式为：transition: property duration timing-function delay;，其中duration是必须项，其他属性可以省略使用默认值。
常用交互伪类的触发场景
与过渡结合最紧密的三个伪类分别对应不同的交互场景：
hover伪类
当鼠标指针悬停在元素上方时触发，适用于按钮、卡片、导航项等可交互元素的悬停反馈。
active伪类
当元素被激活时触发，通常是鼠标按下还未松开的状态，用于模拟元素被点击按下的视觉效果。
focus伪类
当元素获得焦点时触发，常见于输入框、可聚焦的按钮等表单元素，用于提示用户当前操作的元素。
三者结合的实现示例
以下是一个按钮元素的完整示例，同时实现了三种状态的过渡动画：
/* 按钮基础样式 */
.btn {
padding: 12px 24px;
background-color: #409eff;
color: #fff;
border: none;
border-radius: 4px;
font-size: 14px;
cursor: pointer;
/* 配置过渡效果：所有可过渡属性，持续0.3秒，速度曲线为ease */
transition: all 0.3s ease;
}
/* hover状态：鼠标悬停时背景变深，轻微放大 */
.btn:hover {
background-color: #337ecc;
transform: scale(1.05);
}
/* active状态：鼠标按下时背景更深，缩小一点 */
.btn:active {
background-color: #2b6cb0;
transform: scale(0.98);
}
/* focus状态：获得焦点时添加外边框阴影 */
.btn:focus {
outline: none;
box-shadow: 0 0 0 3px rgba(64, 158, 255, 0.3);
}
对应的HTML结构如下：
<button class="btn">点击按钮</button>
实际开发注意事项
- 过渡属性不要设置在伪类的样式块中，否则状态恢复时可能没有过渡效果，应该设置在元素的基础样式中
- 不是所有CSS属性都支持过渡，比如
display属性就无法添加过渡效果，需要切换显隐时可以用opacity配合visibility实现 - focus伪类需要元素本身支持聚焦，普通
div元素默认无法触发focus，需要添加tabindex属性才可以 - 过渡时间不宜过长，通常0.2s到0.4s之间比较合适，过长的动画会让用户觉得页面响应迟缓
常见问题解答
问：为什么active状态的过渡效果不明显？
答：active状态持续时间很短，建议把active状态的过渡时间设置得比hover更短，比如0.1s，避免动画还没执行完状态就结束了。
问：如何让输入框focus时边框颜色过渡变化？
答：只需要给输入框的border-color属性添加过渡即可，示例代码如下：
.input {
border: 1px solid #dcdfe6;
padding: 8px 12px;
border-radius: 4px;
transition: border-color 0.3s ease;
}
.input:focus {
outline: none;
border-color: #409eff;
}
CSS过渡伪类hover状态动画active状态动画focus状态动画修改时间：2026-06-26 13:30:29