通过 css `transition` 或 `@keyframes` 动画，可轻松实现按钮悬停时平滑过渡到 `margin-left: 50%` 的效果，无需 javascript 或 react 状态控制，简洁高效且性能更优。
在 React 应用中为按钮添加悬停动画，推荐优先使用纯 CSS 方案——它语义清晰、性能优异、易于维护，且完全兼容 React 的声明式渲染逻辑。直接操作内联样式或动态注入 animation 属性（如通过 setStyles 设置 keyframe 名称）不仅冗余，还易因样式优先级、时机或重渲染问题导致动画失效。
✅ 最佳实践：使用 transition（推荐）
只需为按钮定义初始 margin-left 和悬停目标值，并启用过渡效果：
.button {
margin-left: 0;
transition: margin-left 0.5s ease-in-out;
}
.button:hover {
margin-left: 50%;
}
该方案自动处理正向与反向过渡（即进入和离开 hover 状态均带动画），代码简洁，浏览器原生支持，无 JS 干预。
⚠️ 注意：margin-left: 50% 是相对于父容器宽度计算的，确保父元素具有明确的宽度（如 width: 100% 或块级上下文），否则行为可能不符合预期。若需精确居中（而非左边缘对齐中心），建议改用 transform: translateX(50%) 配合 left: 50%，或直接使用 Flexbox 布局。
❌ 不推荐：在 React 中动态设置 animation 名称
你尝试的 setStyles({ animation: currentOption }) 方式存在多个隐患：
- animation 是复合属性，仅设名称无法触发新动画（需配合 animation-duration 等）；
- 每次 hover 触发状态更新可能引发不必要的重渲染；
- 未重置 animation-play-state 或 animation-fill-mode 时，动画可能卡顿或不重复。
✅ 替代方案：如需更复杂位移动画（如带弹性、多阶段），可结合 @keyframes：
@keyframes slideToCenter {
from { margin-left: 0; }
to { margin-left: 50%; }
}
.button:hover {
animation: slideToCenter 0.5s ease-in-out forwards;
}
注意添加 forwards 以保持最终状态，避免鼠标移出后立即回弹。
? 总结：
- ✅ 优先用 transition 实现简单悬停位移；
- ✅ 避免在 React 中用状态驱动基础动画，CSS 更可靠；
- ✅ 确保父容器有明确宽度，理解 % 单位的参照基准；
- ✅ 如需高级控制（暂停、回调），再考虑 useRef + onAnimationEnd 等 React 集成方式。