如何使 wow 淡入淡出与溢出一起工作：滚动

问题描述

当我尝试在我的网站上添加 wow fadeInUp (https://wowjs.uk/docs) 动画时遇到了一个小问题。我有 overflow 在我的 css 中设置为 scroll，它似乎禁用了动画效果。我把它放在滚动上是有原因的，所以我想知道是否有办法让它与 overflow: scroll;

一起使用

这里是更多详细信息的网站：https://admiring-khorana-ad08d5.netlify.app/

.webContainer{
  max-height: 100vh;
  overflow: scroll;
}

<div class="webContainer">
<div class="grid-container">
            <div class="grid-item text wow fadeInUp" data-wow-duration="3s"><img class="services-icon img" src="./icons/services/s1.png" alt=""> <a
                class="servicesTag" href="">Acupuncture</a><br>
              <div class="serv-description">
                Cette pratique constitue tout acte de stimulation,généralement au
                moyen d’aiguilles,de certains sites déterminés sur la peau.
              </div>
            </div>
            <div class="grid-item text wow fadeInUp" data-wow-duration="3s"> <img class="services-icon img" src="./icons/services/s2.png" alt=""> <a
                class="servicesTag" href="">Kinésiologie</a><br>
              <div class="serv-description">
                Le kinésiologue est le professionnel de la santé expert en activité
                physique. Il vous accompagne dans l’adoption et le maintien d’un
                style de vie sain et actif. Ce professionnel peut aussi vous aider à
                perdre du poids. Les programmes d’entraînement conçus par les
                kinésiologues peuvent aussi aider les personnes souffrant de
                problèmes chroniques.
              </div>
            </div>

...

  var wow = new WOW();
  wow.init();

解决方法

我不太确定您在说什么，但您可以使用 @keyframes fadeIn 制作动画。例子：

p:hover {
    animation: fadeIn 3.1s;
}
@keyframes fadeIn {
    from{opacity: 0;}
    to{opacity: 1;}
}

<div>
 <p>Hello</p>
</div>

这是否回答了您的问题