多行輸入效果

Question

我正在爲我的段落添加打字效果。 我發現這個不錯link 它很適合單行文本。但我試圖達到的是一個多行的段落。

white-space:nowrap; 

這個CSS使文成一條線，但是不NOWRAP，效果看起來很奇怪。 任何人有想法？
JSFiddle HTML：

<div class="css-typing">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 
</div> 

CSS：

.css-typing { 
    width: 200px; 
    white-space:nowrap; 
    overflow:hidden; 
    -webkit-animation: type 2s steps(50, end); 
    animation: type 5s steps(50, end); 
} 

@keyframes type { 
    from { width: 0; } 
} 

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

Answer 1

，這可能是你用的持續時間設置四處找什麼

Fiddle

var spans = '<span>' + str.split('').join('</span><span>') + '</span>'; 
$(spans).hide().appendTo('.css-typing').each(function (i) { 
    $(this).delay(100 * i).css({ 
     display: 'inline', 
     opacity: 0 
    }).animate({ 
     opacity: 1 
    }, 100); 
}); 

戲tings

Answer 2

我有同樣的問題終於得到它與純css工作 這裏是3線的源代碼，但它很容易擴展到 儘可能多的，你想。重要的是添加動畫 延遲，下一個動畫填充模式的前進非常重要，因爲我將不透明度 設置爲0，所以在每次動畫完成後線會消失，最後在@keyframes類型2和3中從0到不透明度0到1與1％在1使它看起來像 它不退色。我不是CSS專家，但希望這有助於未來的人。

.css-typing 
{ 
    font-family: "Courier"; 
    font-size: 14px; 
    width: 50em; 
    white-space:nowrap; 
    overflow:hidden; 
    -webkit-animation: type 5s steps(40, end); 
    animation: type 5s steps(40, end); 
} 

.css-typing:nth-child(2) 
{ 
    white-space:nowrap; 
    overflow:hidden;  
    opacity:0; 
    -webkit-animation: type 5s steps(40, end); 
    animation: type2 5s steps(40, end); 
    -webkit-animation-delay: 5s; 
    animation-delay: 5s; 
    -webkit-animation-fill-mode: forwards; 
    animation-fill-mode: forwards; 
} 
.css-typing:nth-child(3){ 
    white-space:nowrap; 
    overflow:hidden; 
    opacity:0; 
    -webkit-animation: type 5s steps(40, end); 
    animation: type3 5s steps(40, end); 
    -webkit-animation-delay: 10s; 
    animation-delay: 10s; 
    -webkit-animation-fill-mode: forwards; 
    animation-fill-mode: forwards; 
} 

@keyframes type{ 
    from { width: 0; } 
} 

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

span{ 
    animation: blink 1s infinite; 
} 

@keyframes type2{ 
0%{width: 0;} 
from {opacity:0;} 
1%{opacity:1;} 
to{opacity:1;} 
100%{opacity:1;} 
} 
@-webkit-keyframes type2{ 
0%{width: 0;} 
from {opacity:0;} 
1%{opacity:1;} 
to{opacity:1;} 
100%{opacity:1;} 
} 
@keyframes type3{ 
    0%{width: 0;} 
    from {opacity:0;} 
1%{opacity:1;} 
to{opacity:1;} 
100%{opacity:1;} 

} 
@-webkit-keyframes type3{ 
    0%{width: 0;} 
    from {opacity:0;} 
1%{opacity:1;} 
to{opacity:1;} 
100%{opacity:1;} 
} 

Answer 3

Full CSS多線型效果與插入符號不同的延遲和速度爲例。

Codepen例子：CSS鍵入多個線https://codepen.io/Bojoer/pen/EZYgeO

<div class="css-typing"> 
    <p> 
    Typed text 1 
    </p> 
    <p> 
    Typed text 2 
    </p> 
    <p> 
    Typed text 3 
    </p> 
</div> 

<style> 
.css-typing p { 
    font-family: "Courier"; 
    font-size: 14px; 
    width: 7.3em; 
    white-space: nowrap; 
    overflow: hidden; 
    -webkit-animation: type 2s steps(40, end); 
    animation: type 2s steps(40, end); 
    border-right: .15em solid orange; 
} 

.css-typing p:nth-child(2) { 
    white-space: nowrap; 
    overflow: hidden; 
    opacity: 0; 
    -webkit-animation: type 2s steps(40, end); 
    animation: type2 2s steps(40, end); 
    -webkit-animation-delay: 2s; 
    animation-delay: 2s; 
    -webkit-animation-fill-mode: forwards; 
    animation-fill-mode: forwards; 
} 

.css-typing p:nth-child(3) { 
    white-space: nowrap; 
    overflow: hidden; 
    opacity: 0; 
    -webkit-animation: type 5s steps(40, end); 
    animation: type3 5s steps(40, end); 
    -webkit-animation-delay: 3s; 
    animation-delay: 3s; 
    -webkit-animation-fill-mode: forwards; 
    animation-fill-mode: forwards; 
} 

@keyframes type { 
    from { 
    width: 0; 
    } 
} 

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

span { 
    animation: blink 1s infinite; 
} 

@keyframes type2 { 
    0% { 
    width: 0; 
    } 
    from { 
    opacity: 0; 
    } 
    1% { 
    opacity: 1; 
    } 
    to { 
    opacity: 1; 
    } 
    100% { 
    opacity: 1; 
    } 
} 

@-webkit-keyframes type2 { 
    0% { 
    width: 0; 
    } 
    from { 
    opacity: 0; 
    } 
    1% { 
    opacity: 1; 
    } 
    to { 
    opacity: 1; 
    } 
    100% { 
    opacity: 1; 
    } 
} 

@keyframes type3 { 
    0% { 
    width: 0; 
    } 
    from { 
    opacity: 0; 
    } 
    1% { 
    opacity: 1; 
    } 
    to { 
    opacity: 1; 
    } 
    100% { 
    opacity: 1; 
    } 
} 

@-webkit-keyframes type3 { 
    0% { 
    width: 0; 
    } 
    from { 
    opacity: 0; 
    } 
    1% { 
    opacity: 1; 
    } 
    to { 
    opacity: 1; 
    } 
    100% { 
    opacity: 1; 
    } 
} 
</style>