在网页开发中，按钮是最基础也最常用的交互元素。想让按钮在鼠标悬停时产生颜色变化、放大或阴影出现等效果，最简洁的方案就是使用CSS的transition属性。它能在两种样式状态之间自动生成平滑的过渡动画，不需要任何脚本参与。
transition属性基本用法
transition本质是一个简写属性，用来描述当元素的某个属性值发生改变时，用多长时间、以什么节奏完成变化。它的常见写法如下：
- transition-property：指定要过渡的CSS属性名，如background-color、transform
- transition-duration：过渡持续时间，如0.3s
- transition-timing-function：速度曲线，如ease、linear
- transition-delay：延迟开始时间，通常设为0s
简写形式可以直接写成 transition: background-color 0.3s ease; 这样，表示背景色在零点三秒内匀速缓动变化。
实现一个基础悬停动画按钮
下面给出一个完整的HTML与CSS示例，鼠标移入按钮时会平滑变色并轻微上移：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
.btn {
padding: 12px 24px;
background-color: #3498db; /* 初始蓝色 */
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
/* 定义过渡：背景色和变换各0.3秒 */
transition: background-color 0.3s ease, transform 0.3s ease;
}
.btn:hover {
background-color: #2ecc71; /* 悬停变绿 */
transform: translateY(-3px); /* 向上移动3像素 */
}
</style>
</head>
<body>
<button class="btn">悬停试试</button>
</body>
</html>
代码说明
上面的代码里，.btn设置了transition监听background-color与transform。当:hover触发时，目标样式立刻生效，但浏览器会根据transition的配置自动补全中间动画，因此用户看到的是流畅滑动而非瞬变。
常用过渡属性组合
除了背景和位移，还可以对阴影、透明度做过渡。参考下表：
| 需求 | CSS属性 | 示例值 |
|---|---|---|
| 阴影渐显 | box-shadow | 0 4px 12px rgba(0,0,0,0.2) |
| 淡入透明 | opacity | 0.8 |
| 边框变色 | border-color | #e74c3c |
注意事项
并不是所有CSS属性都能过渡，例如display就无法产生动画。若需要显示隐藏动画，可改用opacity配合visibility。另外，过渡时间不宜过长，0.2s到0.4s最自然；使用transform做位移比修改top或margin性能更好，因为它只触发合成层而不引发重排。
掌握transition之后，你可以用极少的代码让页面交互变得生动。建议从按钮开始练习，再逐步应用到导航菜单、卡片等组件上。
CSStransition按钮悬停动画修改时间：2026-07-29 14:15:26