CSS animation unexpectedly restarts from the beginning in some browsers

Question

In both IE11 and Webkit browsers, if you set display: none on a div containing an element that's in the middle of a CSS animation, and then set the container div back to display: block, the animation will restart from the beginning.

Firefox does not do this: it behaves as if the animation had been running in the background the whole time (which seems much more intuitive to me).

Which behavior is correct?

I've distilled this down to a bare-bones test case, which you can see in this jsfiddle. Try it in Firefox, then try it in Chrome/Safari/IE11, and note the difference in behavior.

Question 1: Which browser is compliant with the spec here? Or is the spec too vague to say?

Question 2: If one behavior or the other is compliant, is there a fix/workaround/hack that will compel the non-compliant browsers to behave correctly too?

I have read that using visibility: hidden instead of display: none on the will prevent this issue. This is not an option.

I know that I could use jQuery.animate() or other JavaScript-based animation techniques as a workaround. That is not what I'm asking about.

The code from the JSFiddle is reproduced below.

<!DOCTYPE html>

<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title> - jsFiddle demo</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.js"></script>
    <style type="text/css">
        #bar {
            width: 100%;
            height: 24px;
            background-color: #fc0;
        }

        #bar.shrinking {
            -moz-animation: shrink 10s linear;
            -moz-animation-fill-mode: forwards;
            -o-animation: shrink 10s linear;
            -o-animation-fill-mode: forwards;
            -webkit-animation: shrink 10s linear;
            -webkit-animation-fill-mode: forwards;
            animation: shrink 10s linear;
            animation-fill-mode: forwards;
        }

        @-moz-keyframes shrink {
            from { width: 100%; } to { width: 0%; }
        }

        @-o-keyframes shrink {
            from { width: 100%; } to { width: 0%; }
        }

        @-webkit-keyframes shrink {
            from { width: 100%; } to { width: 0%; }
        }

        @keyframes shrink {
            from { width: 100%; } to { width: 0%; }
        }
    </style>

    <script>
        $(window).load(function(){
            $("#start-animation").click( function() {
                $("#bar").addClass("shrinking");
            } );
            $("#hide-container").click( function() {
                $("#container").css( "display", "none" );
            } );
            $("#show-container").click( function() {
                $("#container").css( "display", "block" );
            } );
        });
    </script>
</head>

<body>

    <ol>
        <li>
            <button id="start-animation">Start animating the yellow bar</button>
        </li>
        <li>
            While the animation is still running, <button id="hide-container">set display: none on the containing div</button>
        </li>
        <li>
            <button id="show-container">Set the container back to display: block</button>
        </li>
        <li>
            In Webkit and IE11, the animation starts over from the beginning. In Firefox, it behaves as if the animation had been running in the background all along.
        </li>
    </ol>

    <div id="container">
        <div id="bar"></div>
    </div>

</body>

</html>

Second answer on here use `height` to set it to `0` so all behave like FF if `visibility` not an option http://stackoverflow.com/questions/3331353/transitions-on-the-display-property After specs wise I am not sure but if the element is "out" of the document then why should it animate. When if it is still "in" like with visibility and height it should keep on going. — GillesC, Sep 07 '14 at 00:59

score 0 · Answer 1 · answered Sep 10 '14 at 18:36

I don't know the answers regarding specs, but as far as another workaround goes:

Could you use opacity instead? Instead of your show and hide to toggle display, using opacity: 0 to hide the container?

Using animations as you set it up: http://jsfiddle.net/t5bhmnoy/7/

Using transitions - it was just an approach I tried anyway: http://jsfiddle.net/t5bhmnoy/6/

CSS animation unexpectedly restarts from the beginning in some browsers

1 Answers1