I'm struggling with controlling CSS animations that I want to start only when the element becomes visible on the screen. The issue arises because I have a website with a total height of around 8000px and the element with the animation is located far down the page. Therefore, every time I scroll down to view the element, the animation has already begun and is ending.
I've searched for solutions on platforms like Stack Overflow and YouTube, but unfortunately, none of the methods I tried worked, and I'm close to giving up.
Does anyone know how to trigger the animation only when the element is visible? Can someone guide me on the correct JavaScript code?
On a side note, this is my first website, and I didn't have formal training in HTML, CSS, or JavaScript/jQuery in school or university, so please excuse any unconventional class or ID names and less-than-professional solutions. HTML and CSS were relatively easy to learn, but JavaScript is proving to be challenging.
Below is the HTML element:
<article id="pasek">
<div id="border_left" class="tekst"></div>
<div id="litery" class="tekst">
<p class="rok_założenia">2020</p>
<p class="tekst_rok_założenia">Rok założenia</p>
</div>
<div id="border_right" class="tekst"></div>
</article>
CSS code for the article with id="pasek":
#pasek {
text-align: center;
background-color: #f4d03f;
}
p.rok_założenia {
font-size: 80px;
color: #154360;
padding-top: 40px;
padding-bottom: 5px;
}
p.tekst_rok_założenia {
font-size: 40px;
color: #154360;
padding-bottom: 40px;
}
div.tekst {
display: inline-block;
animation-name: fade-in;
animation-duration: 3s;
}
@keyframes fade-in {
0% {
opacity: 0;
transform: translateY(20px);
}
100% {
opacity: 1;
transform: translateY(0px);
}
}
#border_left {
border-right: 2px solid;
height: 120px;
border-right-color: white;
}
#border_right {
border-right: 2px solid;
height: 120px;
border-right-color: white;
}
#litery {
padding-left: 70px;
padding-right: 70px;
}