CSS 애니메이션을 사용하여 이미지를 연속적으로 회전하는 방법

이 빠른 자습서에서는 CSS 애니메이션 속성을 사용하여 이미지를 계속 회전하는 방법을 배웁니다.

먼저 이미지와 속성이 있는 HTML 마크업이 필요합니다.

<img
  src="/article/uploadfiles/202203/2022033109325250.png"
  class="rotate linear infinite"
  width="150"
  height="150"
/>

이미지가 다음과 같이 표시되어야 합니다.

보시다시피 이미지 요소에는 세 개의 클래스가 있습니다. rotate , linear 및 infinite . CSS 스타일시트에서 각 클래스에 대한 선언 블록을 만들어야 합니다. 이러한 유형의 클래스를 유틸리티라고도 합니다. 또는 도우미 하지만 저는 단일 목적이라는 용어를 선호합니다. 더 설명적이기 때문입니다.

먼저 .rotate를 선언합시다. 코드 블록:

.rotate {
  animation: rotation 2s;
}

애니메이션 속성의 회전 함수를 정의해야 하기 때문에 아직 아무 일도 일어나지 않습니다. 다음 CSS 키프레임 규칙을 스타일시트에 추가합니다.

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

이제 브라우저 탭을 새로고침하면 이미지가 2초(2s) 동안 한 번 회전하는 것을 볼 수 있습니다. ). 하지만 두 가지를 더 해야 합니다. 이미지가 계속 회전하기를 원하고 애니메이션 전환 타이밍을 기본 ease에서 변경하고 싶습니다. linear라는 일관된 속도 곡선으로 .

이 .linear를 추가하세요. CSS 스타일시트에 대한 선언 블록:

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

브라우저 탭을 새로고침하면 이미지가 처음부터 끝까지 일관된 속도로 회전하는 것을 볼 수 있습니다.

마지막으로 .infinite를 선언하여 이미지를 무한 회전하도록 합시다. 클래스의 코드 블록:

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

짜잔, 이제 선형 애니메이션 속도 곡선이 있는 무한/지속적으로 회전하는 이미지가 있습니다.

CodePen에서 전체 코드 확인

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

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

위의 코드는 많은 양의 코드를 절약하지만 학습/교육의 경우 개별 구성 요소가 함께 작동하는 방식을 더 쉽게 이해할 수 있도록 더 작은 단위로 나누는 것을 선호합니다.

기본 ease 옆에 많은 애니메이션 곡선이 있습니다. 및 linear 우리가 여기에서 사용하는. cubic-bezier를 사용하면 정말 멋질 수 있습니다. 애니메이션 곡선이지만 다른 튜토리얼을 위해 저장하겠습니다.