表格中的打字机 CSS 动画答案

【问题标题】：Typewriter CSS Animation in table表格中的打字机 CSS 动画
【发布时间】：2016-10-13 14:06:08
【问题描述】：

我想在 CSS 中实现打字机效果，我在 CSS Tricks 找到了这篇很棒的文章

我正在修改它并想看看我是否可以实现英雄图像上的内容，此处显示为Codepen

但是，您可以看到闪烁一直到最后。

由于显示设置为table-cell，有没有办法修复，或者这是不可避免的？

【问题讨论】：

我认为这是实现打字机效果的更好方法：stackoverflow.com/a/57887588/2397550

标签： css animation html-table

【解决方案1】：

你可以试试。从介绍容器中删除固定宽度并将其放入描述中。对于居中，您可以将 margin: 0 auto 添加到 intro 中。

#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

【讨论】：

【解决方案2】：

我得到的最接近的方法是更改您的键入关键帧。

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

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

话虽如此，这真的很酷。我不知道你可以做一个纯 CSS 打字效果。我认为做到这一点的唯一方法是像他们在 typeWriter.js 中使用的那样进行繁重的 DOM 操作，如果纯 css 技巧不起作用，这对您来说仍然是一个可行的解决方案。

【讨论】：