19강 - aos 애니메이션 커스텀

<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">

<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>

<div style="height: 1000px; background-color: skyblue;"></div>
<div class="box_1" data-aos>
  <span>울렁이는 애니메이션</span>
</div>
<div style="height: 1000px; background-color: skyblue;"></div>

.box_1 {
  font-size: 5rem;
}

.box_1.aos-animate > span {
  display: inline-block;
  animation-name : ani-1 ;
  animation-duration : 1s;
  animation-iteration-count : 1s;
}

@keyframes ani-1 {
  0% {
    transform : scale(1);
  }
   25% {
    transform : scale(2);
  }
   50% {
    transform : scale(1);
  }
   75% {
    transform : scale(2);
  }
   100% {
    transform : scale(1);
  }
}

 AOS.init();