停止動畫循環CS之間

Question

我有這樣的代碼，我想停下來的前5秒環路之間的動畫， 我用Google搜索，發現只需旋轉（無延遲）

.line-1{ 
 
    border-left: 2px solid rgba(255,255,255,.75); 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
\t direction:ltr; 
 
} 
 

 
/* Animation */ 
 
.anim-typewriter{ 
 
\t animation: typewriter 4s steps(44) 1s infinite normal both, 
 
\t \t \t \t blinkTextCursor 500ms steps(44) infinite normal; 
 
} 
 
@keyframes typewriter{ 
 
\t from{width: 0;} 
 
\t to{width: 24em;} 
 
} 
 
@keyframes blinkTextCursor{ 
 
\t from{border-left-color: rgba(255,255,255,.75);} 
 
\t to{border-left-color: transparent;} 
 
}

<p class="line-1 anim-typewriter" style="margin-left:auto;margin-right:auto;">Good News: You Won :)<a href="Awards/"> Get Award </a></p>

Answer 1

您可以在關鍵幀動畫添加另外一個步驟是同前面的步驟：

.line-1 { 
 
    border-left: 2px solid rgba(255, 255, 255, .75); 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
    direction: ltr; 
 
} 
 

 

 
/* Animation */ 
 

 
.anim-typewriter {   
 
    animation: typewriter 8s /* increase to 8s so you have 4s pause */ steps(44) 1s infinite normal both, blinkTextCursor 500ms steps(44) infinite normal; 
 
} 
 

 
@keyframes typewriter { 
 
    0% { 
 
    width: 0; 
 
    } 
 
    50% { 
 
    width: 24em; 
 
    } 
 
    100% { /* 50% of this animation is now a pause */ 
 
    width: 24em; 
 
    } 
 
} 
 

 
@keyframes blinkTextCursor { 
 
    from { 
 
    border-left-color: rgba(255, 255, 255, .75); 
 
    } 
 
    to { 
 
    border-left-color: transparent; 
 
    } 
 
}

<p class="line-1 anim-typewriter" style="margin-left:auto;margin-right:auto;">Good News: You Won :)<a href="Awards/"> Get Award </a></p>

Answer 2

.line-1{ 
 
    border-left: 2px solid rgba(255,255,255,.75); 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
\t direction:ltr; 
 
} 
 

 
/* Animation */ 
 
.anim-typewriter{ 
 
\t animation: typewriter 4s steps(44) 1s 2 normal both, 
 
\t \t \t \t blinkTextCursor 500ms steps(44) 2 normal; 
 
} 
 
@keyframes typewriter{ 
 
\t from{width: 0;} 
 
\t to{width: 24em;} 
 
} 
 
@keyframes blinkTextCursor{ 
 
\t from{border-left-color: rgba(255,255,255,.75);} 
 
\t to{border-left-color: transparent;} 
 
}

<p class="line-1 anim-typewriter" style="margin-left:auto;margin-right:auto;">Good News: You Won :)<a href="Awards/"> Get Award </a></p>