div animate on hover

Question

I would like to know how to make a div play a CSS animation while hovering over it, and how to make it play the animation backwards when the mouse stops hovering over it. I already have my animation, generated with a handy online CSS keyframes animation generator program.

.element-animation{
 -webkit-animation: animationFrames ease 1s;
 -webkit-animation-iteration-count: 1;
 -webkit-transform-origin: 0% 0%;
 -webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/ 
}

@-webkit-keyframes animationFrames {
0% {
left:0px;
top:0px;
opacity:1;
-webkit-transform:  rotate(0deg) scaleX(1) scaleY(1) ;
}
20% {
-webkit-transform:  rotate(60deg) ;
}
40% {
-webkit-transform:  rotate(40deg) ;
}
60% {
-webkit-transform:  rotate(54deg) ;
}
80% {
-webkit-transform:  rotate(42deg) ;
}
100% {
left:0px;
top:0px;
opacity:1;
-webkit-transform:  rotate(46deg) scaleX(1) scaleY(1) ;
}
}

All help greatly appreciated!

Answer 1

To trigger the CSS animation on the hover event, you will need to add an event listener via JavaScript.

document.querySelector('#div1').addEventListener('mouseenter', function(){
    this.classList.add('element-animation');
});

Or, if you are using jQuery:

$('#div1').on('mouseenter', function(){
    $(this).addClass('element-animation');
});

fiddle

Answer 2

Add :hover to css class like this element-animation:hover

Check fiddle http://jsfiddle.net/PawelK/SF4Zy/3/ tested with Chrome