Trigger css animation only when it tis visible into the viewport - html

Question

So,here i have a text animation on my page.The problem is that the animation is triggered only when the full page is loaded!so,I have this animation on the middle of my page it is almost impossible to see that it is a animated text! NEED SOLUTION please!
HTML CODE:
<div class="animated-title" id="anime" >
<div class="text-top">
<div>
<span>So! What Are You </span>
<span>Waiting For?</span>
</div>
</div>
<div class="text-bottom">
<div>Just click And LEARN!</div>
</div>
</div>
CSS CODE:
.animated-title {
color: #222;
font-family: Roboto, Arial, sans-serif;
height: 90vmin;
left: 30%;
position: absolute;
top: 156%;
transform: translate(-50%, -50%);
width: 90vmin;
}
.animated-title > div {
height: 50%;
overflow: hidden;
position: absolute;
width: 100%;
}
.animated-title > div div {
font-size: 9vmin;
padding: 3vmin 0;
position: absolute;
}
.animated-title > div div span {
display: block;
}
.animated-title > div.text-top {
border-bottom: 1.4vmin solid rgb(13, 231, 13);
top: 0;
border-radius: 20px;
}
.animated-title > div.text-top div {
animation: showTopText 1s;
animation-delay: 7s;
animation-fill-mode: forwards;
bottom: 0;
transform: translate(0, 100%);
}
.animated-title > div.text-top div span:first-child {
color: #767676;
}
.animated-title > div.text-bottom {
bottom: 0;
}
.animated-title > div.text-bottom div {
animation: showBottomText 1s;
animation-delay: 5s;
animation-fill-mode: forwards;
top: 0;
transform: translate(0, -100%);
}
Key frames:
0% { transform: translate3d(0, 100%, 0); }
40%, 60% { transform: translate3d(0, 50%, 0); }
100% { transform: translate3d(0, 0, 0); }
}
#keyframes showBottomText {
0% { transform: translate3d(0, -100%, 0); }
100% { transform: translate3d(0, 0, 0); }
}

Answer 1

I think I understand what your problem is.
As long as you do not have a problem with including a library in your code, you can do it this way:
https://www.youtube.com/watch?v=XtjO-OWFyfU
By the way, there are many tutorials on internet. You just need to search.