css - 複数のテキストを CSS アニメーションでクロスフェードするにはどうすればよいですか?

Question

複数の見出しをクロスフェードして、3 つの言語でウェルカム メッセージを作成しようとしています。見出しを重ねると、最初に英語のウェルカム メッセージが表示され、次にフェード アウトしてイタリア語のウェルカム メッセージが表示され、次にこれがフェード アウトしてスペイン語のメッセージが表示され、アニメーションが繰り返されます。さまざまな言語での 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;
}