[javascript] DOM 애니메이션 만들기

12 Dec 2023

이번에는 JavaScript를 사용하여 DOM 요소를 애니메이션화하는 방법에 대해 알아보겠습니다. DOM 애니메이션을 만들기 위해 CSS와 JavaScript를 함께 사용하여 요소를 동적으로 조작합니다.

1. 요소 선택

먼저 애니메이션을 적용할 DOM 요소를 선택해야 합니다. 이를 위해 document.querySelector나 document.getElementById와 같은 DOM 선택자를 사용할 수 있습니다.

const element = document.querySelector('.target-element');

애니메이션을 추가하기 위해 CSS를 사용합니다. 먼저 @keyframes를 사용하여 애니메이션의 키프레임을 정의합니다.

@keyframes slide-in {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}

그리고 이 키프레임을 사용하여 요소에 애니메이션을 적용합니다.

.target-element {
  animation: slide-in 1s ease-in-out;
}

이벤트를 통해 애니메이션을 트리거하고 제어할 수 있습니다.

element.addEventListener('click', () => {
  element.style.animation = 'slide-in 1s ease-in-out';
});

이제 애니메이션을 클릭 이벤트에 연결하여 요소를 애니메이션화할 수 있습니다.

이로써 JavaScript를 사용하여 DOM 애니메이션을 만드는 방법에 대해 알아보았습니다. 더 복잡한 애니메이션을 구현하려면 애니메이션의 시각적 효과와 타이밍을 더욱 세밀하게 제어할 수 있습니다.