CSS3 스핀 애니메이션이 작동하지 않습니다: 키프레임이 누락된 이유는 무엇입니까?

CSS3 스핀 애니메이션: 작동하지 않는 이유

CSS3 스핀 애니메이션이 코드에서 작동하지 않는 문제가 발생했습니다. 문제를 해결하기 전에 CSS3 애니메이션의 기본 원리를 이해하는 것이 중요합니다.

CSS3 애니메이션 키프레임 사용

CSS3 애니메이션의 강력한 기능을 활용하려면 애니메이션 키프레임을 정의하는 것이 필수적입니다. . 키프레임은 애니메이션 요소가 애니메이션 전체에서 다양한 시간 간격으로 표시되는 방식을 지정합니다. 코드에서 "spin"이라는 애니메이션을 참조했지만 이러한 키프레임은 정의되지 않았습니다.

공식 Mozilla 개발자 가이드(https://developer.mozilla.org/en- US/docs/CSS/Tutorials/Using_CSS_animations) CSS 애니메이션 키프레임에 대한 자세한 내용을 참조하세요.

구현

다음은 스핀 애니메이션이 어떻게 작동하는지 보여주기 위해 키프레임이 추가된 스니펫입니다. 효과적으로 구현되었습니다:

HTML:

<code class="html"><div></div></code>

CSS:

<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>

이 코드에서는 "from"을 사용하여 "스핀" 애니메이션 키프레임을 정의합니다. 그리고 "to" 선택자. 이는 요소가 0도 회전에서 시작하여 애니메이션 지속 시간 동안 점진적으로 360도로 회전하도록 지정합니다.

이 키프레임 정의를 통합하면 회전 애니메이션이 코드에서 의도한 대로 작동하도록 할 수 있습니다. .

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