CSS動畫在一段時間後開始

Question

我一直在試圖弄清楚這一段時間，但目前爲止還沒有成功：我想使用CSS運行一個打字動畫。動畫必須在7秒後開始。我無法弄清楚如何做到這一點。我的代碼如下所示：

HTML

<div class='background-fullwidth'>  
    <div class="css-typing"> 
     This text will pop up using an typewriting effect 
    </div>   
</div> 

CSS

.css-typing { 
    width: 360px; 

    white-space: nowrap; 
    overflow: hidden; 
    -webkit-animation: type 3s steps(50, end); 
    animation: type 3s steps(55, end); 
    -o-animation: type 5s steps(50, end); 
    -moz-animation: type 3s steps(55, end); 

    padding: 10px; 
} 

.background-fullwidth { 
    width: 400px; 
    background-color: rgba(0, 50, 92, 0.7); 
}  

@keyframes type { 
    from { width: 0; } 
    to { width: 360px; } 
} 

@-moz-keyframes type { 
    from { width: 0; } 
    to { width: 360px; } 
} 

@-webkit-keyframes type { 
    from { width: 0; } 
    to { width: 360px; } 
} 

有誰知道如何添加此計時器 - 讓我們說的動畫有7秒鐘後開始？從第二個到第七個只需要顯示包裹的DIV（藍色背景）。

小提琴看起來是這樣的： CSS Animation

Answer 1

你必須使用3種不同的動畫屬性。

1. 動畫延遲：它可以幫助你實現該解決方案爲7秒之後開始動畫的基本問題。
2. animation-iteration-count;該屬性讓您決定動畫重複的次數。將其設置爲1會將其限制爲單個動畫實例。
3. animation-fill-mode：將此屬性設置爲forward將確保寬度在動畫結束時保持爲320。

CSS

animation-delay: 2s; 
    animation-iteration-count: 1; 
    animation-fill-mode: forwards; 
    width: 0; // So that the animation starts from 0 

審查在https://jsfiddle.net/kaminasw/at6mbxyr/

Answer 2

您需要使用animation-delay對於這樣的：

.css-typing { 
    --other properties-- 
    -webkit-animation-delay: 7s; /* Safari 4.0 - 8.0 */ 
    animation-delay: 7s; 
} 

Answer 3

使用animation-delay屬性：

animation-delay: 2s; 
-webkit-animation-delay: 2s; 

Answer 4

小提琴有一個屬性animation-delay

提供這個屬性類的元素。

檢查下面的示例動畫7秒

http://codepen.io/anon/pen/dNqmvB