使用HTML5和CSS3來切換'幀'這麼多秒，如閃存

Question

我想要使用HTML5和CSS3來加載MP3/OGG，它將與正在顯示的文本一起閱讀。當它完成屏幕上的內容時，它切換到新的屏幕。

因此，第一個屏幕會在MP3開始時加載，並保持到12秒（這是MP3需要多長時間才能讀取它）。在12秒後，它切換到下一個文本，這將保持到22秒。總共有7段。

下面是一些編碼，我發現一個例子，但我不能編輯它與我需要的時間正常工作。在HTML的

基礎：

<audio controls="controls" preload="auto" autoplay="autoplay"> 
    <source src="valmp3.ogg" type="audio/ogg" /> 
    <source src="valmp3.mp3" type="audio/mpeg" /> 
     Your browser does not support the audio element. 
</audio> 
<ul> 
    <li>Paragraph 1</li> 
    <!--^^Should load when the mp3 starts and stay for 12 seconds^^--> 

    <li>Paragraph 2</li> 
    <!--^^Should load at 12 seconds and stay until 22 seconds^^--> 

    <li> Paragraph 3</li> 

    <li> Paragraph 4</li> 

    <li>Paragraph 5</li> 

    <li>Paragraph 6</li> 

    <li>Paragraph 7</li> 
</ul> 

的CSS：

* { 
    margin: 0; 
    padding: 0; 
} 
body{ 
    background: #422A20; 
    font-size: 2em; 
} 
ul { 
    height: 100%; 
    left: 0; 
    position: fixed; 
    top: 0; 
    width: 100%; 
    z-index: 0; 
} 
ul li { 
    color: transparent; 
    font-size: 250%; 
    position: absolute; 
    text-align: center; 
    top: 35%; 
    width: 100%; 
} 

/* delay between each text */ 
ul li:nth-child(1), 
ul li:nth-child(2), 
ul li:nth-child(3), 
ul li:nth-child(4) { 
    -moz-animation: blurFadeInOut 3s ease-in backwards; 
    -ms-animation: blurFadeInOut 3s ease-in backwards; 
    -webkit-animation: blurFadeInOut 3s ease-in backwards; 
} 
ul li:nth-child(1) { 
    -webkit-animation-delay: 0s; 
    -moz-animation-delay: 0s; 
    -ms-animation-delay: 0s; 
    animation-delay: 0s; 
} 
ul li:nth-child(2) { 
    -webkit-animation-delay: 3s; 
    -moz-animation-delay: 3s; 
    -ms-animation-delay: 3s; 
    animation-delay: 3s; 
} 
ul li:nth-child(3) { 
    -webkit-animation-delay: 6s; 
    -moz-animation-delay: 6s; 
    -ms-animation-delay: 6s; 
    animation-delay: 6s; 
} 
ul li:nth-child(4) { 
    -webkit-animation-delay: 9s; 
    -moz-animation-delay: 9s; 
    -ms-animation-delay: 9s; 
    animation-delay: 9s; 
} 
ul li:nth-child(5) { 
    -webkit-animation-delay: 12s; 
    -moz-animation-delay: 12s; 
    -ms-animation-delay: 12s; 
    animation-delay: 12s; 
} 
/* delay for the last slide */ 
ul li:nth-child(5) span { 
    -webkit-animation: blurFadeIn 3s ease-in 12s backwards; 
    -moz-animation: blurFadeIn 1s ease-in 12s backwards; 
    -ms-animation: blurFadeIn 3s ease-in 12s backwards; 
    animation: blurFadeIn 3s ease-in 12s backwards; 
    color: transparent; 
    text-shadow: 0px 0px 1px #fff; 
} 
ul li:nth-child(5) span:nth-child(2) { 
    -webkit-animation-delay: 13s; 
    -moz-animation-delay: 13s; 
    -ms-animation-delay: 13s; 
    animation-delay: 13s; 
} 
ul li:nth-child(5) span:nth-child(3) { 
    -webkit-animation-delay: 14s; 
    -moz-animation-delay: 14s; 
    -ms-animation-delay: 14s; 
    animation-delay: 14s; 
} 

代碼爲動畫：

@-moz-keyframes blurFadeInOut { 
    0% { opacity: 0; text-shadow: 0px 0px 40px #fff; -moz-transform: scale(1.3); } 
    25%, 75% { opacity: 1; text-shadow: 0px 0px 1px #fff; -moz-transform: scale(1); } 
    100% { opacity: 0; text-shadow: 0px 0px 50px #fff; -moz-transform: scale(0); } 
} 
@-webkit-keyframes blurFadeInOut { 
    0% { opacity: 0; text-shadow: 0px 0px 40px #fff; -webkit-transform: scale(1.3); } 
    25%, 75% { opacity: 1; text-shadow: 0px 0px 1px #fff; -webkit-transform: scale(1); } 
    100% { opacity: 0; text-shadow: 0px 0px 50px #fff; -webkit-transform: scale(0); } 
} 
@keyframes blurFadeInOut { 
    0% { opacity: 0; text-shadow: 0px 0px 40px #fff; transform: scale(1.3); } 
    25%, 75% { opacity: 1; text-shadow: 0px 0px 1px #fff; transform: scale(1); } 
    100% { opacity: 0; text-shadow: 0px 0px 50px #fff; transform: scale(0); } 
} 

Answer 1

我想你想是這樣的：http://jsfiddle.net/VL3Ub/（可能有不同的效果）

我將它簡化爲最簡單的形式。

<ul> 
    <li>Hello (hello hello hello)</li> 
    <li>Is there anybody in there?</li> 
    <li>Just nod if you can hear me.</li> 
</ul>​ 

CSS

@-webkit-keyframes fadeInOut{ 
    from,to{opacity:0;} 
    25%,75%{opacity:1;} 
} 

ul li{ 
    opacity:0; 
    -webkit-animation: fadeInOut 4s ease-in; 
} 

ul li:nth-child(2){ 
    -webkit-animation-delay:4s; 
} 
ul li:nth-child(3){ 
    -webkit-animation-delay:8s; 
} 

所以，每個L1將淡入1秒鐘，是2秒可見的，則淡出爲1秒。然後，我通過設置動畫時間的延遲>=來簡單地錯開動畫。

在考慮嵌套動畫時，管理所有內容可能會變得更加棘手，但它應該遵循相同的原則。

我不確定這是否回答您的問題，或者您指向正確的方向，請告訴我是否不正確。 :)

您可以做到這一點，使動畫持續更長的時間。我建議將blurFadeInOut的可見步驟調整爲10%,90%，或者在更長的時間內添加第二個動畫版本。

ul li:nth-child(1) { 
    -webkit-animation-duration:12s; 
    -webkit-animation-delay: 0s; 
} 
ul li:nth-child(2) { 
    -webkit-animation-duration:10s;  
    -webkit-animation-delay: 12s; 
} 
ul li:nth-child(3) { 
    -webkit-animation-delay: 22s; 
} 
ul li:nth-child(4) { 
    -webkit-animation-delay: 25s; 
}