When hovering over the small menu logo on my site, there's a subtle wiggle effect that I really like. However, I would prefer if the animation played all the way through before repeating. Here's the code I'm currently using:
Here is my code snippet:
JavaScript:
$(function() {
$('.logo').hover(function(){$(this).addClass('animated swing')},function(){$(this).removeClass('animated swing')});
});
CSS3:
.animated {
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
-ms-animation-duration: 1s;
-o-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-ms-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
}
@keyframes swing {
20%, 40%, 60%, 80%, 100% { transform-origin: top center; }
20% {transform: rotate(15deg); }
40% {transform: rotate(-10deg); }
60% {transform: rotate(5deg); }
80% {transform: rotate(-5deg); }
100% {transform: rotate(0deg); }
}
.swing {
transform-origin: top center;
animation-name: swing;
}