多个关键帧动画在 Safari 中不起作用答案

【问题标题】：Multiple keyframe animations not working in safari多个关键帧动画在 Safari 中不起作用
【发布时间】：2016-04-08 12:02:16
【问题描述】：

我正在使用具有大量 CSS3 动画的 HTML5 横幅。为了制作可重复使用的关键帧动画，我在单个元素上使用了多个动画。除了 safari，它运行良好。

CSS：

.text1 {
    -webkit-animation: fadeOutRight 1s 3s forwards;
    animation: fadeOutRight 1s 3s forwards;
}
.text2 {
    -webkit-animation: fadeInLeft 1s 4s both, fadeOutRight 1s 7s forwards;
    animation: fadeInLeft 1s 4s both, fadeOutRight 1s 7s forwards;
}
.text3 {
    -webkit-animation: fadeInLeft 1s 8s both;
    animation: fadeInLeft 1s 8s both;
}

/* fadeInLeft */
@-webkit-keyframes fadeInLeft {
    0% { -webkit-transform: translateX(-100px); opacity: 0; }
    100% { -webkit-transform: translateX(0px); opacity: 1; }
}
@keyframes fadeInLeft {
    0% { transform: translateX(-100px); opacity: 0; }
    100% { transform: translateX(0px); opacity: 1; }
}

/* fadeOutRight */
@-webkit-keyframes fadeOutRight {
    0% { -webkit-transform: translateX(0px); opacity: 1; }
    100% { -webkit-transform: translateX(100px); opacity: 0; }
}
@keyframes fadeOutRight {
    0% { transform: translateX(0px); opacity: 1; }
    100% { transform: translateX(100px); opacity: 0; }
}

jsfiddle link

可行的解决方案：

用另一个/更多元素包裹元素并向每个元素添加单个动画。此解决方案需要额外的包装元素样式。
将多个动画合并为一个，此解决方案增加了 keyframes rule 的复杂性，并且对于复杂的动画来说不容易维护。
根据另一个stackOverflow post 接受的回答—— You cannot animate same attribute more than once, on a same element, the last one will overwrite other。在我的情况下，这只适用于 safari 并且第一个动画只运行不第二个。如果我不在多个动画上为相同的属性设置动画那么它也适合 safari(jsfiddle)。这个不是适合我，因为我需要为相同的属性设置动画多个动画。

注意：

虽然我在同一个元素上使用了多个动画，但我没有同时制作动画，但每个动画之间存在延迟。

问题：

无论动画属性如何，是否可以在同一个元素上使用多个 CSS3 动画？

【问题讨论】：

您找到解决方案了吗？我在这个问题上苦苦挣扎。我有超过 2 个关键帧动画。显然，Safari 想要反转动画。我试过了，但在反转之后似乎只有前两个动画可以正常工作。

标签： html css animation safari css-animations

【解决方案1】：

出于某种原因，Safari 不会通过简写方式来描述动画，例如：

animation: test 1s 2s 3 alternate backwards

需要对其单独列出的属性进行更详细的描述：

.class{
animation-name: bounce;
animation-duration: 4s;
animation-iteration-count: 10;
animation-direction: alternate;
animation-timing-function: ease-out;
animation-fill-mode: forwards;
animation-delay: 2s;
}

【讨论】：