複数のキーフレームアニメーションがサファリで動作しない

Question

CSS3アニメーションがたくさんあるHTML5バナーで作業しています。再利用可能なキーフレームアニメーションを作成するために、私は単一の要素で複数のアニメーションを使用しています。サファリを除いて完璧に動作しています。

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

作業可能ソリューション：

1. ラップ別の持つ要素/より多くの要素&は、各要素に単一のアニメーションを追加します。このソリューションは、ラッパー要素のために特別なスタイリングが必要です。
2. &に複数のアニメーションをマージすると、keyframes ruleの複雑さが増し、複雑なアニメーションでは簡単には維持できません。
3. 別の受け入れられた答えに従ってstackOverflow post - You cannot animate same attribute more than once, on a same element, the last one will overwrite other。 私の場合、サファリの場合は、&最初のアニメーションが実行されていないのは 2番目のものです。複数のアニメーションで同じプロパティをアニメートしないと、サファリ（jsfiddle）でもうまくいきます。 これは私が 複数のアニメーションで同じプロパティをアニメートする必要があるため、私には適していません 。

注：私は、同じ要素に複数のアニメーションを使用していますが、私は同時にアニメーションではないよが

、各アニメーション間の遅延があります。

質問：

それは関係なく、プロパティをアニメーション化するのと同じ要素に複数のCSS3アニメーションを使用することは可能ですか？

Answer 1

はい、同じ要素内に複数のアニメーションを作成し、質問内ですでに行ったようにコンマで区切って指定することができます。

animation: fadeOutRight 1s, fadeInLeft 2s; 

しかし、これらのアニメーションで同じプロパティを使用することはできません。または、カスケードのルールで上書きすることはできません。

最後に、唯一の解決策は、アニメーションをラップまたはマージすることです。

これらのケースでは、同じプロパティで前方、後方、両方を使用した上書きは、アニメーションドキュメントでは指定されていません。

https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode

ターゲットは、実行中に遭遇した最後の（または最初の、または両方）キーフレームで設定された計算された値を保持します。最後のキーフレームは、アニメーション方向とアニメーション反復回数の値に依存します