transition负责按钮背景色等属性的平滑过渡，2. @keyframes定义悬停时的复杂动画如闪光掠过，3. 两者结合实现既有渐变又有动态细节的生动悬停效果。
要实现按钮的悬停效果，结合 @keyframes 和 transition 可以创造出既丰富又平滑的视觉变化。虽然两者都能控制动画，但它们分工不同：transition 适合简单的状态过渡，而 @keyframes 能定义复杂的动画帧序列。将它们合理搭配，可以让按钮在悬停时表现得更生动。
使用 transition 实现基础状态过渡
transition 用于定义属性在两个状态之间如何变化。当用户将鼠标移到按钮上时，CSS 会捕捉属性（如背景色、文字颜色、边框等）的变化，并以平滑方式过渡。
- 指定需要过渡的属性，例如 background-color 或 transform
- 设置过渡时间，比如 0.3s，避免过慢或过快
- 可选添加缓动函数，如 ease-in-out 让动画更自然
用 @keyframes 定义复杂动画细节
如果希望在悬停时触发一段自定义动画（如图标旋转、光效扫过），就需要 @keyframes 来定义关键帧。它不依赖状态切换，而是主动播放一段动画序列。
- 通过 @keyframes 命名一个动画，例如 shine-sweep
- 在 0% 到 100% 之间设定样式变化，比如位移或透明度
- 在 :hover 状态中通过 animation 调用该动画
结合 transition 与 keyframes 实现完整悬停效果
实际应用中，可以同时使用两者：用 transition 控制背景、文字等常规属性的渐变，再用 @keyframes 在悬停瞬间播放一次性的动画（如闪光掠过）。
立即学习“前端免费学习笔记（深入）”；
示例结构：- 正常状态下按钮有默认样式
- 悬停时，background-color 通过 transition 渐变
- 同时触发一次 animation: pulse 0.6s ease forwards
- 动画结束后保持最终帧（forwards）
基本上就这些。合理分配 transition 和 @keyframes 的职责，能让按钮交互既流畅又有亮点，不复杂但容易忽略细节。
