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上。

PS。不要因为缺乏正确的前缀而讨厌，正在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);
});

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

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

1 个答案: