Как можно перефразировать несколько текстов с помощью CSS-анимации?

Question

Я пытаюсь перечеркнуть несколько заголовков, чтобы создать приветственное сообщение на трех языках. Я перекрывал заголовки, и сначала появляется приветственное сообщение в englih, затем исчезает и появляется приветственное приветственное сообщение, затем оно исчезает и появляется испанское сообщение ... и повторение анимации повторяется. Похоже на приветственное сообщение Apple iOS на разных языках. У меня возникли проблемы с пониманием того, как управлять временем анимации, чтобы это произошло, и сообщения не сталкивались в одно и то же время.

вот мой код:

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

Так как вы езда на велосипеде между тремя параметрами, которые вы можете настроить анимацию для отображения в течение одной трети времени. Затем вы можете установить продолжительность всех трех анимаций одинаковыми и просто компенсировать вторую и третью анимации на одну треть и две трети соответственно. Вот пример того, как это сделать.

/* 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; 
}