如何用JS实现点击按钮触发CSS Keyframe动画？解决图标闪烁问题

问题根源 #

你现在的.nuclear-icon默认就设置了animation: red-alert .5s steps(2) infinite;，页面一加载就会无限闪烁，这和你想要“点击按钮才启动”的需求不符。我们需要把动画改成按需触发的模式。

步骤1：调整CSS代码 #

修改样式，让图标默认静止，通过新增的类来触发动画，同时补全背景位置的单位（缺失px会导致精灵图切换失效）：

.button {
  position: absolute; top: 110px; right: 355px;
  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  font-size: 96px;
  display: inline-block;
  border: 2px solid black;
  cursor: pointer;
  padding: 7px 28px;
  border-color: #000000;
  color: black;
}

.nuclear-icon {
  width: 94px; height: 101px;
  background: url(img/intro_nuclear.png); background-repeat: no-repeat;
  position: absolute; top: 580px; left: 254px;
  /* 移除默认动画，让图标初始状态静止 */
}

/* 新增激活类，点击按钮后给图标添加这个类来启动动画 */
.nuclear-icon.active {
  animation: red-alert .5s steps(2) infinite;
}

@keyframes red-alert {
  /* 补全px单位，确保背景位置生效 */
  0% { background-position: 94px 101px; opacity: 1;}
  100% { background-position: 94px 202px; opacity: 1;}
}

步骤2：添加原生JS代码 #

在HTML的</body>标签前插入这段代码，实现点击按钮触发动画的逻辑：

// 获取页面上的按钮和图标元素
const triggerBtn = document.querySelector('.button');
const nuclearIcon = document.querySelector('.nuclear-icon');

// 给按钮绑定点击事件
triggerBtn.addEventListener('click', function() {
  // 给图标添加active类，启动动画
  nuclearIcon.classList.add('active');

  // （可选）如果需要点击一次只播放一轮动画就停止，把上面的infinite改成1，然后取消下面的注释：
  // nuclearIcon.addEventListener('animationend', function() {
  //   nuclearIcon.classList.remove('active');
  // }, { once: true });
});

简单解释 #

• document.querySelector('.xxx')：用CSS选择器的方式获取页面元素，和你写CSS时的选择逻辑一样。
• addEventListener('click', ...)：给按钮绑定点击动作，用户点击时就会执行后面的函数。
• classList.add('active')：给图标元素加上我们写的.active类，触发CSS里的动画效果。

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