Lets say I've got a box that I want to wobble when hovered over - a nuance design choice. But when a button is clicked I want the box to transform to the right. It does this, but even though I'm applying pointer-events: none to the element, its still reacting to its CSS hover effect telling it to wobble, which interrupts the CSS transform activated by the button click.
To observe this problem, hover over the box after clicking the button, while it's in motion.
How to I keep the wobble animation from interrupting while the transform transition is in progress?
$(function() { var $box = $('.box'); var $button = $('.button'); $button.on('click', function() { $box.css({ 'transform' : 'translateX(200px)', 'pointer-events' : 'none !important' }); setTimeout(function(){ $box.css({ 'transform' : 'translateX(0px)', 'pointer-events' : '' }); }, 3000); });
});@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,800);
.box { background-color: lightgray; width: 100px; height: 100px; transition: transform 3s, background-color 1s;
}
.box:hover { background-color: gold; animation: wobble 1s;
}
.button { cursor:pointer; font-family: 'Open Sans', sans-serif; margin-top:10px; text-transform: uppercase; padding:10px; background-color:lightgreen; width:100px; height:40px; box-sizing:border-box; text-align:center;
}
@keyframes wobble { 0% { transform: rotate(0deg); } 25% { transform: rotate(3deg); } 75% { transform: rotate(-3deg); } 100% { transform: rotate(0deg); }
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box"></div>
<div class="button">button</div>