Why is the CSS animation screen hiding / blocking animation dropping?
HTML:
<div id="parent">
<div id="anim_div">:D</div>
</div>
JQuery
$('#anim_div').addClass('animation');
setTimeout(function(){
$('#parent').hide();
},1000);
setTimeout(function(){
$('#parent').show();
},2000);
CSS
#parent {
width:400px;
height:150px;
border-right:1px solid red;
}
#anim_div {
position:absolute;
}
.animation {
-webkit-animation:anim 4s;
}
@-webkit-keyframes anim {
0% {
left:0px;
}
100% {
left:400px;
}
}
Demo: http://jsfiddle.net/o7bt7p3a/
Is there a way to stop the animation from repeating / reset after hiding and showing the parent element with CSS only ?
source to share
Sorry, I didn't quite understand the question before.
Basically, jQuery hide
/ show
switches the value of the target element display
between none
and its original value. See here .
This means that the element is removed from the render tree and all of its animation states are lost. When you switch it back, the animations you define will be applied to it from the beginning.
To prevent this, you probably need to switch the CSS value visibility
instead of using jQuery hide
/ show
.
To achieve what you were trying to do check the fiddle .
source to share