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