在网页开发中，按钮悬停动画能够提升用户交互体验。通过CSS的animation属性结合:hover伪类，我们可以纯样式地让按钮在鼠标移入时产生动态效果，无需任何脚本参与。
基本实现思路
核心逻辑分为两步：先使用@keyframes定义动画过程，再在按钮的:hover状态中通过animation属性调用该动画。浏览器会在鼠标悬停时自动播放一次或循环播放定义好的帧变化。
定义关键帧
关键帧描述动画起始与结束样式，例如让按钮背景位置滑动并轻微放大：
/* 定义悬停动画 */
@keyframes btn-hover-anim {
0% {
background-position: 0% 50%;
transform: scale(1);
}
50% {
background-position: 100% 50%;
transform: scale(1.05);
}
100% {
background-position: 0% 50%;
transform: scale(1);
}
}
在hover中触发动画
将动画绑定到按钮的悬停态，并设置时长与循环方式：
.btn {
padding: 12px 24px;
border: none;
color: #fff;
background: linear-gradient(90deg, #4facfe, #00f2fe);
background-size: 200% 100%;
cursor: pointer;
transition: box-shadow 0.3s;
}
.btn:hover {
animation: btn-hover-anim 1.2s ease-in-out infinite;
box-shadow: 0 8px 16px rgba(0,0,0,0.2);
}
使用transition还是animation
如果只需简单的属性渐变，用transition更简洁；若需要多阶段变化或循环效果，则应选用animation。下表列出二者差异：
| 特性 | transition | animation |
|---|---|---|
| 触发方式 | 属性变化自动过渡 | 需指定动画名称 |
| 关键帧 | 不支持 | 支持@keyframes |
| 循环播放 | 不支持 | 可设置infinite |
完整HTML示例
下面给出一个可直接运行的页面代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>按钮悬停动画</title>
<style>
.btn {
padding: 12px 24px;
border: none;
color: #fff;
background: linear-gradient(90deg, #4facfe, #00f2fe);
background-size: 200% 100%;
cursor: pointer;
}
.btn:hover {
animation: btn-hover-anim 1.2s ease-in-out infinite;
}
@keyframes btn-hover-anim {
0% { background-position: 0% 50%; transform: scale(1); }
50% { background-position: 100% 50%; transform: scale(1.05); }
100% { background-position: 0% 50%; transform: scale(1); }
}
</style>
</head>
<body>
<button class="btn">悬停看动画</button>
</body>
</html>
注意事项
- 动画结束后若希望保留末态，可添加
animation-fill-mode: forwards。 - 避免对性能消耗大的属性如
width做高频动画，优先使用transform与opacity。 - 移动端没有hover状态，可配合:active或媒体查询做兼容。
通过上述方法，你可以灵活地使用CSS animation在hover伪类下实现丰富的按钮悬停动态效果。
CSS_animationhover伪类按钮悬停动画修改时间：2026-07-25 20:24:21