Here I have an example of CSS keyframe animation (You can see the whole thing on this Demo)
The code will every 1.4 seconds scale the img to 0.75 and go back to it's original (1) scale. That works fine.
Then I add a simple jQuery code to simulate the error:
setTimeout(function () {
$("img").css('visibility', 'hidden');
activate();
}, 3000);
function activate() {
setTimeout(function () {
$("img").css('visibility', 'visible');
}, 3000);
}
@-webkit-keyframes imagebulger {
to {
-webkit-transform: scale(.75);
transform: scale(.75);
}
}
@keyframes imagebulger {
to {
-webkit-transform: scale(.75);
transform: scale(.75);
}
}
img {
-webkit-animation: imagebulger 1.4s infinite alternate;
-moz-animation: imagebulger 1.4s infinite alternate;
-o-animation: imagebulger 1.4s infinite alternate;
animation: imagebulger 1.4s infinite alternate;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="http://placehold.it/200x200" />
This will hide the img element after 3 seconds and during 3 seconds. When the img element is back to to visible, the resizing effect will not be running anymore.
It happens to me in Chrome 41.0.2272 (Ubuntu). In Firefox it works as expected.
EDIT
Looks like is bug in with Chrome. I opened an issue. As a workaround, like suggested, either use display:none
instead of vissibility:hidden
or add a class after setting vissibility:visible
EDIT 2 There is an issue opened here: https://code.google.com/p/chromium/issues/detail?id=444852
The only way to truly pause an animation in CSS is to use the animation-play-state property with a paused value. In JavaScript, the property is “camelCased” as animationPlayState and set like this: element.
Animation Duration Not Set By default, a CSS animation cycle is zero seconds long. To override this, add an animation-duration rule to your targeted element with a seconds value, in the same block as animation-name. Below, try removing the comments around animation-duration to fix the animation.
CSS Animation element is supported by all Microsoft Edge browser.
What you really need to do is remove the element from the page entirely and re-insert it. As a quick demo with jQuery, we'll clone it, insert it right after itself, then remove the original. This same problem exists for any type of event. Say you have an animation you want to run immediately, but then again on :hover .
It appears to be a bug. The W3 documentation suggests that visibility hidden have the following effect:
The generated box is invisible (fully transparent, nothing is drawn), but still affects layout. Furthermore, descendants of the element will be visible if they have 'visibility: visible'.
Hence it should still be being calculated, just not drawn. Obviously the browser will probably want to make savings and not calculate it where possible, which seems to be where the bug is arising when this calculation doesn't recommence when it should. You can get around it by toggling the display
and wrapping your animating element in a div of the same size as the element in order to prevent the layout collapsing. Otherwise you could just reapply the animation CSS by toggling the class as Jeff states.
Please see the JS fiddle showing a hidden element still clearly being animated: JSFiddle. This leads me to think it's a bug. Otherwise the below is an example of it working toggling display
.
setTimeout(function () {
$("img").hide();
activate();
}, 3000);
function activate() {
setTimeout(function () {
$("img").show();
}, 3000);
}
.image-wrap {
height: 200px;
width: 200px;
}
@-webkit-keyframes imagebulger {
to {
-webkit-transform: scale(.75);
transform: scale(.75);
}
}
@keyframes imagebulger {
to {
-webkit-transform: scale(.75);
transform: scale(.75);
}
}
img {
-webkit-animation: imagebulger 1.4s infinite alternate;
-moz-animation: imagebulger 1.4s infinite alternate;
-o-animation: imagebulger 1.4s infinite alternate;
animation: imagebulger 1.4s infinite alternate;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="image-wrap">
<img src="http://placehold.it/200x200" />
</div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With