smooth transition between hovered and normal state (using css3 animations)

Question

every time I use keyframes for on-hover animations, the animations stops on mouse leaves and roughly goes back to original state. Is there any chance to make the movement smoother? I tried using transitions, but they seem not to work with keyframes.

The example can be found below (at the moment I'm adding hovered class with jQuery, but the :hover doesn't work as well): http://jsfiddle.net/42ZHq/

HTML

<div class="sign-container"></div>

CSS

.sign-container {
background:red;
width: 250px;
height: 238px;
margin:30px auto;
-webkit-transform: rotate(25deg);
-webkit-transform-origin: 22% 0;
}


.sign-container.hovered {
animation: wiggle 2s ease-in-out 0s 1 normal;
-webkit-animation: wiggle 2s ease-in-out 0s 1 normal;
-moz-animation: wiggle 2s ease-in-out 0s 1 normal;
-ms-animation: wiggle 2s ease-in-out 0s 1 normal;
-o-animation: wiggle 2s ease-in-out 0s 1css n ormal;
-webkit-transform-origin:22% 0;
}

@-webkit-keyframes wiggle {
0%   { -webkit-transform: rotate(25deg); }
25%  { -webkit-transform: rotate(10deg); }
50%  { -webkit-transform: rotate(25deg); }
75%  { -webkit-transform: rotate(10deg); }
100% { -webkit-transform: rotate(25deg); }
}
@-moz-keyframes wiggle {
0%   { -webkit-transform: rotate(25deg); }
25%  { -webkit-transform: rotate(10deg); }
50%  { -webkit-transform: rotate(25deg); }
75%  { -webkit-transform: rotate(10deg); }
100% { -webkit-transform: rotate(25deg); }
}

@keyframes wiggle {
0%   { -webkit-transform: rotate(25deg); }
25%  { -webkit-transform: rotate(10deg); }
50%  { -webkit-transform: rotate(25deg); }
75%  { -webkit-transform: rotate(10deg); }
100% { -webkit-transform: rotate(25deg); }
}

JQUERY

    $(document).on('mouseenter', '.sign-container', function() {
    $(this).addClass('hovered');
}).on('mouseleave', '.sign-container', function() {
    $(this).removeClass('hovered');
});

Thanks, S.

PS. Don't hate for lack of proper prefixes please, was testing in Chrome...

Answer 1

I don't know if this is quite the answer you are looking for, but here is a workaround that I came up with.

Your problem existed because you removed that class when the mouse left the div. In reality, you don't want the class to be removed when the mouse leaves, you want it to be removed when the animation is finished. So you can set a timer event to remove the class after ~2 seconds, and then you can re-play the animation over and over again.

JS:

$(document).on('mouseenter', '.sign-container', function() {
    if ($(this).hasClass('hovered')) {
        return false;   
    }
    $(this).addClass('hovered');
    var that = $(this);
    setTimeout(function (event) {
        that.removeClass('hovered');
    }, 2000);
});

DEMO: http://jsfiddle.net/42ZHq/3/