내 CSS3 배경 이미지 애니메이션이 작동하지 않는 이유는 무엇입니까?

CSS3 애니메이션으로 배경 이미지 변경

이 질문은 웹페이지의 배경 이미지 애니메이션이 제대로 작동하지 않는 문제를 해결합니다. 제공된 CSS 코드는 제대로 구성된 것 같지만 요소에 애니메이션이 적용되지 않습니다.

해결책

2020년 업데이트된 해결 방법에는 @keyframes 규칙을 활용하는 것이 포함됩니다. 약간 다른 방식으로. 업데이트된 코드는 다음과 같습니다.

#mydiv {
  animation: changeBg 1s infinite;
  width: 143px;
  height: 100px;
}

@keyframes changeBg {
  0%, 100% {
    background-image: url("https://i.sstatic.net/YdrqG.png");
  }
  25% {
    background-image: url("https://i.sstatic.net/2wKWi.png");
  }
  50% {
    background-image: url("https://i.sstatic.net/HobHO.png");
  }
  75% {
    background-image: url("https://i.sstatic.net/3hiHO.png");
  }
}

HTML 코드

애니메이션을 적용하려면 HTML 코드에 다음이 포함되어야 합니다.

<div>

설명

이 업데이트된 코드는 특정 키프레임에서 다양한 배경 이미지로 changeBg. 그런 다음 애니메이션이 #mydiv 요소에 적용되어 시간이 지남에 따라 배경 이미지가 자연스럽게 변경됩니다.

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