Why Isn't My CSS3 Background Image Animation Working?

Changing Background Image with CSS3 Animations

This question addresses an issue where a webpage's background image animation is not functioning correctly. The CSS codeprovided seems to be properly structured, but the animation is not being applied to the element.

Solution

The updated solution for 2020 involves leveraging the @keyframes rule in a slightly different manner. Here's the updated code:

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

To apply the animation, the HTML code should include:

<div>

Explanation

This updated code defines a keyframe animation named changeBg with different background images at specific keyframes. The animation is then applied to the #mydiv element, causing it to change its background image smoothly over time.

The above is the detailed content of Why Isn't My CSS3 Background Image Animation Working?. For more information, please follow other related articles on the PHP Chinese website!