延遲在進出CSS3動畫無限褪色

Question

我工作在以下：

Fiddle Code

這裏是HTML：

<div id="animation"> 
    <ul> 
    <li>this is</li> 
    <li>CSS3 looped</li> 
    <li>animation</li> 
    </ul> 
</div> 

這是CSS：

#animation { 
    height: 100%; 
    width: 100%; 
} 
#animation ul { 
    position: relative; 
    text-align: center; 
    width: 100%; 
} 
#animation li { 
    position: absolute; 
    left:0; 
    top:0; 
    width: 100%; 
    opacity: 0; 
    padding: 10px; 
} 
#animation li:nth-of-type(1) { 
    -webkit-animation: fadein 6s ease-in-out -4s infinite alternate; 
    -moz-animation: fadein 6s ease-in-out -4s infinite alternate; 
    animation:fadein 6s ease-in-out -4s infinite alternate; 
} 
#animation li:nth-of-type(2) { 
    -webkit-animation: fadein 6s ease-in-out 0s infinite alternate; 
    -moz-animation: fadein 6s ease-in-out 0s infinite alternate; 
    animation: fadein 6s ease-in-out 0s infinite alternate; 
} 
#animation li:nth-of-type(3) { 
    -webkit-animation: fadein 6s ease-in-out 4s infinite alternate; 
    -moz-animation: fadein 6s ease-in-out 4s infinite alternate; 
    animation: fadein 6s ease-in-out 4s infinite alternate; 
} 
@-webkit-keyframes fadein { 
    0% { 
     opacity: 0; 
    } 
    66% { 
     opacity: 0; 
    } 
    76% { 
     opacity: 1; 
    } 
    100% { 
     opacity: 1; 
    } 
} 
@-moz-keyframes fadein { 
    0% { 
     opacity: 0; 
    } 
    66% { 
     opacity: 0; 
    } 
    76% { 
     opacity: 1; 
    } 
    100% { 
     opacity: 1; 
    } 
} 
@keyframes fadein { 
    0% { 
     opacity: 0; 
    } 
    66% { 
     opacity: 0; 
    } 
    76% { 
     opacity: 1; 
    } 
    100% { 
     opacity: 1; 
    } 
} 

我是新來的CSS3和代碼，我想堅持段落而不是幾個字。我的問題是，當文本淡入時，如何將它保留在屏幕上例如10秒鐘，以便有人可以閱讀並淡入下一段。

我已經使用了持續時間和延遲，似乎沒有按照我想要的方式工作。任何幫助都會很棒。

Answer 1

該方法非常簡單，但您需要按照Paulie_D的評論所述進行數學運算。我會留下是否使用它的選擇。就我個人而言，我沒有看到這種方法有什麼問題，或者提供了否定的任何複雜性。要淡入/淡出的元素是靜態的。

總的做法如下：

• 我們有3個單元/段落的例子的目的，我打算讓他們淡入前3秒，繼續擔任-是下一個10秒鐘，最後淡出。所以，對於每個元素，我們在動畫時間內總共需要16秒。

• 雖然第一個元素已完成動畫，第二個或第三個元素正在動畫，但前一個元素應保持最終狀態（即淡出）。爲了實現這一目標，需要做以下的需求：

  • 設置animation-duration的所有元素，使得它的總和的動畫時間的所有元素。這裏是3 * 16s = 48s。
  • 設置keyframes，使得每個元素在整個持續時間內保持空閒狀態，因爲在這個32s間隙中，其他兩個元素將進行動畫製作。這是通過在動畫總持續時間的33％內完成淡入，中止和淡出來實現的。
  • 設置第二個元素的animation-delay爲16s（因爲它必須在第一個元素完成後啓動）並且第三個元素爲32s（因爲前兩個元素應該完成）。
• 來到keyframes規則本身，正如我前面所說，整個動畫的一個元素應該在整個持續時間的33%之內完成。所以在6.25%（大概3s馬克），我們淡入元素然後到26.75%（這是直到13s馬克）我們使它在opacity: 1然後在33%（即16s馬克）我們完全淡出它。

#animation { 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 
#animation ul { 
 
    position: relative; 
 
    text-align: center; 
 
    width: 100%; 
 
} 
 
#animation li { 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    width: 100%; 
 
    opacity: 0; 
 
    padding: 10px; 
 
} 
 
#animation li:nth-of-type(1) { 
 
    animation: fadein 48s ease-in-out infinite; 
 
} 
 
#animation li:nth-of-type(2) { 
 
    animation: fadein 48s ease-in-out 16s infinite; 
 
} 
 
#animation li:nth-of-type(3) { 
 
    animation: fadein 48s ease-in-out 32s infinite; 
 
} 
 
@keyframes fadein { 
 
    0% { 
 
    opacity: 0; 
 
    } 
 
    6.25% { /* 3s for fade in */ 
 
    opacity: 1; 
 
    } 
 
    26.75% { /* roughly 10s for stay as-is */ 
 
    opacity: 1; 
 
    } 
 
    33% { /* 3s for fade out */ 
 
    opacity: 0; 
 
    } 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script> 
 
<div id="animation"> 
 
    <ul> 
 
    <li>This is</li> 
 
    <li>CSS3 looped</li> 
 
    <li>animation</li> 
 
    </ul> 
 
</div>

Answer 2

這個例子的基本的CSS代碼如下：

.visible { 
    visibility: visible; 
    opacity: 1; 
    transition: opacity 2s linear; 
} 
.hidden { 
    visibility: hidden; 
    opacity: 0; 
    transition: visibility 0s 2s, opacity 2s linear; 
} 

當顯示元素（通過切換到可見的類），我們希望能見度：可見立即踢，所以它的確定僅轉移不透明屬性。當隱藏元素（通過切換到隱藏類）時，我們希望延遲可見性：隱藏聲明，以便我們可以首先看到淡出過渡。我們通過聲明可見性屬性的過渡來做到這一點，其持續時間爲0，延遲時間爲0。

在淡出過渡結束時，我們要從流中移除隱藏的元素，以便它不會在頁面中間留下空白區域。可悲的是，我們沒有太多選擇這裏：

• 顯示：無不起作用，因爲它會被立即應用， 試圖像我們，能見度將無法正常工作沒有耽誤它;

• position：absolute具有完全相同的問題;

• 這並不理想，但我們可以使用margin-top（它可以被轉換，因此延遲 ）。

爲了使用邊距隱藏元素，我們需要有一個稍微更豐富的HTML結構：

<div class="visible"> 
    <div>…</div> 
</div> 

而且我們的CSS代碼變得更加複雜：

.visible, 
.hidden { 
    overflow: hidden; 
    /* This container should not have padding, borders, etc. */ 
} 
.visible { 
    visibility: visible; 
    opacity: 1; 
    transition: opacity 2s linear; 
} 
.hidden { 
    visibility: hidden; 
    opacity: 0; 
    transition: visibility 0s 2s, opacity 2s linear; 
} 
.visible > div, 
.hidden > div { 
    /* Put any padding, border, min-height, etc. here. */ 
} 
.hidden > div { 
    margin-top: -10000px; 
    transition: margin-top 0s 2s; 
}