CSS3动画播放状态的简写在IE和Safari中不起作用

Question

我正在处理同时在同一元素上有多个动画的项目，并将animation-play-state paused切换为running。

当我尝试添加一个包含animation-play-state:running动画速记语法的类时，它在IE＆amp; Safari浏览器。

.fadein-left {
    -webkit-animation: fadeInLeft 1s 2s both running;
    animation: fadeInLeft 1s 2s both running;
}

jsfiddle link

但如果我在单独的行中使用animation-play-state，那么它在所有浏览器中都能正常工作。

.fadein-left {
    -webkit-animation: fadeInLeft 1s 2s both;
    animation: fadeInLeft 1s 2s both;
    -webkit-animation-play-state: running;
    animation-play-state: running;
}

jsfiddle link

我在刚刚提到的备注部分的msdn上检查了动画属性 -

  

但是，动画属性不指定animation-play-state属性的值。

是否可以在速记动画中使用animation-play-state，或者我必须在单独的行中使用它？

Answer 1

试试这个：

div {
    width: 100px;
    height: 100px;
    background: red;
    position: relative;
    -webkit-animation: mymove 5s;  /* Chrome, Safari, Opera */
    -webkit-animation-play-state: paused;  /* Chrome, Safari, Opera */
    animation: mymove 5s;
    animation-play-state: paused;
}