Changing Background Image with CSS3 Animations

by

Updated for 2020: Yes, it can be done! Here’s how.

Snippet demo:

#mydiv{ animation: changeBg 1s infinite; width:143px; height:100px; }
@keyframes changeBg{
   0%,100%  {background-image: url("https://i.stack.imgur.com/YdrqG.png");}
   25% {background-image: url("https://i.stack.imgur.com/2wKWi.png");}
   50% {background-image: url("https://i.stack.imgur.com/HobHO.png");}
   75% {background-image: url("https://i.stack.imgur.com/3hiHO.png");}
}
<div id='mydiv'></div>

Background image [isn’t a property that can be animated][1] – you can’t tween the property.

Original Answer: (still a good alternative)
Instead, try laying out all the images on top of each other using position:absolute, then animate the opacity of all of them to 0 except the one you want repeatedly.

More Related Contents:

  1. Using percentage values with background-position on a linear-gradient
  2. Use CSS3 transitions with gradient backgrounds
  3. Maintaining the final state at end of a CSS3 animation
  4. Responsive css background images
  5. Semi-transparent color layer over background-image?
  6. How can I force browsers to print background images in CSS?
  7. CSS3 animation not working in safari
  8. How to animate a radial-gradient using CSS?
  9. How to rotate the background image in the container?
  10. CSS animation delay in repeating
  11. How can I transition width of content with width: auto?
  12. Passing parameters to css animation
  13. Google Chrome Extensions – Can’t load local images with CSS
  14. Background-image in keyframe does not display in Firefox or Internet Explorer
  15. Deprecated SMIL SVG animation replaced with CSS or Web animations effects (hover, click)
  16. CSS: background image on background color
  17. Symfony2 – Assetic – load images in CSS
  18. Changing :hover to touch/click for mobile devices
  19. Overlay a background-image with an rgba background-color
  20. How to add animated gradient to an svg path?
  21. Filling water animation
  22. Reuse CSS animation in reversed direction (by resetting the state?)
  23. Pure CSS animation visibility with delay
  24. Looping Animation of text color change using CSS3
  25. CSS: background image does not fill when scrolling
  26. How can I delay the start of a CSS animation?
  27. CSS background image URL failing to load
  28. Disable CSS animation on pseudo element inherited from parent
  29. Continuous CSS rotation animation on hover, animated back to 0deg on hover out
  30. Issues with “background-position” in “background” shorthand property

Leave a Comment