l-emi l-emi - 3 months ago 21
jQuery Question

Button text blurring when hovering over an icon

I've made the icon of the paper plan shake when hovered over. However, the text on the buttons underneath blurs a bit too. I tried removing the animation and the text still blurs when you hover over the icon (despite the icon not doing anything).

CSS for the animation:

.fa-shake {
animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
transform: translate3d(0, 0, 0);
backface-visibility: hidden;
perspective: 1000px;
}

@keyframes shake {
10%, 90% {
transform: translate3d(-1px, 0, 0);
}

20%, 80% {
transform: translate3d(2px, 0, 0);
}

30%, 50%, 70% {
transform: translate3d(-4px, 0, 0);
}

40%, 60% {
transform: translate3d(4px, 0, 0);
}
}


jQuery:

$('.plane').hover(function() {
$(this).addClass('fa-shake');
}, function () {
$(this).removeClass('fa-shake');
});


Full code if needed.

Answer

I'd be adding the the shake to the icon..not the whole div.

$('.plane').hover(function() {
    $(this).find('i').addClass('fa-shake');
}, function () {
    $(this).find('i').removeClass('fa-shake');
});

This seems to fix the problem - Codepen