Question

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

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

我根本不是专家，我甚至不知道如何开始这个。除了每次单独移动每个字母1 px，但这可能是工作时间而不能用于其他单词（例如i小于w或s）

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

Answer 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>

CSS动画平滑，可变宽度

1 个答案: