Новогодний баннер на сайт при помощи CSS3

В канун новогодних праздников практически каждый сайт украшают атрибутами главного праздника года. Кто-то делает гирлянды, кто-то анимированный снег, кто-то елки в подвал помещает. Сейчас попробую объяснить как сделать красивый, на мой взгляд, и анимированный баннер на сайт с помощью CSS3.


Основная структура баннера будет содержаться в достаточно компактной html'ке.

<div class="header">
	<h1>С наступающими праздниками!</h1>
	<div class="wrapper">
		<div class="christmas-tree tree1"></div>
		<div class="christmas-tree tree2"></div>
		<div class="christmas-tree tree3"></div>
		<div class="snowman"></div>	
		<div class="christmas-tree tree4"></div>
		<div class="christmas-tree tree5"></div>
		<div class="christmas-tree tree6"></div>
	</div>
	<div class="layer-snow"></div>
</div>

Я думаю из имен классов понятно, что на страничке мы увидим поздравление, 6 елок и снеговика, а как они выглядят, описываем в css.
Для надписи «С наступающими праздниками!» я подключил шрифт из Google Fonts и прописал font-family для тега H1.

<link href='http://fonts.googleapis.com/css?family=Marck+Script&subset=latin,cyrillic' rel='stylesheet' type='text/css'>

	h1{
		color: white;
		text-align: center;
		position: absolute;
		top: 10px;
		left: 0;
		right: 0;
		font-family: 'Marck Script', cursive;
		font-size: 3em;
	}

Классы tree1, ..., tree6 между собой отличаются лишь позиционированием, в качестве фона используют одну и то же изображение в файле christmas-tree. Аналогичным образом сделан и наш снеговик. Необходимый фон, так же лежит в нескольких файлах.
Итак, фон есть, елки есть, снеговик на месте. Нам не хватает только снегопада. За основу анимации снегопада я взял статью упомянутую раньше. Основные фреймы анимации приведены ниже.

	.header{
		margin: 0 0 30px;
		position: relative;
		background-image: url(../img/snow3.png), url(../img/snow2.png);
		-webkit-animation: snow 20s linear infinite;
		-moz-animation: snow 20s linear infinite;
		animation: snow 20s linear infinite;
	}

	@keyframes snow {
		0% {background-position: 0px 0px, 0px 0px;}
		100% {background-position: 400px 400px, 300px 300px;}
	}

	.layer-snow{
		background-image: url(../img/snow.png);
		-webkit-animation: snow-layer 30s linear infinite;
		-moz-animation: snow-layer 30s linear infinite;
		animation: snow-layer 30s linear infinite;
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		height: 315px;
	}

	@keyframes snow-layer {
		0% {background-position: 0px 0px;}
		100% {background-position: 500px 1000px;}
	}

Для снега 2 анимации, одна из них это за основной картинкой (сугробы, снеговик, елки), другая перед.
Остается добавить эффектную загрузку нашего баннера, пожалуй «свалиться» с неба будет просто и со вкусом.

	.snowman {
		width: 78px;
		height: 105px;
		top: 195px;
	    left: 445px;
		background: url(../img/snowman.png);
		-moz-animation-duration: .6s;
		-webkit-animation-duration: .6s;
		animation-duration: .6s;
	}

	@keyframes animate-drop {
		0% {opacity:0;transform: translate(0, -315px);}
		100% {opacity:1;transform: translate(0, 0);}
	}

Вроде бы ничего не забыл, демонстрацию можно просмотреть, там же можно скачать исходники. Собственно говоря в качестве вдохновения использовал эту статью. Баннер к сожалению не работает в IE и Opera, от последней ничего не смог добиться, IE в принципе не поддерживает keyframes (10 версия поддерживает, но под нее не делал и не тестировал), заработало еще и на android, правда медленно… кадров 5-7 в секунду, думаю из-за наложения нескольких картинок с анимацией.