如何使用CSS动画交叉淡入多个文本？

Question

我想交叉淡入淡出多种标题，以三种语言创建欢迎消息。我重叠了标题，首先应该出现英文欢迎消息，然后淡出并显示意大利欢迎消息，然后这一消息消失，西班牙语消息出现......动画重复出现。有点像使用不同语言的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; 
}