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