내 CSS3 배경 이미지가 애니메이션되지 않는 이유는 무엇입니까?

CSS3을 사용하여 배경 이미지 애니메이션: 문제 해결 가이드

CSS3을 사용하여 배경 이미지에 애니메이션을 적용하려고 하면 예상되는 동작을 방해하는 문제가 발생할 수 있습니다. . 이러한 문제를 해결하기 위해 제공된 코드를 자세히 살펴보고 잠재적인 오해를 식별해 보겠습니다.

제공하신 예에서는 CSS 키프레임의 잘못된 사용으로 인해 애니메이션이 실패하는 것 같습니다. "@-webkit-keyframes" 규칙 구문은 2020 CSS 사양에서 더 이상 사용되지 않습니다. 이 문제를 해결하려면 표준화된 "@keyframes" 구문을 대신 사용하도록 코드를 업데이트해야 합니다.

다음은 의도한 대로 작동하는 업데이트된 스니펫입니다.

@keyframes test {
  0% {
    background-image: url('frame-01.png');
  }
  20% {
    background-image: url('frame-02.png');
  }
  40% {
    background-image: url('frame-03.png');
  }
  60% {
    background-image: url('frame-04.png');
  }
  80% {
    background-image: url('frame-05.png');
  }
  100% {
    background-image: url('frame-06.png');
  }
}

div {
  float: left;
  width: 200px;
  height: 200px;
  animation-name: test;
  animation-duration: 10s;
  animation-iteration-count: 2;
  animation-direction: alternate;
  animation-timing-function: linear;
}

브라우저 개발 도구 또는 CSS 파일의 애니메이션 접두사를 "@-webkit-keyframes" 대신 "@keyframes test"로 지정하세요. 테스트."

이러한 조정을 통해 이제 배경 이미지가 의도한 대로 부드럽게 애니메이션됩니다.

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