CSS3打字機效果

Question

我這里有一個CSS3代碼，它具有打字機效果。

我想要做的是為<p></p>行設置動畫，然后將其刪除，然后為下一個<p></p>設置動畫。 我已經把它做到了第一行。 但是如何刪除第一行然后進入下一行。

這是迄今為止的代碼。

 .css-typing { width: 10em; white-space: nowrap; overflow: hidden; -webkit-animation: type 5s steps(50, end); animation: type 5s steps(50, end); } @keyframes type { from { width: 0; } } @-webkit-keyframes type { from { width: 0; } } 

 <p class='css-typing'>To save their world</p> <p class='css-typing'>They must come to ours</p> <p class='css-typing'>Spongebob out of water</p> 

Answer 1

根據您的問題，我假設您不是在尋找自然打字機效果，而是更多關於如何將您已經創建的內容擴展到第2行，第3行，並在第二行是動畫時隱藏第一行等等。 如果情況確實如此，請進一步閱讀。

由於您必須同時為多個元素設置動畫，因此需要添加延遲。 應該計算每個元素的延遲，使得所有先前元素在動畫開始時為當前元素完成動畫。 因此，例如，第一個元素不需要延遲，但第二個元素需要5秒延遲，第三個元素需要10秒延遲，依此類推。 這些延遲可以通過使用nth-child選擇器應用於元素，如下面的代碼片段所示。

最后，由於您在下一個元素動畫時要查找前一行消失，因此元素的默認/原始寬度應為0，並且應該設置為10em的動畫。

 .css-typing { width: 0; white-space: nowrap; overflow: hidden; } @keyframes type { to { width: 10em; } } @-webkit-keyframes type { to { width: 10em; } } p{ -webkit-animation: type 5s steps(50, end); animation: type 5s steps(50, end); } p:nth-child(2){ -webkit-animation-delay: 5s; animation-delay: 5s; } p:nth-child(3){ -webkit-animation-delay: 10s; animation-delay: 10s; } 

 <p class='css-typing'>To save their world</p> <p class='css-typing'>They must come to ours</p> <p class='css-typing'>Spongebob out of water</p> 

Answer 2

我會將你的動畫拆分為3以添加延遲，然后將所有<p>相同的位置添加到動畫中的“隱藏”屬性：

.container {position:relative;}
.css-typing {
  width: 10em;
  white-space: nowrap;
  overflow: hidden;
  opacity:0;
  position:absolute;
  top:0;
  left:0;
}
.x1 {animation: type1 5s steps(50, end);}
@keyframes type1 {
    0% {width: 0; opacity:1}
    99% {width: 10em; opacity:1}  
    100% {opacity:0;}
}
.x2 {
    animation: type2 5s steps(50, end);
    animation-delay:5s;
}
@keyframes type2 {
    0% {width: 0; opacity:1}
    99% {width: 10em; opacity:1}  
    100% {opacity:0;}
}
.x3 {
    animation: type3 5s steps(50, end);
    animation-delay:10s;
}
@keyframes type3 {
    0% {width: 0; opacity:1}
    99% {width: 10em; opacity:1}  
    100% {opacity:0;}
}

的jsfiddle

編輯為無限的bucle（作為Khalil的請求）你必須添加infinite交互計數並扭曲你的動畫時間和扇區，以便文本不重疊。

就像在這個FIDDLE中一樣

Answer 3

你可以嘗試這樣 -

 p{ color: #000; font-size: 20px; margin: 10px 0 0 10px; white-space: nowrap; overflow: hidden; width: 30em; animation: type 4s steps(60, end); } p:nth-child(2){ animation: type2 4s steps(30, end); } p:nth-child(3){ animation: type3 6s steps(60, end); } @keyframes type{ from { width: 0; } } @keyframes type2{ 0%{width: 0;} 50%{width: 0;} 100%{ width: 100; } } @keyframes type3{ 0%{width: 0;} 50%{width: 0;} 100%{ width: 100; } } 

 <p class='css-typing'>To save their world</p> <p class='css-typing'>They must come to ours</p> <p class='css-typing'>Spongebob out of water</p>