如何实现点击元素触发CSS动画（替代页面刷新自动运行）

步骤1：调整CSS样式 #

把原本直接写在目标元素上的动画属性剥离到独立的类选择器中，让页面加载时默认不执行动画：

#login-or-signup-selection {
    display: flex;
    position: relative;
    height: 70%;
}

/* 独立的动画类，点击时才添加到目标元素 */
.animate-test {
    animation-name: test;
    animation-duration: 5s;
}

@keyframes test {
    0% {top: 0px;}
    50% {top: 300px;}
    100% {top: 0;}
}

步骤2：添加JavaScript点击事件 #

给clickMe元素绑定点击事件，点击时为目标元素添加动画类。如果需要支持重复点击触发动画，要先移除类再重新添加（避免CSS动画只执行一次的限制）：

<p id="clickMe">Element to click</p>

<script>
// 获取元素
const triggerBtn = document.getElementById('clickMe');
const targetElement = document.getElementById('login-or-signup-selection');

// 绑定点击事件
triggerBtn.addEventListener('click', () => {
    // 移除动画类，确保重新添加时能触发动画
    targetElement.classList.remove('animate-test');
    // 使用requestAnimationFrame确保DOM更新后再添加类，避免浏览器优化导致不生效
    requestAnimationFrame(() => {
        targetElement.classList.add('animate-test');
    });
});
</script>

补充说明 #

• 如果只需要触发一次动画，可以去掉classList.remove()和requestAnimationFrame的逻辑，直接添加类即可。
• 若要自定义动画的执行次数、方向等，可以在.animate-test类中添加animation-iteration-count、animation-direction等属性。

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