CSS 애니메이션으로 이미지를 무한히 회전시키는 방법

이 튜토리얼에서는 CSS의 animation 속성을 사용하여 이미지를 끊임없이 회전시키는 방법을 단계별로 알아봅니다.

1단계: HTML 마크업 준비하기

먼저 이미지와 몇 가지 속성이 포함된 HTML 마크업이 필요합니다.

<img
  src="https://kr.wsxdn.com/UploadFiles_1288/202203/2022033109325250.png"
  class="rotate linear infinite"
  width="150"
  height="150"
/>

작성한 이미지는 아래와 같이 화면에 나타납니다.

2단계: 유틸리티 클래스 이해하기

위 이미지 요소에는 rotate, linear, infinite라는 세 개의 클래스가 적용되어 있습니다. CSS 스타일시트에서는 각 클래스마다 선언 블록을 만들어 주어야 합니다. 이런 종류의 클래스는 흔히 유틸리티(utility) 또는 헬퍼(helper) 클래스라고 불리지만, 각각의 역할이 더 잘 드러난다는 점에서 저는 단일 목적(single-purpose) 클래스라는 용어를 선호합니다.

.rotate 클래스 선언하기

가장 먼저 .rotate 코드 블록을 선언합니다.

.rotate {
  animation: rotation 2s;
}

아직은 아무 변화가 없습니다. 애니메이션 속성에 사용될 회전(rotation) 함수를 정의해야 하기 때문입니다. 스타일시트에 다음과 같은 CSS 키프레임 규칙을 추가하세요.

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

이제 브라우저 탭을 새로고침하면 이미지가 2초(2s) 동안 한 번 회전하는 것을 볼 수 있습니다. 하지만 두 가지 작업이 더 남아 있습니다. 이미지가 계속해서 회전하도록 만들고, 기본값인 ease 대신 일정한 속도 곡선인 linear로 전환 타이밍을 변경하는 것입니다.

.linear 클래스 선언하기

스타일시트에 다음 .linear 선언 블록을 추가합니다.

.linear {
  animation-timing-function: linear;
}

브라우저를 새로고침하면 이미지가 시작부터 끝까지 일정한 속도로 회전하는 것을 확인할 수 있습니다.

.infinite 클래스 선언하기

마지막으로 .infinite 클래스의 코드 블록을 선언하여 이미지가 무한히 회전하도록 만들어 보겠습니다.

.infinite {
  animation-iteration-count: infinite;
}

이제 일정한 속도 곡선을 가진 채 무한히 계속 회전하는 이미지가 완성되었습니다!

전체 코드는 CodePen에서 확인할 수 있습니다.

한 줄로 압축하기

참고로 모든 애니메이션 속성을 하나의 클래스에 한 줄로 선언할 수도 있습니다.

.rotate-image {
  animation: rotation 2s linear infinite;
}

위 방식은 코드량을 크게 줄여주지만, 학습이나 강의 목적으로는 각 요소를 작은 단위로 나누어 설명하는 것이 개별 구성 요소가 어떻게 함께 작동하는지 이해하기 쉽기 때문에 더 효과적입니다.

다양한 애니메이션 곡선

기본값인 ease와 여기서 사용한 linear 외에도 다양한 애니메이션 곡선이 존재합니다. cubic-bezier 애니메이션 곡선을 활용하면 훨씬 정교하고 세련된 움직임을 구현할 수 있는데, 이 내용은 별도의 튜토리얼에서 다루도록 하겠습니다.