Animazioni di fotogrammi chiave multipli che non funzionano in safari

Question

Sto lavorando con il banner HTML5 con molta animazione CSS3. Per creare un'animazione di fotogrammi chiave riutilizzabile, sto utilizzando più animazioni su un singolo elemento. Funziona perfettamente tranne il 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

soluzioni praticabili:

1. Avvolgere l'elemento con un altro/altro elemento & aggiungere singola animazione ad ogni elemento. Questa soluzione richiede uno stile extra per l'elemento wrapper.
2. Unisci più animazioni in un'unica & questa soluzione aumenta la complessità dello keyframes rule e non è facilmente gestibile per animazioni complesse.
3. In base alla risposta accettata di un altro stackOverflow post - You cannot animate same attribute more than once, on a same element, the last one will overwrite other. Nel mio caso è vero solo per il safari & la prima animazione è in esecuzione solo con il secondo . Se non anima la stessa proprietà su più animazioni , allora va bene anche per safari (jsfiddle). Questo non è adatto a me perché avrò bisogno di animare la stessa proprietà in animazioni multiple .

Nota:

Anche se sto usando animazione multipla su uno stesso elemento ma non sto animando allo stesso tempo, non v'è ritardo tra ogni animazione.

Domanda:

E 'possibile utilizzare più l'animazione CSS3 sullo stesso elemento indipendentemente animare immobile?

Answer 1

Sì, è possibile avere più animazioni nello stesso elemento, separate da virgole come si fa già nella domanda.

animation: fadeOutRight 1s, fadeInLeft 2s; 

Ma non è possibile utilizzare le stesse proprietà di quelle animazioni o lo stato di cascata sovrascriverà esso.

Come hai detto, le uniche soluzioni all'ultimo punto sono il wrapping o l'unione di animazioni.

La sovrascrittura in avanti, indietro e entrambi sulla stessa proprietà in questi casi non è specificata nella documentazione dell'animazione.

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

Il target manterrà i valori calcolati impostati dall'ultima (o prima, o entrambi) fotogramma chiave incontrati durante l'esecuzione. L'ultimo fotogramma chiave dipende dal valore di animazione-direzione e animazione-numero di iterazione