html - 使用表格单元格内的关键帧创建 ‘typed’ 效果

Question

我正在尝试使用关键帧动画来创建“打字机”效果，其中一个词从左到右缓慢出现，就像打字一样。出于某种原因，这在 <div> 中运行良好。或 <p> ，但不在表格单元格中。在单元格外，动画正常工作，从左到右缓慢地“打字”。然而，在表格单元格内，整个单词会同时出现。在寻找解决方案时，我向关键帧添加了字体颜色更改。在这里，奇怪的是，两种情况下字体的颜色变化都很缓慢，这是应该的。有人能告诉我为什么相同的代码在单元格外有效但在单元格内无效吗？我很难过。感谢您的帮助。

代码如下:

.typing {
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  padding: 6px;
  opacity: 0;
}
.typewriter-ani {
  animation: typewriter;
  animation-duration: 2s;
  animation-timing-function: steps(8);
  animation-direction: normal;
  animation-fill-mode: forwards;
}
@keyframes typewriter {
  0% {
    width: 0;
    opacity: 0;
  }
  1% {
    opacity: 1;
    color: blue;
  }
  100% {
    width: 60px;
    opacity: 1;
    color: red;
  }
}

<p class="typing typewriter-ani">Welcome!</p>
<table border="1">
  <tr>
    <td class="typing typewriter-ani">Welcome!</td>
    <td class="typing typewriter-ani">Welcome!</td>
  </tr>
  <tr>
    <td class="typing typewriter-ani">Welcome!</td>
    <td class="typing typewriter-ani">Welcome!</td>
  </tr>
</table>

Answer 1

看来这与动画中的宽度规则有关。我的猜测是当涉及到 overflow: hidden 并将宽度调整为小于其内容时，表格单元格的操作方式与 block 级元素不同。

您可以通过将您希望在表格单元格内的 block 级元素中显示为“键入”的任何元素包装起来并对其应用样式来解决此问题。

.typing {
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  padding: 6px;
  opacity: 0;
}
.typewriter-ani {
  margin: 0;
  
  animation: typewriter;
  animation-duration: 2s;
  animation-timing-function: steps(8);
  animation-direction: normal;
  animation-fill-mode: forwards;
}
@keyframes typewriter {
  0% {
    width: 0;
    opacity: 0;
  }
  1% {
    opacity: 1;
    color: blue;
  }
  100% {
    width: 60px;
    opacity: 1;
    color: red;
  }
}

<p class="typing typewriter-ani">Welcome!</p>
<table border="1">
    <tr>
        <td><p class="typing typewriter-ani">Welcome!</p></td>
        <td class="typing typewriter-ani">Welcome!</td>
    </tr>
    <tr>
        <td class="typing typewriter-ani">Welcome!</td>
        <td class="typing typewriter-ani">Welcome!</td>
    </tr>
</table>