How to Trigger CSS Sprite Animation Using Javascript Keyboard Event

Question

I have a flashing sprite css animation for an empty div.

#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; } 
 }

So this animation works as it is. However I want the animation to begin when a key is pressed by the user on their keyboard. How can I do this using JS? Help on this would be much appreciated. Thanks

score 0 · Answer 1 · answered Mar 18 '18 at 23:25

A simple way to do this would be to listen for a keypress and then, when a key is pressed, apply a class to the appropriate DOM element. This class would contain your animation styling which would then animate the element just like you want.

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

score -2 · Answer 2 · answered Mar 18 '18 at 23:32

-2

Here is an example of what you could do.

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

This will activate the animation class when you press the enter key.

answered Mar 18 '18 at 23:32

Swink

353
3
26

Whilst this would work, OP never stated whether they are using jQuery or not. – Luke Glazebrook Mar 18 '18 at 23:34
Just was showing them an alternative way to solve the issue. Sorry. – Swink Mar 18 '18 at 23:41
Not a problem at all, just wanted to ensure that OP didn't try to implement your solution and get confused and even more stuck when it didn't work. (Assuming he isn't using jQuery behind the scenes) – Luke Glazebrook Mar 18 '18 at 23:44

How to Trigger CSS Sprite Animation Using Javascript Keyboard Event

2 Answers2