如何使用 Javascript 键盘事件触发 CSS Sprite 动画答案

【问题标题】：How to Trigger CSS Sprite Animation Using Javascript Keyboard Event [duplicate]如何使用 Javascript 键盘事件触发 CSS Sprite 动画
【发布时间】：2018-08-27 11:16:29
【问题描述】：

我有一个空 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; }	
	}

所以这个动画按原样工作。但是我希望动画在用户在键盘上按下一个键时开始。我怎样才能使用 JS 做到这一点？对此的帮助将不胜感激。谢谢

【问题讨论】：

标签： javascript css animation events keyboard

【解决方案1】：

一个简单的方法是监听按键，然后，当按键被按下时，将一个类应用于适当的 DOM 元素。此类将包含您的动画样式，然后按照您的需要为元素设置动画。

var elementToAnimate = document.findElementById("flashIt");
document.addEventListener('keypress', function(event) {
  elementToAnimate.classList.add('your-animation-class');
});

【讨论】：

【解决方案2】：

这是你可以做的一个例子。

$(document).keypress('keypress',function(e){
      if(e.which==13){
         $('div').toggleClass('animation');
     }
 });

这将在您按下回车键时激活动画类。

【讨论】：

虽然这可行，但 OP 从未说明他们是否使用 jQuery。
只是向他们展示了解决问题的另一种方法。对不起。
根本不是问题，只是想确保 OP 不会尝试实施您的解决方案并在它不起作用时感到困惑甚至卡住。（假设他没有在幕后使用 jQuery）