在某些浏览器中，CSS动画从一开始就意外地重新启动_Css_Css Animations

在某些浏览器中，CSS动画从一开始就意外地重新启动

css

在某些浏览器中，CSS动画从一开始就意外地重新启动,css,css-animations,Css,Css Animations,在IE11和WebKee浏览器中，如果你设置了“代码>显示：在包含一个CSS动画中间元素的div上，没有一个//CODE，然后将容器div设置为显示：块，动画将从头开始重启。 Firefox没有这样做：它的行为就像动画一直在后台运行一样（这对我来说更直观）哪种行为是正确的我已经将其提炼为一个简单的测试用例，您可以在中看到。在Firefox中尝试，然后在Chrome/Safari/IE11中尝试，并注意行为上的差异问题1:哪个浏览器符合此处的规范？还是规格太含糊，说不清问题2:如果一种行为

在IE11和WebKee浏览器中，如果你设置了“代码>显示：在包含一个CSS动画中间元素的div上，没有一个//CODE，然后将容器div设置为<代码>显示：块，动画将从头开始重启。

Firefox没有这样做：它的行为就像动画一直在后台运行一样（这对我来说更直观）

哪种行为是正确的

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

问题1:哪个浏览器符合此处的规范？还是规格太含糊，说不清

问题2:如果一种行为或另一种行为是兼容的，是否有修复/解决方法/黑客会迫使不兼容的浏览器也能正常运行

我已经了解到，在上使用

可见性：隐藏

而不是

显示：无

将防止此问题这不是一个选项。

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

下面重现了来自JSFIDLE的代码

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


-JSFIDLE演示
#酒吧{
宽度：100%；
高度：24px；
背景色：#fc0；
}
#棒材收缩{
-moz动画：收缩10s线性；
-moz动画填充模式：正向；
-o动画：收缩10s线性；
-o-动画-填充模式：正向；
-webkit动画：收缩10秒线性；
-webkit动画填充模式：正向；
动画：收缩10秒线性；
动画填充模式：正向；
}
@-moz关键帧收缩{
从{width:100%；}到{width:0%；}
}
@-o关键帧收缩{
从{width:100%；}到{width:0%；}
}
@-webkit关键帧收缩{
从{width:100%；}到{width:0%；}
}
@关键帧收缩{
从{width:100%；}到{width:0%；}
}
$（窗口）。加载（函数（）{
$（“#启动动画”）。单击（函数（）{
美元（“#巴”）.addClass（“收缩”）；
} );
$（“#隐藏容器”）。单击（函数（）{
$（“#容器”）.css（“显示”、“无”）；
} );
$（“#显示容器”）。单击（函数（）{
$（“#容器”）.css（“显示”、“块”）；
} );
});

开始设置黄色条的动画


当动画仍在运行时，在包含的div上设置display:none


将容器设置回“显示：块”


在Webkit和IE11中，动画从头开始。在Firefox中，它的行为就像动画一直在后台运行一样。

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

你能改用不透明度吗？使用

opacity:0

隐藏容器，而不是显示和隐藏以切换显示

设置时使用动画：

使用转换-这只是我尝试过的一种方法：

这里的第二个答案使用

height

将其设置为

，因此如果

visibility

不是规格后的选项，我不确定，但如果元素“超出”文档，那么它为什么要设置动画。当它仍然像能见度和高度一样“处于”状态时，它应该继续运行。