如何通过JavaScript键盘事件触发CSS精灵动画

我写了一个针对空div的闪烁精灵CSS动画，代码如下：

#flashIt{ 
  width: 50%; 
  height: 100px; 
  background: blue; 
  margin: 10px auto; 
  border: solid 2px black; 
  left: 25%; 
  animation: flash 1s linear infinite; 
}
@keyframes flash { 
  0% { opacity: 1; } 
  50% { opacity: .1 } 
  100% { opacity: 1; } 
}

当前这个动画加载后就会直接运行，但我希望它只在用户按下键盘任意按键时才开始播放，请问该怎么用JavaScript实现这个需求？恳请赐教，谢谢。

实现方案 #

核心思路很简单：让动画默认处于未激活状态，等监听到键盘按键事件后，再给目标元素启用动画效果。这里有两种实用的实现方式，你可以按需选择：

方法1：用CSS类控制动画（推荐）

这种方式遵循「样式与行为分离」的原则，后续维护和调整会更灵活：

1. 先调整你的CSS代码，把动画属性从元素选择器中抽离成单独的类：

#flashIt{ 
  width: 50%; 
  height: 100px; 
  background: blue; 
  margin: 10px auto; 
  border: solid 2px black; 
  left: 25%; 
  /* 移除默认的animation属性，初始不播放动画 */
}
/* 单独定义动画类 */
.flash-active {
  animation: flash 1s linear infinite;
}
@keyframes flash { 
  0% { opacity: 1; } 
  50% { opacity: .1 } 
  100% { opacity: 1; } 
}

2. 再添加JavaScript代码，监听全局键盘按下事件，给元素添加动画类：

// 获取目标div元素
const flashBox = document.getElementById('flashIt');

// 监听键盘按下事件
document.addEventListener('keydown', function() {
  // 给元素添启动画的类
  flashBox.classList.add('flash-active');
  
  // 可选：如果希望只触发一次（按下任意键后不再重复触发），可以加上这行移除监听
  // document.removeEventListener('keydown', arguments.callee);
});

方法2：直接通过JS修改元素样式

如果不想改动原有CSS结构，也可以直接用JS动态给元素添加动画属性：

1. 保留原有CSS，但移除#flashIt里的animation属性（让动画默认不运行）：

#flashIt{ 
  width: 50%; 
  height: 100px; 
  background: blue; 
  margin: 10px auto; 
  border: solid 2px black; 
  left: 25%; 
}
@keyframes flash { 
  0% { opacity: 1; } 
  50% { opacity: .1 } 
  100% { opacity: 1; } 
}

2. 用JS监听键盘事件，直接设置元素的动画样式：

const flashBox = document.getElementById('flashIt');

document.addEventListener('keydown', function() {
  flashBox.style.animation = 'flash 1s linear infinite';
  
  // 同样可选：如果只需要触发一次，移除监听事件
  // document.removeEventListener('keydown', arguments.callee);
});

额外小技巧 #

• 如果需要按下特定按键才触发（比如只响应空格键），可以在事件回调里判断按键的key值：

document.addEventListener('keydown', function(e) {
  if (e.key === ' ') { // 仅当按下空格键时触发
    flashBox.classList.add('flash-active');
    // 或者用 flashBox.style.animation = 'flash 1s linear infinite';
  }
});

• 如果想要实现「按下按键开始，再按一次停止」的效果，也可以用classList.toggle('flash-active')来切换动画状态。

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