자바스크립트를 이용한 브라우저 CSS 애니메이션

개요

CSS 애니메이션은 웹 상에서 동적인 움직임을 구현하는 데 매우 유용합니다. 그러나 때로는 JavaScript를 사용해 CSS 애니메이션을 조작해야 하는 경우가 있습니다. 이번 포스트에서는 JavaScript를 활용하여 브라우저 CSS 애니메이션을 구현하는 방법을 살펴보겠습니다.

CSS 애니메이션 작성하기

CSS 애니메이션을 작성하기 위해서는 @keyframes 규칙을 사용합니다. 예를 들면 다음과 같습니다.

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

이 코드는 0도에서 360도로 회전하는 애니메이션을 만듭니다. 다음으로, 이 애니메이션을 적용할 요소의 CSS 클래스를 만듭니다.

.rotate {
  animation: rotate 1s linear infinite;
}

이 코드는 rotate 클래스에 애니메이션을 추가합니다. 1초 동안 애니메이션이 실행되며, 선형적으로 변화합니다. 무한반복됩니다.

JavaScript에서 CSS 애니메이션 조작하기

JavaScript를 사용하여 CSS 애니메이션을 조작하려면, 요소의 스타일을 변경해야 합니다. 우리는 요소를 선택하고, 요소의 스타일 속성을 변경할 수 있습니다.

const rotateElement = document.querySelector('.rotate');
rotateElement.style.animationPlayState = 'paused';

이 코드는 rotate 클래스를 가진 요소의 애니메이션을 일시 정지합니다. animationPlayState 속성은 현재 애니메이션 재생 상태를 가져오거나 설정합니다.

결론

JavaScript를 사용하여 CSS 애니메이션을 조작하는 방법을 배웠습니다. 요소를 선택하고 스타일 속성을 변경하여 애니메이션을 일시 정지, 실행 또는 초기화할 수 있습니다. 이를활용하면 보다 더 규모가 큰 프로젝트에서 다양한 CSS 애니메이션 효과를 구현할 수 있습니다.

키워드

자바스크립트 브라우저 CSS 애니메이션