Wie kann ich mehrere Texte mit CSS-Animation überblenden?

Question

Ich versuche, mehrere Überschriften zu überblenden, um eine Willkommensnachricht in drei Sprachen zu erstellen. Ich überlagerte die Überschriften und zuerst sollte die Willkommensnachricht in Englisch erscheinen, dann ausgeblendet werden und die italienische Begrüßungsnachricht erscheint, dann wird diese ausgeblendet und die spanische Nachricht erscheint ... und die Animation wiederholt sich. So ähnlich wie die Apple iOS Willkommensnachricht in verschiedenen Sprachen. Ich habe Probleme zu verstehen, wie die Zeiten der Animation verwaltet werden, damit dies geschieht und die Nachrichten nicht gleichzeitig kollidieren.

hier ist mein Code:

https://jsfiddle.net/1p7z4v0e/

<h1 class="text-animated-one">Welcome</h1> 
<h1 class="text-animated-two">Benvenuti</h1> 
<h1 class="text-animated-three">Bienvenidos</h1> 

/* Welcome Message FadeIn Effect */ 
/* Keyframes */ 
/* Chrome */ 
@-webkit-keyframes fadeIn { from { opacity:0; opacity: 1\9; /* IE9 only */ } to { opacity:1; } } 
/* Firefox */ 
@-moz-keyframes fadeIn { from { opacity:0; opacity: 1\9; /* IE9 only */ } to { opacity:1; } } 
.text-animated-one, .text-animated-two, .text-animated-three { 
    position: absolute; 
} 
.text-animated-one 
{ 
    opacity:0; 
    -webkit-animation:fadeIn ease-in 1s infinite; 
    -moz-animation:fadeIn ease-in 1s infinite; 
    animation:fadeIn ease-in 1s infinite; 

    -webkit-animation-fill-mode:forwards; 
    -moz-animation-fill-mode:forwards; 
    animation-fill-mode:forwards; 

    -webkit-animation-duration:10s; 
    -moz-animation-duration:10s; 
    animation-duration:10s; 

    -webkit-animation-delay: 0.7s; 
    -moz-animation-delay: 0.7s; 
    animation-delay: 0.7s; 
} 

.text-animated-two 
{ 
    opacity:0; 
    -webkit-animation:fadeIn ease-in 20s infinite; 
    -moz-animation:fadeIn ease-in 20s infinite; 
    animation:fadeIn ease-in 20s infinite; 

    -webkit-animation-fill-mode:forwards; 
    -moz-animation-fill-mode:forwards; 
    animation-fill-mode:forwards; 

    -webkit-animation-duration:10s; 
    -moz-animation-duration:10s; 
    animation-duration:10s; 

    -webkit-animation-delay: 20s; 
    -moz-animation-delay: 20s; 
    animation-delay: 20s; 
} 

.text-animated-three 
{ 
    opacity:0; 
    -webkit-animation:fadeIn ease-in 20s infinite; 
    -moz-animation:fadeIn ease-in 20s infinite; 
    animation:fadeIn ease-in 20s infinite; 

    -webkit-animation-fill-mode:forwards; 
    -moz-animation-fill-mode:forwards; 
    animation-fill-mode:forwards; 

    -webkit-animation-duration:10s; 
    -moz-animation-duration:10s; 
    animation-duration:10s; 

    -webkit-animation-delay: 40s; 
    -moz-animation-delay: 40s; 
    animation-delay: 40s; 
} 

Answer 1

Da Sie zwischen drei Optionen sind Radfahren Sie Ihre Animation einrichten können für ein Drittel der Zeit anzuzeigen. Dann können Sie die Dauer aller drei Animationen gleich einstellen und die zweite und dritte Animation um ein Drittel bzw. zwei Drittel versetzen. Hier ist ein Beispiel, wie man das macht.

/* Welcome Message FadeIn Effect */ 
/* Keyframes */ 
/* Chrome */ 
@-webkit-keyframes fadeIn { 
    0% { opacity:0; opacity: 1\9; /* IE9 only */ } 
    33% { opacity:1; } 
    66% { opacity: 0 } 
} 

/* Firefox */ 
@-moz-keyframes fadeIn { 
    0% { opacity:0; opacity: 1\9; /* IE9 only */ } 
    33% { opacity:1; } 
    66% { opacity: 0 } 
} 

.text-animated-one, .text-animated-two, .text-animated-three { 
    position: absolute; 
} 

.text-animated-one 
{ 
    opacity:0; 
    -webkit-animation:fadeIn ease-in 9s infinite; 
    -moz-animation:fadeIn ease-in 9s infinite; 
    animation:fadeIn ease-in 9s infinite; 

    -webkit-animation-fill-mode:forwards; 
    -moz-animation-fill-mode:forwards; 
    animation-fill-mode:forwards; 
} 

.text-animated-two 
{ 
    opacity:0; 
    -webkit-animation:fadeIn ease-in 9s infinite; 
    -moz-animation:fadeIn ease-in 9s infinite; 
    animation:fadeIn ease-in 9s infinite; 

    -webkit-animation-fill-mode:forwards; 
    -moz-animation-fill-mode:forwards; 
    animation-fill-mode:forwards; 

    -webkit-animation-delay: 3s; 
    -moz-animation-delay: 3s; 
    animation-delay: 3s; 
} 

.text-animated-three 
{ 
    opacity:0; 
    -webkit-animation:fadeIn ease-in 9s infinite; 
    -moz-animation:fadeIn ease-in 9s infinite; 
    animation:fadeIn ease-in 9s infinite; 

    -webkit-animation-fill-mode:forwards; 
    -moz-animation-fill-mode:forwards; 
    animation-fill-mode:forwards; 

    -webkit-animation-delay: 6s; 
    -moz-animation-delay: 6s; 
    animation-delay: 6s; 
}