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

Question

我正在研究在同一元素上不时有多个动画并切换animation-play-state paused到的项目running.

当我试图添加一个具有动画速记语法的类时,包括animation-play-state:running那时它在IE和Safari中不起作用.

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

jsfiddle链接

但如果我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链接

我在他们刚才提到的备注部分检查了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;
}