Today I tried to implement in my site animate.css
But I wanted to make sure that the 'effect is activated in the: hover So I used jquery for this
The code is :
$(".questo").hover( function (e) {
$(this).toggleClass('animated shake', e.type === 'mouseenter');
});
The problem is that once you remove the mouse, the 'effect is interrupted. It could land the 'effect even without hover effect once it has begun?
Thank you all in advance
In your CSS file you could just add:
.questo:hover {
-webkit-animation: shake 1s;
animation: shake 1s;
}
The nice thing about this solution is that it requires no JavaScript. For reference look at this page
infinite by adding the keyword infinite next to shake: -webkit-animation: shake infinite 1s; animation: shake infinite 1s; this way it will not be cut off unless you remove the house from the element.
button:hover i { to select it such that the button is hovered but only the icon is animatedSee this variant (more interactive):
$(".myDiv").hover(function(){
$(this).addClass('animated ' + $(this).data('action'));
});
$(".myDiv").bind("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd",function(){
$(this).removeClass('animated ' + $(this).data('action'));
});
Rather than toggle the classes on hover, add them on mouse enter, like this
$(".questo").mouseEnter(function(event) {
$(this).addClass("animated shake");
});
Then you can remove the classes when the animation ends
$(".questo").on("webkitAnimationEnd mozAnimationEnd oAnimationEnd animationEnd", function(event) {
$(this).removeClass("animated shake");
});
I would do it on mouse enter, rather than hover, because you could trigger the animation when the mouse moves out of the element.
See this jsFiddle for an example
I believe you are saying animation stops once the mouse leaves and you are trying to achieve animation that once started on hover would stay on.
In this case you have to set the animation iteration count to infinite. Please add
animation-iteration-count:infinite
to the animation class in your stylesheet.
Instead of use toggleClass, change your code by adding the class in hover, and hook for the animation end css3 to finish and than remove the class.
Code:
$(".questo").hover(function (e) {
$(this).addClass('animated shake');
});
$(".questo").bind("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function () {
$(this).removeClass('animated shake');
});
Assuming you want to add the class when mouse enter and remove the class when mouse leave....
You can try this:
$(".questo").hover( function (e) {
$(this).addClass('animated shake');
}, function(e){
$(this).removeClass('animated shake');
});
i found best solution. we have to pause the animation on any class and also we can set animation s running to start that animation on that html element reference
.animatedhover {
animation-play-state: paused;
}
.animatedhover:hover {
animation-play-state: running;
}
