CSS 动画在某些浏览器中意外从头开始重新启动答案

【问题标题】：CSS animation unexpectedly restarts from the beginning in some browsersCSS 动画在某些浏览器中意外从头开始重新启动
【发布时间】：2014-09-11 02:36:52
【问题描述】：

在 IE11 和 Webkit 浏览器中，如果在包含 CSS 动画中间元素的 div 上设置 display: none，然后将容器 div 设置回 display: block，则动画将从头开始.

Firefox 不这样做：它的行为就好像动画一直在后台运行（这对我来说似乎更直观）。

哪种行为是正确的？

我已将其提炼成一个简单的测试用例，您可以在 this jsfiddle 中看到它。在 Firefox 中尝试，然后在 Chrome/Safari/IE11 中尝试，并注意行为差异。

问题 1： 哪种浏览器符合此处的规范？还是说规格太模糊？

问题 2：如果一种或另一种行为是合规的，是否有修复/解决方法/hack 可以迫使不合规的浏览器也正常运行？

我已经读过使用visibility: hidden 而不是display: none 将防止这个问题。 这不是一个选项。

我知道我可以使用 jQuery.animate() 或其他基于 JavaScript 的动画技术作为解决方法。 这不是我要问的。

JSFiddle 中的代码复制如下。

<!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>

【问题讨论】：

这里的第二个答案使用height 将其设置为0 所以如果visibility 不是一个选项stackoverflow.com/questions/3331353/… 在规范之后我不确定但如果元素是“出”文档那么为什么要动画。如果它仍然像可见度和高度一样“处于”状态，它应该继续前进。

标签： css css-animations

【解决方案1】：

我不知道有关规格的答案，但就另一种解决方法而言：

你能改用不透明度吗？而不是你的显示和隐藏来切换显示，使用opacity: 0来隐藏容器？

在设置时使用动画：http://jsfiddle.net/t5bhmnoy/7/

使用过渡 - 这只是我尝试过的一种方法：http://jsfiddle.net/t5bhmnoy/6/

【讨论】：