CSSを使用してタイピングアニメーションのカーソル位置を制御する

Question

私はCSSアニメーションを使用して自分の名前を入力するように実装しました。この考え方は、入力が完了した文章の最後にカーソルを置いたままでタイピング効果を持たせることです。

しかし、私の場合は、カーソルが画面の最後まで上がってそこを待っていて、私はそれを望んでいません。

私はタイピング効果を達成するためにこれを参照しました。tutorialチュートリアルで見てきたように、文章が完成した後にカーソルが停止し、画面の最後までカーソルが動かなくなります。

マイ同じのためのCSSスニペット：

.titles { 
    position: absolute; 
    top: 15%; 
    left: 0; 
    right: 0; 
} 

h1 { 
    font-size: 4.5em; 
    color: white; 
    font-family: 'Droid Sans', serif; 
    letter-spacing: 2px; 
    pointer-events: none; 
    font-weight: 500; 
    border: 0px; 
    margin: 0px; 
    text-align: center; 
    /*color: #7a9fd0;*/ 
    color: #595959; 
} 

.typewriter h1 { 
    overflow: hidden; /* Ensures the content is not revealed until the animation */ 
    border-right: .15em solid orange; /* The typwriter cursor */ 
    white-space: nowrap; /* Keeps the content on a single line */ 
    margin: 0 auto; /* Gives that scrolling effect as the typing happens */ 
    letter-spacing: 2px; /* Adjust as needed */ 
    animation: 
    typing 4s steps(30, end), 
    blink-caret .75s /*step-end*/steps(50, end) infinite; 
} 

/* The typing effect */ 
@-webkit-keyframes typing { 
    from { width: 0 } 
    to { width: 100% } 
} 

/* The typewriter cursor effect */ 
@-webkit-keyframes blink-caret { 
    from, to { border-color: transparent } 
    50% { border-color: orange; } 
} 

対応のindex.htmlスニペット：

<div class="typewriter"> 
     <h1> Hi! I'm Abhijit Nathwani </h1> 
    </div> 

ページはhttp://abhijitnathwani.github.io

でホストされているあなたも、私に多くのソースコードを確認することができますGitHub Repo here

Answer 1

.typewriter h1{ 
    overflow: hidden; 
    border-right: .15em solid orange; 
    white-space: nowrap; 
    margin: 0 auto; 
    letter-spacing: 2px; 
    animation: typing 1.3s steps(10, end), blink-caret .75s steps(50, end) infinite; 
} 

.typewriter { 
    display: inline-flex; 
} 

これは明らかにタイプライターの幅に問題があります。コンテンツに合わせるために、私はdisplay: inline-flexと設定しました。これによってdiv全体が小さくなり、作家の速度を再調整しなければならなくなりました。それはまだ完璧ではありませんが、私はあなたが正しくそれに合わせて遊ぶことができます。

タイプライターを中央に揃えたい場合は、別のdivにラップしてtext-align: centerに設定します。

Answer 2

私は最終的にこれを行う方法を見つけました。あなたは.center

のクラスに.typewriter周りのdivを追加し、それにこれを追加し.typewriter

text-align: center 
display: inline-block; 

にこれを追加しh1

display: inline 

にこれを追加する必要が

あなたは文句を言わない何かを再調整する必要が

.typewriter h1 { 
    overflow: hidden; /* Ensures the content is not revealed until the animation */ 
    border-right: .15em solid orange; /* The typwriter cursor */ 
    white-space: nowrap; /* Keeps the content on a single line */ 
    margin: 0 auto; /* Gives that scrolling effect as the typing happens */ 
    letter-spacing: 2px; /* Adjust as needed */ 
    animation: 
    typing 4s steps(30, end), 
    blink-caret .75s step-end infinite; 
} 

.typewriter { 
    text-align: center; 
    display: inline-block; 
} 

.center { 
    text-align: center; 
} 

：

私はあなたのgithubのプロジェクトコードは次のようになります

にプルリクエストhereを作りました。