Web animations API 사용하기 (animate)

웹 애니메이션을 별도의 라이브러리 설치 없이 사용할 수 있다.

내장된 Web api를 사용하여 간단한 애니메이션을 구현할 수 있다.

 

• HTML

<div>
  <h1>title</h1>
  <p class="phrase">lorem ippsum</p>
</div>

• CSS

.phrase {
  background: #ff99ff;
  text-align: center;
  padding: 10px;
}

• Javascript

const tag = document.querySelector('.phrase');

tag.addEventListener('click', () => {
  tag.animate(
    [
      {transform: 'translateY(0px)'},
      {transform: 'translateY(15px)'},
      {transform: 'translateY(0px)'},
    ],
    {
      duration: 1500,
      iterations: Infinity,
      direction: 'normal',
      easing: 'ease',
    },
  );
});

p태그를 클릭하면, 애니메이션이 실행되는 것을 확인할 수 있다.

 

 

⛈ 참고 자료

https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API

Web Animations API - Web APIs | MDN

https://developer.mozilla.org/en-US/docs/Web/API/Element/animate

Element: animate() method - Web APIs | MDN