CSS3 Multiple Backgrounds

CSS3 allows us to add multiple background in a single background-image property. This demo shows how we utilize this feature to crate Flash-less animation.

.weather {
  width: 500px;
  height: 280px;
  margin: 50px auto;
  background-image: url("images/overcast.png"),
  url("images/rainbow.png"), 
  url("images/overcast.png"),
  url("images/sunny.png");
  background-position: 150px 25px, 
  200px 10px, 
  250px 25px, 
  100px 10px;
  background-repeat: no-repeat;
  -webkit-animation: weather 10s;
}
@-webkit-keyframes weather { 
  0% {
    background-position: 120px 25px, 200px 10px, 280px 25px, 80px 10px;
  }
  100% {
    background-position: 150px 25px, 200px 10px, 250px 25px, 100px 10px;
  }
}