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

Posted 2023-03-05

【中文标题】速记中的 CSS3 动画播放状态在 IE 和 Safari 中不起作用

【英文标题】：CSS3 animation-play-state in shorthand is not working in IE and Safari

【发布时间】：2016-04-07 22:29:51

【问题描述】：

我正在开发一个项目，在同一元素上不时有多个动画并将animation-play-statepaused 切换到running。

当我尝试添加具有动画速记语法的类时，包括animation-play-state:running，那么它在 IE 和 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 或者我必须在单独的行中使用它？

【问题讨论】：

您找到解决此问题的方法了吗？它仍然保留在 Safari 9.0.2 中（截至 2016 年 1 月 11 日的最新版本）。

@Jimbo 还没有解决方案 :( 我认为这是一个浏览器错误。

想要提交错误报告？我会很高兴地支持它。另请注意：如果您尝试在 safari 中使用 javascript 设置 animation-delay 属性，它还会用该值覆盖整个 animation 速记属性。我不知道你是否也遇到过这个问题，但这是我的question。

@Jimbo 我发现了另一个关于 safari 上的多个动画的奇怪行为。我几天前发布了它，但仍然没有解决方案。 ***.com/questions/34588977/…

看来你已经成功了，现在走开，给自己泡杯茶；）

【参考方案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;

【讨论】：

我已经在帖子中提到，单独的动画播放状态是一个可行的解决方案，但这不是我想要的。