javascript - 如何使用 Javascript 键盘事件触发 CSS Sprite 动画

标签 javascript css animation events keyboard

<分区>

我有一个空 div 的闪烁 Sprite 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 执行此操作?对此的帮助将不胜感激。谢谢

最佳答案

执行此操作的一种简单方法是监听按键,然后在按下某个键时将类应用到适当的 DOM 元素。此类将包含您的动画样式,然后按照您的需要为元素设置动画。

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

关于javascript - 如何使用 Javascript 键盘事件触发 CSS Sprite 动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49353761/

上一篇:html - 为什么背景色填满了整个屏幕?

下一篇:javascript - 滚动到页面的特定部分后启动 CSS 动画

相关文章:

javascript - 获取 json 数据中的嵌套映射

javascript - D3.js 创建的图表的 x 轴上的样式值

javascript - 如何使用CSS调整另一个div中div中图像的大小?

javascript - jQuery slideDown() 错误

swift - UIView 自定义过渡在完成时快速恢复

javascript - 如何将数据输入 JavaScript 并使用 JQuery 进行渲染?

html - 将鼠标悬停在链接上时更改父元素或祖先元素的颜色

css - 在多个 Compass 元素中加载全局 SASS 文件

android - 如何在android中从下到上动画弹出窗口

javascript - 确定所有子元素的宽度