javascript - 垂直动画 JavaScript

Question

我一直在为我正在制作的 Unity 游戏制作一个简短的动画介绍。涨至http://cutenesss.xyz/

你可以从网站上看到，我有一堆 float 文本，我用 JavaScript 控制。

我通过以下方式控制它:

setTimeout(function() {
  $('.fly-in-text').removeClass('hidden');
}, 1000);

我有一堂这样的课:

<ul class="fly-in-text hidden">
  <li>W</li>
  <li>E</li>
  <li>L</li>
  <li>C</li>
  <li>O</li>
  <li>M</li>
  <li>E</li>
</ul>

并隐藏为:

.title.hidden li {
  opacity: 0;
}

删除hidden类后，如何让它在一段时间后垂直上升？就像星球大战的介绍文字一样，但不是黄色和 Angular ，它只是向上升起。感谢您阅读本文:)

Answer 1

如果 JavaScript 不是必需的，您可以使用 @keyframes 仅使用 CSS 创建动画。

.fly-in-text {
  animation: slideUp 5s infinite;
  list-style-type: none;
}

@keyframes slideUp {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

<ul class="fly-in-text">
  <li>W</li>
  <li>E</li>
  <li>L</li>
  <li>C</li>
  <li>O</li>
  <li>M</li>
  <li>E</li>
</ul>