Is there a way to make a CSS animation not run till the object animated isn't visible?

Question

So, I have some animations running on a page that I'm working on, and I'd like to know if there's a way to make the animations NOT run 'till the animated element(s) are visible on-screen

I've already done some research but the things I have tried (a couple of scripts, actually) didn't work..

Sorry for the size of the CSS code, it's the animation and I left the comment there because I didn't write the animation code.

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

The expected results are, like above, for the animation to begin once the user has scrolled down enough so the element being animated is visible on the screen. Right now the problems I have seen arise are that the animation just starts once the page loads, without the icon being visible, and 2, the animation not happening at all.

Answer 1

Since I'm guessing you're new to code of all sorts, here's a quick example using wowjs and since you stated you tried and it didn't work I can only guess you didn't initialize it, or the file path to the js file you should have saved locally is not correct. Either way, run the snippet attached and cheers!

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>