<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
</head>

<body>
<p>下にスクロールするとアニメーションします</p>
　<div class="wrap">
		<div class="box animate__animated animate__bounce">bounce</div>
		<div class="box animate__animated animate__flash">flash</div>
		<div class="box animate__animated animate__pulse">pulse</div>
		<div class="box animate__animated animate__rubberBand">rubberBand</div>
		<div class="box animate__animated animate__shake">shake</div>
		<div class="box animate__animated animate__swing">swing</div>
		<div class="box animate__animated animate__tada">tada</div>
		<div class="box animate__animated animate__wobble">wobble</div>
		<div class="box animate__animated animate__jello">jello</div>
		<div class="box animate__animated animate__heartBeat">heartBeat</div>
		<div class="box animate__animated animate__bounceIn">bounceIn</div>
		<div class="box animate__animated animate__bounceInDown">bounceInDown</div>
		<div class="box animate__animated animate__bounceInLeft">bounceInLeft</div>
		<div class="box animate__animated animate__bounceInRight">bounceInRight</div>
		<div class="box animate__animated animate__bounceInUp">bounceInUp</div>

		<div class="box animate__animated animate__fadeIn">fadeIn</div>
		<div class="box animate__animated animate__fadeInDown">fadeInDown</div>
		<div class="box animate__animated animate__fadeInDownBig">fadeInDownBig</div>
		<div class="box animate__animated animate__fadeInLeft">fadeInLeft</div>
		<div class="box animate__animated animate__fadeInLeftBig">fadeInLeftBig</div>
		<div class="box animate__animated animate__fadeInRight">fadeInRight</div>
		<div class="box animate__animated animate__fadeInRightBig">fadeInRightBig</div>
		<div class="box animate__animated animate__fadeInUp">fadeInUp</div>
		<div class="box animate__animated animate__fadeInUpBig">fadeInUpBig</div>
		
		<div class="box animate__animated animate__flip">flip</div>
		<div class="box animate__animated animate__flipInX">flipInX</div>
		<div class="box animate__animated animate__flipInY">flipInY</div>

		<div class="box animate__animated animate__lightSpeedIn">lightSpeedIn</div>

		<div class="box animate__animated animate__rotateIn">rotateIn</div>
		<div class="box animate__animated animate__rotateInDownLeft">rotateInDownLeft</div>
		<div class="box animate__animated animate__rotateInDownRight">rotateInDownRight</div>
		<div class="box animate__animated animate__rotateInUpLeft">rotateInUpLeft</div>
		<div class="box animate__animated animate__rotateInUpRight">rotateInUpRight</div>
		
		<div class="box animate__animated animate__slideInUp">slideInUp</div>
		<div class="box animate__animated animate__slideInDown">slideInDown</div>
		<div class="box animate__animated animate__slideInLeft">slideInLeft</div>
		<div class="box animate__animated animate__slideInRight">slideInRight</div>
		
		<div class="box animate__animated animate__zoomIn">zoomIn</div>
		<div class="box animate__animated animate__zoomInDown">zoomInDown</div>
		<div class="box animate__animated animate__zoomInLeft">zoomInLeft</div>
		<div class="box animate__animated animate__zoomInRight">zoomInRight</div>
		<div class="box animate__animated animate__zoomInUp">zoomInUp</div>
		
		<div class="box animate__animated animate__hinge">hinge</div>
		<div class="box animate__animated animate__jackInTheBox">jackInTheBox</div>
		<div class="box animate__animated animate__rollIn">rollIn</div>
</div>
</body>
p {
  text-align: center;
}
/* アニメ―ションする要素を非表示にする */
[data-animated=false] {
	visibility: hidden;
  animation-name: initial !important;
}

.wrap {
	margin: 80vh 0 40vh;
	width: 100%;
	overflow: hidden;
}

.box {
	width: 150px;
	margin: 30px auto;
	padding: 10px;
	background: #005425;
	color: #fff;
	text-align: center
}
(() => {

  // animatedクラスを持つエレメントを取得
  const targetElements = document.querySelectorAll(".animate__animated");

  // animatedクラスがなければ終わり
  if (!targetElements.length) return;

  // 発火した時の処理data-animated属性をtrueに
  const handleObserve = (entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        entry.target.setAttribute("data-animated", "true");
      }
    });
  };

  // IntersectionObserverのオプション設定
  const observerOptions = {
    root: null,
    rootMargin: '0px',
    threshold: 0
  };

  // IntersectionObserverのインスタンス化
  const observer = new IntersectionObserver(handleObserve, observerOptions);

  // animatedクラスを持つエレメントの処理
  targetElements.forEach((target) => {

    // data-animated属性をセット
    target.setAttribute("data-animated", "false");

    // IntersectionObserverをエレメントにセット
    observer.observe(target);

  });

})();

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.