How can i crossfade multiple text with CSS animation?

Question

I am trying to crossfade multiple headings to create a welcome message in three languages. I overlapped the headings and first the welcome message in englih should appear, then fade out and the italian welcome message appears, then this one fades out and the spanish message appears...and the animation repeats. Sort of like the Apple iOS welcome message in different languages. I am having trouble understanding how to manage the times of the animation in order for this to happen and the messages not to clash at the same time.

here is my 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

Since you are cycling between three options you can set up your animation to display for one third of the time. Then you can set the duration of all three animations to be the same and just offset the second and third animations by one third and two thirds, respectively. Here's an example on how to do this.

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