내 CSS3 스핀 애니메이션이 작동하지 않는 이유는 무엇입니까?

CSS3 Spin Animation

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

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

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

<code class="css">@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}</code>

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

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

<code class="css">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);
  }
}</code>

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

위 내용은 내 CSS3 스핀 애니메이션이 작동하지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!