如何实现按钮点击触发关键帧动画，而非页面加载时启动？

嘿，我懂你的需求——现在动画一加载页面就自动跑起来了，想要改成点击按钮才触发对吧？其实核心思路很简单：把触发动画的属性从默认加载的类里拆出来，等到按钮点击时再动态给元素加上这个动画类，具体步骤和代码调整如下：

1. 重构CSS结构 #

原来的.fade-in类直接包含了动画属性，导致页面一加载就触发动画。我们把它拆成两部分：

• 保留.fade-in作为初始状态类（只设置透明，不包含动画逻辑）
• 新增一个.animate-fade类，专门存放触发动画的核心属性
• 原来的.one/.two/.three延迟类保持不变，用来控制每个元素的动画启动时机

修改后的CSS代码：

@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

/* 初始状态：元素透明，但不触发动画 */
.fade-in {
  opacity: 0;
}

/* 触发动画的类，点击按钮时动态添加 */
.animate-fade {
  -webkit-animation: fadeIn ease-in 1;
  -moz-animation: fadeIn ease-in 1;
  animation: fadeIn ease-in 1;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-duration: 1s;
  -moz-animation-duration: 1s;
  animation-duration: 1s;
}

/* 各个元素的动画延迟设置，保持原有逻辑 */
.fade-in.one {
  -webkit-animation-delay: 0.7s;
  -moz-animation-delay: 0.7s;
  animation-delay: 1s;
}
.fade-in.two {
  -webkit-animation-delay: 0.7s;
  -moz-animation-delay:0.7s;
  animation-delay: 2s;
}
.fade-in.three {
  -webkit-animation-delay: 2.7s;
  -moz-animation-delay: 2.7s;
  animation-delay: 3s;
}

2. 添加触发按钮和JavaScript逻辑 #

在HTML里加一个触发按钮，然后用JS监听点击事件，点击时给所有带.fade-in类的<td>元素加上.animate-fade类，就能启动动画了：

修改后的HTML代码：

<!-- 新增触发动画的按钮 -->
<button id="startAnimationBtn">点击启动动画</button>

<table width="100%" class="container">
  <td width="33%" class="fade-in one">
    <img width="100%" src="sekerko.png">
  </td>
  <td width="33%" class="fade-in two">
    <img width="100%" src="miko.png">
  </td>
  <td width="33%" class="fade-in three">
    <img width="100%" src="lakyrka.png">
  </td>
</table>

<script>
// 获取按钮和所有需要动画的元素
const triggerBtn = document.getElementById('startAnimationBtn');
const fadeElements = document.querySelectorAll('.fade-in');

// 监听按钮点击事件，添加动画类
triggerBtn.addEventListener('click', () => {
  fadeElements.forEach(element => {
    element.classList.add('animate-fade');
  });
  
  // 可选：如果想让按钮只能触发一次，点击后禁用它
  // triggerBtn.disabled = true;
});
</script>

原理简单说两句 #

• 页面加载时，<td>元素只有.fade-in类，处于透明状态但没有动画属性，所以不会有任何动画效果
• 点击按钮后，动态给元素添加.animate-fade类，浏览器检测到新增的动画属性，就会执行fadeIn关键帧动画
• 因为设置了animation-fill-mode: forwards，动画结束后元素会保持opacity:1的最终状态，不会变回透明

这样就完美实现了点击按钮才启动动画的需求啦！

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