CSS animation通过@keyframes实现多阶段动画，如脉冲和波纹效果，相比transition更灵活，支持复杂序列、循环及精细控制，提升交互体验。
CSS
animation
为按钮悬停效果提供了比
transition
更强大、更灵活的控制，它允许我们定义多阶段的动画序列和更精细的计时，从而创造出更生动、复杂的交互体验。
解决方案
要实现一个基础的按钮悬停动画，我们首先需要一个按钮元素，然后通过CSS的
@keyframes
规则定义动画的关键帧，最后在按钮的
:hover
状态下应用这个动画。
.animated-button { padding: 12px 24px; font-size: 18px; color: white; background-color: #007bff; border: none; border-radius: 8px; cursor: pointer; outline: none; position: relative; /* 为后续可能的伪元素动画做准备 */ overflow: hidden; /* 确保内容不溢出 */ transition: background-color 0.3s ease; /* 基础的背景色过渡 */}/* 定义一个简单的“脉冲”动画 */@keyframes pulse { 0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(0, 123, 255, 0.7); } 70% { transform: scale(1.05); box-shadow: 0 0 0 10px rgba(0, 123, 255, 0); } 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(0, 123, 255, 0); }}.animated-button:hover { background-color: #0056b3; /* 悬停时背景色变化 */ animation: pulse 0.8s forwards; /* 应用脉冲动画 */}
在这个例子中，我们定义了一个名为
pulse
的
@keyframes
动画，它让按钮在悬停时先稍微放大一点，同时向外扩散一个阴影，然后恢复原状。
animation: pulse 0.8s forwards;
这行代码将
pulse
动画应用到悬停状态，持续0.8秒，
forwards
确保动画结束后保持最后一帧的样式。
为什么不直接用
transition
？
animation
的优势体现在哪里？
说实话，很多人在实现简单的悬停效果时，第一反应可能就是用
transition
。它确实很方便，比如改变颜色、缩放大小这些，一行
transition
属性就能搞定。但如果我们的需求再复杂一点，比如要实现一个连续的、多阶段的动画效果，或者动画不是简单地从A到B，而是要经过C、D，甚至要循环播放，那
transition
就显得力不从心了。
立即学习“前端免费学习笔记（深入）”；
animation
的优势，我个人觉得主要体现在以下几个方面：
多阶段控制：
animation
可以通过
@keyframes
定义动画在0%到100%之间的任意多个关键帧，每个关键帧都可以设置不同的CSS属性值。这意味着你可以让一个元素在动画过程中经历多个状态，而
transition
只能处理两个状态之间的平滑过渡。非线性路径和循环：
animation
可以轻松实现复杂的动画路径，比如让按钮在悬停时先抖动几下再放大，或者循环播放某个效果。
animation-iteration-count
可以控制播放次数，
infinite
则可以无限循环。更丰富的动画属性：
animation-delay
（延迟播放）、
animation-direction
（正向/反向播放）、
animation-fill-mode
（动画开始前/结束后元素的样式）、
animation-play-state
（暂停/播放）等属性提供了对动画生命周期更全面的控制。不依赖初始状态：
transition
需要一个明确的初始状态和结束状态，而
animation
可以通过
@keyframes
直接定义整个动画过程，即使元素没有明确的初始CSS属性值，动画也能按照
@keyframes
的定义执行。
我有时候会想，
transition
就像是开车从A点直接开到B点，而
animation
则更像是一次精心规划的旅行，沿途可以停靠多个景点，甚至可以决定回程路线，或者干脆一直旅行下去。
Seede AI
AI 驱动的设计工具
586 查看详情
制作一个更具交互感的“波纹扩散”按钮悬停动画，具体怎么实现？
“波纹扩散”效果，也就是我们常说的“水波纹”或“涟漪”效果，是很多现代UI设计中非常受欢迎的交互方式。它给用户的反馈感非常强，感觉按钮真的被“按下”了。实现这种效果，我们通常会借助伪元素(
::before
或
::after
)和
animation
。
核心思路是：在按钮悬停时，让一个隐藏的圆形伪元素从按钮中心开始，快速放大并逐渐透明。
.ripple-button { padding: 15px 30px; font-size: 18px; color: white; background-color: #6c757d; border: none; border-radius: 50px; /* 圆角按钮更适合波纹效果 */ cursor: pointer; outline: none; position: relative; overflow: hidden; /* 关键：隐藏溢出伪元素 */ z-index: 1; /* 确保按钮内容在波纹之上 */ transition: background-color 0.3s ease;}.ripple-button:hover { background-color: #5a6268;}/* 伪元素作为波纹 */.ripple-button::before { content: ''; position: absolute; top: 50%; left: 50%; width: 0; height: 0; background: rgba(255, 255, 255, 0.4); /* 波纹颜色 */ border-radius: 50%; transform: translate(-50%, -50%); /* 确保中心对齐 */ opacity: 0; z-index: 0; /* 确保波纹在按钮内容之下 */}/* 定义波纹扩散动画 */@keyframes ripple-spread { 0% { width: 0; height: 0; opacity: 0.8; } 100% { width: 200%; /* 足够大，覆盖整个按钮 */ height: 200%; opacity: 0; }}.ripple-button:hover::before { animation: ripple-spread 0.6s ease-out forwards;}
这里，我们给按钮设置了
position: relative
和
overflow: hidden
，这是为了让伪元素能在按钮内部自由活动，并且超出按钮边界的部分会被隐藏。
::before
伪元素一开始是隐藏的（
width: 0; height: 0; opacity: 0;
）。当按钮被悬停时，
ripple-spread
动画会触发，让伪元素从中心点迅速放大，同时透明度从高到低变化，形成一个逼真的波纹效果。
z-index
的使用是为了确保波纹在按钮文字的下方，这样文字就不会被波纹遮挡。
动画性能优化与兼容性：有哪些需要注意的细节？
在追求酷炫动画的同时，我们也不能忽视性能和兼容性，毕竟用户体验才是王道。
优先使用
transform
和
opacity
： 这是我做动画时一个非常重要的原则。
transform
（包括
scale
、
translate
、
rotate
等）和
opacity
属性的动画通常能直接在GPU上完成，因为它们不会引起页面的重排（reflow）或重绘（repaint），只涉及到图层合成（compositing）。这意味着动画会非常流畅，尤其是在移动设备上。尽量避免直接动画
width
、
height
、
margin
、
padding
、
top
、
left
等属性，这些属性的改变会触发浏览器重新计算布局，非常耗费性能。
will-change
属性： 如果你知道某个元素即将发生动画，可以提前使用
will-change
属性告诉浏览器。比如
will-change: transform, opacity;
。这能让浏览器提前进行一些优化，为动画做好准备。但要注意，不要滥用
will-change
，因为它也可能消耗更多内存，只在确实需要优化的关键动画元素上使用。动画的持续时间与缓动函数： 动画持续时间不宜过长，否则会显得拖沓。通常0.3s到0.8s是一个比较舒适的范围。选择合适的
animation-timing-function
（缓动函数）也很重要，比如
ease-out
、
cubic-bezier
等，能让动画看起来更自然、更有弹性。兼容性前缀： 虽然现代浏览器对
animation
和
@keyframes
的支持已经很好了，但为了兼容一些老旧的浏览器版本，你可能还需要添加供应商前缀，比如
-webkit-animation
、
-moz-keyframes
等。不过，现在很多构建工具（如Autoprefixer）都能自动处理这些，所以手动添加的情况越来越少。
prefers-reduced-motion
媒体查询： 这是一个非常重要的可访问性考量。有些用户可能对动画敏感，或者有前庭障碍，过多的动画可能导致不适。通过
@media (prefers-reduced-motion: reduce)
，我们可以为这些用户提供一个简化版的体验，比如禁用动画或使用更简单的过渡效果。这是对用户体验的尊重，也是一个负责任的开发者应该考虑的。
/* 示例：使用prefers-reduced-motion */@media (prefers-reduced-motion: reduce) { .animated-button:hover { /* 在用户偏好减少动画时，只改变背景色，移除复杂动画 */ animation: none; transition: background-color 0.3s ease; } .ripple-button:hover::before { animation: none; }}
记住，动画的目的是为了增强用户体验，而不是炫技。在设计和实现动画时，始终把用户的感受放在第一位。
以上就是如何用css animation实现按钮悬停动画的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1063957.html
微信扫一扫 
支付宝扫一扫 
