Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS infinite animation after hidden is not reset (Chrome)

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

like image 872
Didac Montero Avatar asked May 11 '15 12:05

Didac Montero


People also ask

How do you keep an animation in CSS?

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.

Why is my CSS animation not working?

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.

Do CSS animations work on all browsers?

CSS Animation element is supported by all Microsoft Edge browser.

How do I start an animation again in CSS?

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 .


1 Answers

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>
like image 102
RichieAHB Avatar answered Oct 14 '22 23:10

RichieAHB