javascript - 有没有办法让 CSS 动画在动画对象不可见之前不运行？

Question

所以，我在我正在处理的页面上运行了一些动画，我想知道是否有办法让动画不运行，直到动画元素在屏幕上可见

我已经做了一些研究，但我尝试过的东西(实际上是几个脚本)没有用..

抱歉 CSS 代码的大小，它是动画，我把评论留在那里因为我没有写动画代码。

.text-pop-up-top {
    -webkit-animation: text-pop-up-top 0.5s cubic-bezier(0.600, -0.280, 0.735, 0.045) 1s both;
            animation: text-pop-up-top 0.5s cubic-bezier(0.600, -0.280, 0.735, 0.045) 1s both;
}
/* ----------------------------------------------
 * Generated by Animista on 2019-10-22 1:23:40
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info.
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */
@-webkit-keyframes text-pop-up-top {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    text-shadow: none;
  }
  100% {
    -webkit-transform: translateY(-50px);
            transform: translateY(-50px);
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    text-shadow: 0 1px 0 #cccccc, 0 2px 0 #cccccc, 0 3px 0 #cccccc, 0 4px 0 #cccccc, 0 5px 0 #cccccc, 0 6px 0 #cccccc, 0 7px 0 #cccccc, 0 8px 0 #cccccc, 0 9px 0 #cccccc, 0 50px 30px rgba(0, 0, 0, 0.3);
  }
}
@keyframes text-pop-up-top {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    text-shadow: none;
  }
  100% {
    -webkit-transform: translateY(-50px);
            transform: translateY(-50px);
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    text-shadow: 0 1px 0 #cccccc, 0 2px 0 #cccccc, 0 3px 0 #cccccc, 0 4px 0 #cccccc, 0 5px 0 #cccccc, 0 6px 0 #cccccc, 0 7px 0 #cccccc, 0 8px 0 #cccccc, 0 9px 0 #cccccc, 0 50px 30px rgba(0, 0, 0, 0.3);
  }
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" rel="stylesheet"/>


<i class="fas fa-at text-pop-up-top" style="font-size: 100px; color: #1f8293;"></i>

预期的结果是，如上所示，一旦用户向下滚动到足以让正在动画的元素在屏幕上可见时，动画就会开始。现在，我看到的问题是，动画在页面加载后才开始，图标不​​可见，并且 2，动画根本没有发生。

Answer 1

因为我猜你是各种代码的新手，这里有一个使用 wowjs 的简单示例既然你说你试过但没有用，我只能猜测你没有初始化将它初始化，或者你应该在本地保存的 js 文件的文件路径不正确。无论哪种方式，运行附加的代码片段并欢呼!

new WOW().init();

.text-pop-up-top {
    -webkit-animation: text-pop-up-top 0.5s cubic-bezier(0.600, -0.280, 0.735, 0.045) 1s both;
            animation: text-pop-up-top 0.5s cubic-bezier(0.600, -0.280, 0.735, 0.045) 1s both;
}
/* ----------------------------------------------
 * Generated by Animista on 2019-10-22 1:23:40
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info.
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */
@-webkit-keyframes text-pop-up-top {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    text-shadow: none;
  }
  100% {
    -webkit-transform: translateY(-50px);
            transform: translateY(-50px);
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    text-shadow: 0 1px 0 #cccccc, 0 2px 0 #cccccc, 0 3px 0 #cccccc, 0 4px 0 #cccccc, 0 5px 0 #cccccc, 0 6px 0 #cccccc, 0 7px 0 #cccccc, 0 8px 0 #cccccc, 0 9px 0 #cccccc, 0 50px 30px rgba(0, 0, 0, 0.3);
  }
}
@keyframes text-pop-up-top {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    text-shadow: none;
  }
  100% {
    -webkit-transform: translateY(-50px);
            transform: translateY(-50px);
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    text-shadow: 0 1px 0 #cccccc, 0 2px 0 #cccccc, 0 3px 0 #cccccc, 0 4px 0 #cccccc, 0 5px 0 #cccccc, 0 6px 0 #cccccc, 0 7px 0 #cccccc, 0 8px 0 #cccccc, 0 9px 0 #cccccc, 0 50px 30px rgba(0, 0, 0, 0.3);
  }
}

<script src="https://wowjs.uk/dist/wow.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" rel="stylesheet"/>

<h1>scroll down....</h1>
PS, notice we don't care about any animate.css stuff at all..
<br/><br/><br/>
<br/><br/><br/>
<br/><br/><br/>
<br/><br/><br/>
<br/><br/><br/>
<br/><br/><br/>
<br/><br/><br/>
<br/><br/><br/>
<br/><br/><br/>
<br/><br/><br/>
<br/><br/><br/>
<br/><br/><br/>
<br/><br/><br/>
<br/><br/><br/>
<br/><br/><br/>
<br/><br/><br/>
<br/><br/><br/>
<br/><br/><br/>
<br/><br/><br/>
<br/><br/><br/>
<br/><br/><br/>
<br/><br/><br/>


<i class="fas fa-at wow text-pop-up-top" style="font-size: 100px; color: #1f8293;"></i>