可见时激活CSS动画

如何解决可见时激活CSS动画

我在网页上使用CSS动画，该动画位于页面中间。我访问网页后即开始播放动画。因此用户看不到它，我尝试了互联网上提供的几种解决方案，但似乎对我都不起作用。

.pcb-text {
  display: flex;
  justify-content: center;
  align-items: center;
}

.pcb-text p {
  font-size: 35px;
  animation: typing 2s steps(45),blink-caret 0.85s step-end infinite;
  overflow: hidden;
  white-space: nowrap;
  margin: 0 auto;
  border-right: .12em solid orange;
}

@keyframes typing {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}


/* The typewriter cursor effect */

@keyframes blink-caret {
  from,to {
    border-color: transparent
  }
  50% {
    border-color: orange;
  }
}

<div class="pcb-text" id="animated_text">
    <div class="text-center">
      <p>Some Text Here</p>
    </div>
</div>

我对此并不陌生，因此，如果您给出的答案包括JS或JQuery，请使用我能理解的简单方法

解决方法

您可以将动画放在单独的类中，并在元素滚动到视图中时添加此类。

这可以通过使用jQuery完成，方法是添加一个自定义函数，该函数检测元素何时在视图中，并在用户每次滚动时触发该函数。

// function to detect if an element is scrolled into view
function isScrolledIntoView(elem)
{
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
};

// listen for scroll event
$(window).scroll(function () {
  // check if element is scrolled into view
  if (isScrolledIntoView($('#animated_text'))) {
    // element is scrolled into view,add animation class
    $('#animated_text').addClass('animation');
  }
});

.pcb-text {
  display: flex;
  justify-content: center;
  align-items: center;
}

.pcb-text p {
  font-size: 35px;
 
  overflow: hidden;
  white-space: nowrap;
  margin: 0 auto;
  border-right: .12em solid orange;
}

/* move animation to separate class */
.animation p {
  animation: typing 2s steps(45),blink-caret 0.85s step-end infinite;
}

@keyframes typing {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}


/* The typewriter cursor effect */

@keyframes blink-caret {
  from,to {
    border-color: transparent
  }
  50% {
    border-color: orange;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="height: 1000px"></div>
<div class="pcb-text" id="animated_text">
    <div class="text-center">
      <p>Some Text Here</p>
    </div>
</div>