通过 css 的 `transition` 或 `@keyframes` 动画，可轻松实现按钮在 hover 时平滑过渡到 `margin-left: 50%` 的效果，无需 javascript 或 react 状态控制，简洁高效且性能更优。
在 React 应用中实现按钮悬停动画，推荐优先使用纯 CSS 方案——它语义清晰、性能优异、易于维护，且完全兼容 React 的声明式渲染逻辑。直接操作内联样式或动态注入 animation 属性（如通过 setStyles 设置 keyframe 名称）不仅冗余，还容易因样式优先级、重绘触发时机等问题导致动画失效。
✅ 推荐方案一：使用 transition（最简、最可靠）
只需为按钮定义初始 margin-left 和过渡属性，hover 时修改值即可自动触发动画：
.button {
margin-left: 0;
transition: margin-left 0.5s ease-in-out;
}
.button:hover {
margin-left: 50%;
}⚠️ 注意：50% 是相对于父容器宽度计算的，确保父元素有明确宽度（如 width: 100% 或块级上下文），否则行为可能不符合预期。若需精确居中（而非左边缘对齐中点），建议改用 transform: translateX(50%) 配合 left: 50%，但本例中 margin-left: 50% 即表示“向右偏移父容器一半宽度”。
✅ 推荐方案二：使用 @keyframes + animation（适合复杂时序控制）
当需要更精细的动画控制（如分段缓动、循环、延迟等）时，可定义关键帧：
@keyframes slideToCenter {
from {
margin-left: 0;
}
to {
margin-left: 50%;
}
}
.button:hover {
animation: slideToCenter 0.5s ease-in-out forwards;
}? forwards 保证动画结束后保留最终状态（即 margin-left: 50%），避免鼠标移出后瞬间跳回原位。
? 在 React 中使用示例（JSX + CSS 模块或全局样式）：
// Button.jsx
export default function Button() {
return <button className="button">Hover Me</button>;
}❌ 不推荐做法：
- 在 onMouseEnter 中调用 setState 更新内联样式（破坏 CSS 声明式优势，增加不必要的重渲染）；
- 拼接字符串 keyframe 名并赋给 animation（易出错、难调试、无类型提示）；
- 忽略 transition 的 property 参数而写成 transition: all 0.5s（可能意外触发其他属性动画，影响性能与可预测性）。
? 小结：CSS 动画应交给 CSS 处理。transition 适用于属性值的简单渐变，@keyframes 适用于多阶段或自定义路径动画。两者均无需 React 状态介入，开箱即用，稳定可靠。
