Safari动画无法在任何Apple设备上运行

Question

基本上它只是向左滑动而没有淡入淡出。不知道为什么会这样。 CSS代码如下。

我有关键帧：

@-webkit-keyframes heroTitleMove {
0% {
    opacity: 1;
    margin-left:0;
}
25% {
    opacity: 1;
    margin-left:0;
}
31.25% {
    opacity: 0;
    margin-left: 0;
}
32.25% {
    opacity: 0;
    margin-left: -700%
}

    38.5% {
    opacity: 1;
    margin-left: -700%;
}
    63.5% {
    opacity: 1;
    margin-left: -700%;
}
69.75% {
    opacity: 0;
    margin-left: -700%;
}
70.75% {
    opacity: 0;
    margin-left: -1400%
}
    77% {
    opacity: 1;
    margin-left: -1400%;
}
}
@-moz-keyframes heroTitleMove {
0% {
    opacity: 1;
    margin-left:0;
}
25% {
    opacity: 1;
    margin-left:0;
}
31.25% {
    opacity: 0;
    margin-left: 0;
}
32.25% {
    opacity: 0;
    margin-left: -700%
}

    38.5% {
    opacity: 1;
    margin-left: -700%;
}
    63.5% {
    opacity: 1;
    margin-left: -700%;
}
69.75% {
    opacity: 0;
    margin-left: -700%;
}
70.75% {
    opacity: 0;
    margin-left: -1400%
}
    77% {
    opacity: 1;
    margin-left: -1400%;
}
}
@-o-keyframes heroTitleMove {
0% {
    opacity: 1;
    margin-left:0;
}
25% {
    opacity: 1;
    margin-left:0;
}
31.25% {
    opacity: 0;
    margin-left: 0;
}
32.25% {
    opacity: 0;
    margin-left: -700%
}

    38.5% {
    opacity: 1;
    margin-left: -700%;
}
    63.5% {
    opacity: 1;
    margin-left: -700%;
}
69.75% {
    opacity: 0;
    margin-left: -700%;
}
70.75% {
    opacity: 0;
    margin-left: -1400%
}
    77% {
    opacity: 1;
    margin-left: -1400%;
}
}
@keyframes heroTitleMove {
0% {
    opacity: 1;
    margin-left:0;
}
25% {
    opacity: 1;
    margin-left:0;
}
31.25% {
    opacity: 0;
    margin-left: 0;
}
32.25% {
    opacity: 0;
    margin-left: -700%
}

    38.5% {
    opacity: 1;
    margin-left: -700%;
}
    63.5% {
    opacity: 1;
    margin-left: -700%;
}
69.75% {
    opacity: 0;
    margin-left: -700%;
}
70.75% {
    opacity: 0;
    margin-left: -1400%
}
    77% {
    opacity: 1;
    margin-left: -1400%;
}
}

然后我有CSS：

.hero-title {
    margin-left: -1400%;
    opacity: 1;
    -webkit-animation: heroTitleMove 16s;
    -moz-animation:    heroTitleMove 16s;
    -o-animation:      heroTitleMove 16s;
    animation: heroTitleMove 16s;
}

淡出和无法在Safari上运行。它将适用于所有其他浏览器。

请帮忙。

的jsfiddle：

https://jsfiddle.net/9u7b1tkf/