CSS动画平滑可变宽度答案

【问题标题】：CSS animation smooth with variable widthCSS动画平滑可变宽度
【发布时间】：2017-07-27 00:41:17
【问题描述】：

我想知道如何在 CSS 和anime.js 中制作类似THIS GIF 的东西。我希望它是平滑的，从一个只有辅音的单词开始，然后平滑地打开空间以允许一个元音出现，一次一个（或全部）。

线索是单词居中，无论它有多长或包含多少个字母。当您添加一个字母（带有动画）时，它应该保持居中并平滑地打开空间以淡入下一个字母。

我根本不是专家，我什至不知道如何开始。除了一次将每个字母分别移动 1 px 之外，那将是几个小时的工作，并且不能重复用于其他单词（例如 i 小于 w 或 s）

这在 css 中甚至可能吗？提前感谢您的意见或建议。

【问题讨论】：

为什么要投反对票而不让我知道为什么？这对任何人都没有帮助..
可能是因为您没有向我们提供有关您已经尝试过的任何线索。您不必成为专家即可开始这方面的工作，但社区有一定程度的期望，即您在询问是否有可能之前做出努力。如果您不向我们提供代码（最好在您的答案中的 sn-p 中），我们也无法帮助您调试您的工作，SO 也不是代码编写服务。阅读how to create an MCVE 了解更多信息。（注意：如果您想知道，我不是反对者）。
@chazsolo 事情是我不知道如何开始，甚至一点也不知道，除了逐个像素。还是谢谢

标签： css animation

【解决方案1】：

如果您对固定空格字母感到满意，那么您可以在纯 CSS 中做到这一点：fiddle。

<p>
  <span>N</span>
  <span class="vowel">i</span>
  <span>c</span>
  <span class="vowel">o</span>
  <span>l</span>
  <span class="vowel">a</span>
  <span>s</span>
</p>
<style>
  p span {
    display:inline-block;
    width:0.7em;
    text-align:center;
  }

  .vowel {
    opacity:0;
    width:0em;
    animation:enter 0.6s 0.4s forwards;
  }
  .vowel ~ .vowel {
    animation-delay:0.6s;
  }
  .vowel ~ .vowel ~ .vowel {
    animation-delay:0.9s;
  }

  @keyframes enter {
    0% { width:0; opacity:0; }
    49% {opacity:0;}
    50% {opacity:1;}
    100% { width:0.7em; opacity:1;}
  }
</style>

【讨论】：

感谢您的意见。我正在尝试使用这个小提琴来找到固定宽度的解决方案！这是一个很好的开始