HTML+CSS动画异常：元素执行动画后自动复位问题咨询

原因 #

CSS动画默认的animation-fill-mode属性值为none，这表示动画执行完成后，元素会立即恢复到动画开始前的样式。你的动画仅在运行过程中修改了top属性，没有设置保留最终帧状态，所以动画结束后元素会回到初始的top:200px位置。

解决方法 #

修改.animationclass的CSS规则，添加animation-fill-mode: forwards，让动画结束后保持最后一帧的样式：

.animationclass{
    animation: lively 4s forwards;
}

额外提示 #

• 右键点击时，仅在mousedown中阻止默认行为可能无法完全屏蔽浏览器右键菜单，建议同时监听contextmenu事件并阻止默认行为：

maincheck.addEventListener("contextmenu", (e) => e.preventDefault());

• 若后续需要重新触发动画，直接移除再添加类名可能不生效，需要触发浏览器重绘，比如用setTimeout：

// 重置并重新触发动画
maincheck.classList.remove("animationclass");
setTimeout(() => {
    maincheck.classList.add("animationclass");
}, 0);

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