如何使用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; 
}