Why doesn't this hover Animate.css animation work after the initial page load animation?
$(document).ready(function(){
$("h1").addClass("animated zoomInDown")
$("h1").hover(function(){
$(this).addClass('animated shake');
});
Add a comment
|
1 Answer
If you're using hover() make sure you have handlers for both hover-in and hover-out events. CSS animation will only re-run if it's removed then added again:
$(document).ready(function() {
$("h1").addClass("animated zoomInDown")
$("h1").hover(function() {
$(this).addClass('animated shake');
}, function() {
$(this).removeClass('animated shake');
});
});h1 {
background: yellow;
position: relative;
}
.animated {
animation: animate-color 0.2s linear;
animation-iteration-count: 5;
}
@keyframes animate-color {
0% {
left: 0;
}
50% {
left: 5px;
background: red;
}
100% {
left: 0px;
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Hello</h1>2 Comments
user3519870
This is partially correct however it doesn't have the
$("h1").addClass("animated zoomInDown") animation when the page is loaded @AVAVT
AVAVT
@user3519870 can you provide your environment (browser/device)? I'm testing on both Chrome and Firefox here and the animation's running well the first time.