CSS动画如何实现按钮悬停旋转_transform rotate @keyframes结合hover

按钮悬停时旋转可通过CSS实现：首先定义@keyframes rotateAnimation从0deg到360deg，再通过:hover触发animation: rotateAnimation 0.6s ease-in-out infinite alternate，配合transition确保过渡平滑，最终实现流畅的旋转效果。

要实现按钮在悬停时旋转，可以结合 CSS 的 @keyframes、transform: rotate() 和 :hover 伪类。以下是具体实现方式：

定义旋转动画 @keyframes

使用 @keyframes 创建一个名为 rotateAnimation 的动画，从 0 度旋转到 360 度：

@keyframes rotateAnimation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

绑定 hover 触发动画

当鼠标悬停在按钮上时，通过 :hover 触发动画，并设置动画时长、缓动函数和播放次数：

• animation: rotateAnimation 0.6s ease-in-out 表示播放一次旋转动画
• 添加 infinite 可让动画持续循环
• 使用 alternate 可实现来回旋转效果（可选）

优化体验与过渡

为避免生硬跳变，可同时保留 transition 作为备用动画方案。若不希望无限旋转，可移除 infinite：

.rotate-button:hover {
  animation: rotateAnimation 0.6s ease-in-out;
}

这样就能实现一个自然流畅的悬停旋转按钮。基本上就这些，不复杂但容易忽略细节。