CSS animation通过@keyframes实现多阶段动画，如脉冲和波纹效果，相比transition更灵活，支持复杂序列、循环及精细控制，提升交互体验。
CSS
animation为按钮悬停效果提供了比
transition更强大、更灵活的控制，它允许我们定义多阶段的动画序列和更精细的计时，从而创造出更生动、复杂的交互体验。
解决方案
要实现一个基础的按钮悬停动画，我们首先需要一个按钮元素，然后通过CSS的
@keyframes规则定义动画的关键帧，最后在按钮的
:hover状态下应用这个动画。
<button class="animated-button">点击我</button>
.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则更像是一次精心规划的旅行，沿途可以停靠多个景点，甚至可以决定回程路线，或者干脆一直旅行下去。
制作一个更具交互感的“波纹扩散”按钮悬停动画，具体怎么实现？
“波纹扩散”效果，也就是我们常说的“水波纹”或“涟漪”效果，是很多现代UI设计中非常受欢迎的交互方式。它给用户的反馈感非常强，感觉按钮真的被“按下”了。实现这种效果，我们通常会借助伪元素(
::before或
::after)和
animation。
核心思路是：在按钮悬停时，让一个隐藏的圆形伪元素从按钮中心开始，快速放大并逐渐透明。
<button class="ripple-button">点击触发</button>
.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;
}
}记住，动画的目的是为了增强用户体验，而不是炫技。在设计和实现动画时，始终把用户的感受放在第一位。
