悬停和正常状态之间的平滑过渡(使用css3动画)

Question

每次我为悬停动画使用关键帧时，动画在鼠标离开时停止并大致返回到原始状态。有没有可能使动作更流畅?我尝试使用过渡，但他们似乎不与关键帧工作。

这个例子可以在下面找到(目前我正在用jQuery添加悬停类，但是:hover不起作用):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');
});

谢谢,s .

p。请不要讨厌缺乏适当的前缀，在Chrome中测试…

Answer 1

我不知道这是不是你想要的答案，但这是我想出的一个变通办法。

你的问题存在是因为你在鼠标离开div时删除了那个类。实际上，你不想在鼠标离开时删除这个类，你想在动画完成时删除它。所以你可以设置一个计时器事件，在2秒后删除类，然后你可以一遍又一遍地重放动画。

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

演示:http://jsfiddle.net/42ZHq/3/