Changing Background Image with CSS3 Animations

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("");}
   25% {background-image: url("");}
   50% {background-image: url("");}
   75% {background-image: url("");}
<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.

Leave a Comment