打字机CSS动画在表中

Question

我想在CSS中实现打字机效果，我在CSS Tricks

中找到了这篇很棒的文章

我正在修补它，想看看我是否可以实现英雄形象上的内容，如Codepen

所示

然而，你可以看到眨眼一直到最后。

有没有办法解决，或者这是不可避免的，因为它的显示设置为table-cell？

Answer 1

你可以试试。从介绍容器中删除固定宽度并将其说明。对于居中，您可以添加保证金：0自动进入介绍。

#intro{
  display: table;
  height: 100vh;
  margin: 0 auto;
  .intro-description{
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    width: 100vw;
  }
}

Codepen：http://codepen.io/anon/pen/WGydqj

Answer 2

我最接近的是改变你的打字关键帧。

@keyframes typing {
 from { width: 0 }
 51%{border-right:transparent;}
 100%{border-right:transparent;}
 to { width: 100% }
}

你可以隐藏光标，但我不确定它看起来是否正确，因为在句子末尾重新出现bink / cursor需要一段时间。还有一些响应问题，因为较小的屏幕尺寸闪烁会过早消失，相反的问题......如果这个解决方案适合你，但你仍然需要它的目的，那么你需要制作多个关键帧并通过它们应用它们MQ ...

话虽如此，这真的很酷。我不知道你可以做一个纯粹的CSS输入效果。我认为这样做的唯一方法就是使用类似DOM操作，就像他们在typeWriter.js中使用的那样，如果纯css技巧无法解决，这对你来说仍然是一个可行的解决方案。