如何实现按钮hover时从当前位置上移、离开时复位的CSS动画？

你当前代码的核心问题是误用了CSS animation 属性实现简单状态过渡。animation 用于多帧序列动画，而你需要的是鼠标悬停/离开时的平滑位置切换，用 transition 更合适；同时原代码的 :not(:visited) 触发逻辑不符合需求，会导致页面加载时就播放一次动画，和悬停行为无关。

推荐修复代码（简洁高效） #

#register_event {
    /* 初始位置，设置过渡规则，让transform变化平滑过渡 */
    transform: translateY(0);
    transition: transform 0.2s ease-out; /* 时长和缓动函数可按需调整 */
}

#register_event:hover {
    /* 悬停时向上移动40px，直接定义最终状态 */
    transform: translateY(-40px);
}

代码说明 #

• 默认给按钮设置 transform: translateY(0) 作为初始位置，通过 transition 指定 transform 属性的变化需要平滑过渡，你可以把 0.2s 改成想要的时长（比如原代码的2s）。
• 鼠标悬停时直接设置目标位置，浏览器会自动完成从初始到目标状态的平滑动画；鼠标离开时，浏览器会反向执行过渡动画，自动回到初始位置，完全匹配你的需求。

若坚持用关键帧动画（不推荐） #

如果一定要用 animation 实现，需要调整触发逻辑并设置动画填充模式来保持最终状态：

#register_event {
    animation: wiggleW 2s ease-out forwards;
}

#register_event:hover {
    animation: wiggle 2s ease-out forwards;
}

@keyframes wiggleW {
    from { transform: translateY(-40px); }
    to { transform: translateY(0); }
}

@keyframes wiggle {
    from { transform: translateY(0); }
    to { transform: translateY(-40px); }
}

这种方式不如 transition 简洁，状态切换时可能出现动画重置的突兀感，优先推荐第一种方案。

内容的提问来源于stack exchange，提问作者Haim