Kontrola animacji wywołanej przez css, chciałbym aby animacja wywoływała się dopiero gdy przejadę na dół strony.

Question

Witajcie,

robię swoją stronę internetową i chciałbym aby niektóre animacje, które są na stronie były wywoływane dopiero kiedy zescrolluję stronę do miejsca w którym znajduje się element.
Poniżej zamieszczę kawałek kodu html oraz css.
Niestety na javascript w ogóle się nie znam i muszę się go nauczyć sam, problem leży w tym, że nie wiem w co ręce włożyć, a bardzo mi zależy na jak najszybszym skończeniu i opublikowaniu strony bo 23 wracam na studia i później może nie być na to czasu.

1) Mam zrobiony plik o rozszerzeniu ".js" w folderze w którym znajduje się strona, ale nie wiem jak mam w javascript zaznaczyć, że chodzi mi o jakiś konkretny element.
2)Rozumiem, że plik o rozszerzeniu ".js" umieszczam w sekcji head tak samo jak plik css?
3)Jak napisać w Javascript, żeby animacja, która jest w css była wywoływana dopiero gdy dojadę stroną do miejsca w którym element animowany się znajduje?

Fragment html

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

Fragment CSS

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);}
}

 

Answer 1

Sprawdź tu: https://stackoverflow.com/questions/13433593/how-to-start-animation-after-scrolling-over-an-element