使用CSS的@keyframes定义动画关键帧，通过:hover伪类触发，可实现按钮悬停动态效果。例如创建名为hoverPulse的动画，使按钮在悬停时背景色渐变并轻微放大：@keyframes hoverPulse { 0% { background-color: #007bff; transform: scale(1); } 50% { background-color: #0056b3; transform: scale(1.05); } 100% { background-color: #007bff; transform: scale(1); }} 将其应用于按钮的:hover状态，并设置动画时长与缓动函数：.button:hover { animation: hoverPulse 0.6s ease-in-out; } 同时保留基础过渡效果如transition: background-color 0.3s，确保交互流畅。为提升性能可添加will-change: transform，控制动画时长在0.3~0.8秒之间，避免过于突兀，增强用户反馈感。
想让按钮在鼠标悬停时动起来？用CSS的animation配合:hover伪类就能轻松实现。关键在于定义好动画帧和触发时机，不需要JavaScript也能做出流畅的动态效果。
定义CSS动画关键帧
使用@keyframes创建动画流程，控制属性随时间变化。比如做一个颜色渐变加缩放的效果：
0% {
background-color: #007bff;
transform: scale(1);
}
50% {
background-color: #0056b3;
transform: scale(1.05);
}
100% {
background-color: #007bff;
transform: scale(1);
}
}
在:hover中调用动画
把定义好的动画绑定到按钮的:hover状态。注意设置持续时间和播放方式：
padding: 12px 24px;
background-color: #007bff;
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
transition: background-color 0.3s;
}
.button:hover {
animation: hoverPulse 0.6s ease-in-out;
}
这样鼠标移上按钮就会播放一次脉冲动画。如果希望持续响应，可加上animation-fill-mode: forwards或调整iteration-count。
立即学习“前端免费学习笔记（深入）”；
优化体验的小技巧
动画太突兀会影响使用感，加点细节更自然：
- 用
ease-in-out缓动函数让开始和结束更平滑 - 动画时长控制在0.3~0.8秒之间，太长会让人等待
- 搭配
transition做基础状态切换，animation只负责复杂动效 - 考虑添加
will-change: transform提升性能
基本上就这些。只要写好关键帧，再通过:hover触发，就能做出吸引人的按钮动画。不复杂但容易忽略的是节奏和反馈感，多试几次找到最合适的效果。
