Changing Background Image with CSS3 Animations

Solution 1:

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>

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.

Solution 2:

It works in Chrome 19.0.1084.41 beta!

So at some point in the future, keyframes could really be... frames!

You are living in the future ;)

Solution 3:

Works for me. Notice the use of background-image for transition.

#poster-img {
  background-repeat: no-repeat;
  background-position: center;
  position: absolute;
  overflow: hidden;
  -webkit-transition: background-image 1s ease-in-out;
  transition: background-image 1s ease-in-out;
}