Javascript + CSS Animation with keydown

Hi there, I have played around with this a bit an come up with this solution.

No need to add a second function, just use toggle instead of add on a keypress command.

Keypress will pick up both directions of the key and toggle will add/remove on alternating interactions.

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

Let me know if it is not bang on and I'll try and help further if I can :)

Hi, Liam. Thanks a lot for your tip. I played around with your solution, and here is the code I came up with.

I used addClass instead of toggleClass, because toggleClass adds class with one keypress and removes that class with another keypress. And I wanted to get an animation that would appear every time you click a button. so I also added a keyup function. And I have found this delay function online, maybe there is a shorter way to add a delay to a keyup?

There is still one issue within the code that I would like to correct, when you press the key longer then 1 set of animation it gets stuck in the starting position. and of course I want it to repeat the animation as long as the key is being pressed. How should I loop it?

Here is my JS

var delay = (function(){
var timer = 0;
return function(callback, ms){
clearTimeout (timer);
timer = setTimeout(callback, ms);
 };
});


$(document).on('keypress',function(e){
if(e.which==13){
$('div').addClass('minicircle');
 }

$(document).keyup(function() {
delay(function(){
$('div').removeClass('minicircle');
 }, 500 );
});

});

Here is my CSS

.minicircle {
  width: 200px;
  height: 200px;
  background-color: #86c5bd;
  border-radius: 50%;
  position: fixed;
  -webkit-animation: slide 2s linear;
}

@-webkit-keyframes slide {
  0% {
    left: 0;
    top: 0;
  }
  50% {
    left: 50%;
    top: 50%;
  }
  100% {
    left: 80%; 
    top: -30%;
  }

}

Liam, I added infinite to css animation and it solved the problem=). But now i ll need to add sample of sound along with animation, not sure if i can make it loop like animation through css, so i ll try to use the method u sent me. thanks

Ah that Keith Clark demo is dope!!!

yeah -o- and -mozilla- are for older browsers only right? yeah CSS is great, thats why i wanted to practice it on this project for starters to see what i can squeeze out from it with animation. plus its easier then javascript. after i want to try to make animation on javascript with two.js .. i just need to learn and practice js more to make it happen:)