CSS3 스핀 애니메이션

애니메이션 스타일을 올바르게 구현했지만 키프레임을 정의하지 않았기 때문에 애니메이션이 작동하지 않습니다. 애니메이션.

CSS3 애니메이션에는 애니메이션의 시작 및 종료 상태를 정의하는 키프레임이 필요합니다.

문제를 해결하려면 CSS 코드에 키프레임을 추가하세요. 이는 애니메이션 중에 요소가 어떻게 변환되는지 정의합니다. 수행 방법의 예는 다음과 같습니다.

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

이것은 애니메이션을 0도에서 시작하고 360도에서 끝나는 키프레임을 정의합니다. 이러한 값을 사용자 정의하여 원하는 애니메이션 효과를 만들 수 있습니다.

다음은 솔루션을 설명하는 데모입니다.

div {
  margin: 20px;
  width: 100px;
  height: 100px;
  background: #f00;
  animation-name: spin;
  animation-duration: 4000ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

이러한 변경으로 인해 이제 요소가 계속 회전하게 됩니다. CSS3 애니메이션이 작동하려면 애니메이션 스타일과 애니메이션 키프레임을 모두 정의해야 한다는 점을 기억하세요.