« Предыдущий урок: Использование прозрачности (Transparency) в Веб-Дизайне Перевод: Виктор Доценко Назад в песочницу

Демонстрация: CSS3 Multiple Background с анимацией

.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;
  }
}