Question

我一直在制作一部关于我正在制作的统一游戏的简短动画介绍。它在http://cutenesss.xyz/

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

我通过以下方式控制它：

＆＃13;

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

＆＃13;

我有一个这样的课程：

＆＃13;

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

＆＃13;

并隐藏为：

＆＃13;

.title.hidden li {
  opacity: 0;
}

＆＃13;

删除班级hidden后，如何在间隔后垂直上升？就像星球战争的介绍文本，但不是黄色和角度，它只是向上升起。感谢您阅读此内容:)

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>

Answer 2

使用CSS keyframe转换元素的Y位置和hidden类。

运行代码段或检查此pen

＆＃13;

li {
  list-style: none;
}

.translate-y {
  animation: translateY 3s infinite;
}

@keyframes translateY {
  from {
    transform: translateY(200%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.0/css/bootstrap.css" rel="stylesheet" />

<div class="container">
  <div class="row">
    <div class="col">
      <ul class="fly-in-text translate-y">
        <li>W</li>
        <li>E</li>
        <li>L</li>
        <li>C</li>
        <li>O</li>
        <li>M</li>
        <li>E</li>
      </ul>
    </div>
    <div class="col">
      <ul class="fly-in-text translate-y-up d-flex">
        <li>W</li>
        <li>E</li>
        <li>L</li>
        <li>C</li>
        <li>O</li>
        <li>M</li>
        <li>E</li>
      </ul>
    </div>
  </div>
</div>

＆＃13;

有关关键帧的信息，请访问css_reference

Answer 3

这是一种使用jQuery的方法：

$(".fly-in-text").animate({
  marginTop: '0px',
  opacity: '1'
}, 4000);

.fly-in-text {
  list-style-type: none;
  width: 20px;
  margin-top: 200px;
  opacity: 0;
}

.fly-in-text li {
  /* Centered it's better */
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="fly-in-text">
  <div></div>
  <li>W</li>
  <li>E</li>
  <li>L</li>
  <li>C</li>
  <li>O</li>
  <li>M</li>
  <li>E</li>
</ul>

我希望它有所帮助。

垂直动画javascript

3 个答案: