CSS3 animierter Text. Stoppen Sie ein Ende des Inhalts

Question

Ich versuche, den Rand-basierten Cursor am Ende des animierten Textes zu stoppen, anstatt zum Rand des Fensters zu gehen. Ich habe versucht, die Breite des Behälters einzustellen und die Textbreite einzustellen, aber das wird mit Variablen unbestimmter Breite benutzt.

<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

max-width anstelle von Breite.

.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