CSS3アニメーションテキスト。コンテンツの終了を

Question

私は、ウィンドウの端に行くのではなく、アニメーションテキストの最後に境界線に基づいてカーソルを停止しようとしています。私は、コンテナの幅を設定し、テキストの幅を調整しようとしましたが、これは未定義の幅の変数で使用されます。最大幅の代わりに幅を使用して

<div class="type"> 
    <h1>We have some basic text here</h1> 
</div> 


body { background: #333; font-family: "Lato"; color: #fff; } 

div.type { 
    text-align: center; 
    color: #fff; 
    white-space: nowrap; 
} 

.type h1 { 
    overflow: hidden; 
    border-right: .05em solid #aaa; 
    width: auto; 
    text-align: center; 
    margin: 0 auto; 
    animation: 
    type 5s steps(100, end) 
} 

@keyframes type { 
    from { width: 0; } 
    to { width: 100%; } 
} 

Code Pen

Answer 1

。

.type h1 { 
    display: inline-block; <-- added 
    overflow: hidden; 
    border-right: .05em solid #aaa; 
    max-width: auto; 
    text-align: center; 
    margin: 0 auto; 
    animation: 
    type 5s steps(100, end) 
} 

@keyframes type { 
    from { max-width: 0; } 
    to { max-width: 100%; } 
} 

Code Pen