タイプライターCSSアニメーションは、テーブル

Question

に私はCSSでタイプライターの効果を実現したいと私はそれを周りいじったCSS Tricks

で、この偉大な記事を見つけたと私はヒーロー像にどうなるかを実装できるかどうかを確認したかったですここに表示されているのはCodepen

ですが、点滅が最後まで表示されていることがわかります。

表示方法がtable-cellに設定されているので、修正する方法はありますか、これは避けられませんか？

Answer 1

これを試すことができます。イントロコンテナから固定幅を削除し、これを説明に付けます。そしてセンタリングのために、マージンを追加することができます：0 auto in intro。

#intro{ 
    display: table; 
    height: 100vh; 
    margin: 0 auto; 
    .intro-description{ 
    display: table-cell; 
    vertical-align: middle; 
    text-align: center; 
    width: 100vw; 
    } 
} 

Codepen：私はあなたのタイピングのキーフレームを変更していたしまったhttp://codepen.io/anon/pen/WGydqj

Answer 2

最も近いです。

@keyframes typing { 
from { width: 0 } 
51%{border-right:transparent;} 
100%{border-right:transparent;} 
to { width: 100% } 
} 

あなたはすべての道をオフに行くから、カーソルを非表示にすることができますが、私はそれが文の終わりに再び現れビンク/カーソルのためにしばらくかかるため、それはかなり右に見えるかわかりません。また、画面サイズが小さくなると点滅が早すぎて消えてしまいますが、逆の問題です...この解決方法がまだ効果的ですが、それでもなお必要がある場合は、複数のキーフレームを作成して適用する必要がありますmq ...

これは本当にクールです。私はあなたが純粋なCSSタイピング効果を行うことができるかどうかはわかりませんでした。これを行う唯一の方法は、typeWriter.jsで使用するような重いDOM操作であり、純粋なCSSのトリックがうまくいかない場合でも、あなたのために実行可能な解決策であるかもしれないと思っていました。