使用transform和@keyframes可实现按钮旋转动画：1. transform: rotate配合transition实现悬停平滑旋转；2. @keyframes定义关键帧实现持续旋转或摆动；3. 通过animation属性控制时长、方向、重复等行为；4. 建议用于加载提示，注意旋转中心、性能优化及减少动画偏好适配。
想让按钮在点击或悬停时产生旋转效果，CSS 提供了简单高效的方式：结合 transform: rotate() 与 @keyframes 配合 animation 属性来控制动画过程。这种方式无需 JavaScript，性能好，兼容性强。
1. 使用 transform: rotate 实现基础旋转
transform: rotate() 可以让元素绕其中心点旋转指定角度。比如让按钮默认旋转45度：
.button {
transform: rotate(45deg);
}
这只会静态旋转，若要动态效果，需搭配 transition 实现平滑过渡，例如鼠标悬停时旋转：
.button {
transition: transform 0.3s ease;
}
<p>.button:hover {
transform: rotate(180deg);
}</p>这样按钮在鼠标移入时会顺滑地转半圈，移出时再转回来。
立即学习“前端免费学习笔记（深入）”；
2. 使用 @keyframes 定义复杂旋转动画
如果需要更精细的控制，比如持续旋转、来回摆动或分阶段转动，应使用 @keyframes 定义关键帧动画。
例如实现一个无限循环的旋转加载效果：
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
<p>.loading-button {
animation: spin 1s linear infinite;
}</p>这个动画会让按钮持续匀速旋转，适合用在加载状态中。
3. 控制动画的播放时机与行为
通过 animation 的多个子属性，可以精确控制动画表现：
- animation-duration：动画持续时间，如 2s
- animation-timing-function：速度曲线，如 ease-in-out
- animation-delay：延迟多久开始
- animation-iteration-count：重复次数，infinite 表示无限
- animation-direction：方向，如 alternate 实现来回摆动
- animation-play-state：可控制暂停（paused）或运行（running）
例如让按钮点击时旋转并暂停动画，可通过 JS 切换 class 实现：
@keyframes swing {
0% { transform: rotate(0deg); }
50% { transform: rotate(30deg); }
100% { transform: rotate(0deg); }
}
<p>.animated-button {
animation: swing 0.5s ease forwards;
}</p><p>.animated-button.paused {
animation-play-state: paused;
}</p>4. 实际应用建议
旋转动画适合用于加载提示、图标切换、交互反馈等场景。注意以下几点提升体验：
- 避免过度使用旋转，以免干扰用户注意力
- 配合 transform-origin 调整旋转中心点，如 left top
- 在移动端考虑动画对性能的影响，优先使用 will-change 或 translateZ 优化
- 为辅助功能考虑，可通过 prefers-reduced-motion 减少动画
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
}
}
基本上就这些。利用 transform rotate 和 @keyframes，你可以灵活实现各种按钮旋转效果，关键是理解动画流程和控制方式。不复杂但容易忽略细节。
