Как запустить css @keyframes, когда элемент виден при прокрутке

Question

У меня огромная проблема с управлением css анимациями, я хочу, чтобы они запускались, когда элемент виден на экране. Именно я делаю сайт, который имеет общую высоту, например, 8000 пикселей, а элемент с анимацией расположен далеко вниз, поэтому, чтобы увидеть этот элемент, мне нужно прокрутить страницу вниз до него. Проблема в том, что анимация запускается, когда страница завершается sh, когда она загружается, поэтому каждый раз, когда я прокручиваю этот элемент вниз, анимация уже заканчивается.

Я искал решение по переполнению стека, YouTube и так далее, но, к сожалению, я потерпел неудачу, каждое решение, которое я нашел и попытался реализовать, не сработало, поэтому я близок к тому, чтобы отказаться от этого ...

Как запустить эту анимацию, когда элемент становится видимым? Может ли кто-нибудь помочь мне написать правильный код в javascript?

Небольшое отступление, я делаю свой самый первый сайт, к сожалению, у меня не было серьезных уроков кодирования в html, css или javascript / jquery в школе или в университете, поэтому, пожалуйста, простите мне некоторые неоптимальные имена классов или идентификаторов и решения, которые не являются профессиональными. : P К счастью, html и css было легко выучить, поэтому у меня не было таких проблем, как эта, но javascript, кажется, сложный язык: /

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>

CSS код для артикула 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;
}

Answer 1

На CSS -Tricks есть статья о том, как это сделать с jQuery.
Я немного изменил пример кода с идентификаторами, чтобы сделать статью более гибкой, и сделал предварительный просмотр.

Если вы хотите узнать больше о JavaScript, проверьте курсы на udemy, freecodecamp, frontendmasters, pluralsight et c.

https://codesandbox.io/s/wizardly-noether-ed4pd

Answer 2

Javascript, которые я пробовал:

Оригинал:

 <script>
        $(document).ready(function(){
            $('.dummy').viewportChecker({
                callbackFunction: function(elem, action){
                    setTimeout(function(){
                        elem.html((action == "add") ? 'Callback with 500ms timeout: added class' : 'Callback with 500ms timeout: removed class');
                    },500);
                },
                scrollBox: ".scrollwrapper"
            });
        });
    </script>

С моими изменениями (имена классов, идентификаторы)

<script>
        $(document).ready(function(){
            $('.tekst').viewportChecker({
                callbackFunction: function(elem, action){
                    setTimeout(function(){
                        elem.html((action == "add") ? 'Callback with 500ms timeout: added class' : 'Callback with 500ms timeout: removed class');
                    },500);
                },
                scrollBox: "#pasek"
            });
        });
    </script>

Я был также пытается реализовать эти решения: https://jsbin.com/zuqexigepe/edit?html, вывод http://jsfiddle.net/toby3105/749yxgdk/2/