多个关键帧动画无法在safari中运行

Question

我正在使用HTML5横幅,它有很多CSS3动画.为了制作可重复使用的关键帧动画,我在单个元素上使用多个动画.除了野生动物园,它的工作完美.

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链接

可行的解决方案:

1. 用另一个/更多元素包装元素并为每个元素添加单个动画.此解决方案需要额外的样式用于包装元素.
2. 将多个动画合并为一个此解决方案会增加复杂性,keyframes rule并且难以为复杂动画维护.
3. 根据另一个stackOverflow帖子的接受答案- You cannot animate same attribute more than once, on a same element, the last one will overwrite other.在我的情况下,仅适用于safari,第一个动画只运行不是第二个.如果我没有在多个动画上设置相同的属性,那么它对于safari(jsfiddle)也很好.这个不适合我,因为我需要在多个动画中制作相同属性的动画.

注意:

虽然我在同一个元素上使用多个动画,但我不是同时制作动画,但每个动画之间都有延迟.

题:

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

Answer 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;
}