17.09.2012

Анимация логотипа как на DealExtreme.com (dx.com) на CSS3

Скоро сказка сказывается, да не скоро дело делается. Однако Китай уже впереди планеты всей. Помимо техники, которую они плодят и клонируют раньше производителей, как например клон iPhone5, который вышел раньше оригинала от Apple, так и ВЕБе не отстают. Помимо вполне хороших движков они начали и новые вкусняшки применять на HTML5 и CSS3. И тому пример логотип на известном китайском интернет-магазине DealExtreme, который китайцы решили сделать с анимацией на CSS3.

Как выглядит анимация логотипа на CSS3 можно посмотреть на сайте DealExtreme.com или на странице с примером.

Приступим к анимация логотипа на CSS3?

Для начала создадим ссылку с картинкой

<a href="#">
		<img src="logo-dx.png" alt="Логотип DealExtreme">
	</a>

Зададим размеры и стили по вкусу

.logo img {
	width: 310px;
	height: 70px;
	vertical-align: middle;
}

Теперь приступим к анимации. Принцип анимации действует по такому же принципу, как и в примере слайдера, о котором я писал полгода назад. Правда есть некоторые особенности, которые я открыл для себя.

.logo img {
	-webkit-animation-duration: 1s;
	-moz-animation-duration: 1s;
	-o-animation-duration: 1s;
	animation-duration: 1s;
	
	-webkit-animation-timing-function: ease;
	-moz-animation-timing-function: ease;
	-o-animation-timing-function: ease;
	animation-timing-function: ease;
}
.logo a:hover img {
	-webkit-animation-name: tada;
	-moz-animation-name: tada;
	-o-animation-name: tada;
	animation-name: tada;
}

@-webkit-keyframes tada {
	0% {
		-webkit-transform:scale(1)
	}
	10%, 20% {
		-webkit-transform:scale(0.9) rotate(-3deg)
	}
	30%, 50%, 70%, 90% {
		-webkit-transform:scale(1.1) rotate(3deg)
	}
	40%, 60%, 80% {
		-webkit-transform:scale(1.1) rotate(-3deg)
	}
	100% {
		-webkit-transform:scale(1) rotate(0)
	}
}
@-moz-keyframes tada {
	0% {
		-moz-transform:scale(1)
	}
	10%,20% {
		-moz-transform:scale(0.9) rotate(-3deg)
	}
	30%, 50%, 70%, 90% {
		-moz-transform:scale(1.1) rotate(3deg)
	}
	40%, 60%, 80% {
		-moz-transform:scale(1.1) rotate(-3deg)
	}
	100% {
		-moz-transform:scale(1) rotate(0)
	}
}
@-o-keyframes tada {
	0% {
		-o-transform:scale(1)
	}
	10%,20% {
		-o-transform:scale(0.9) rotate(-3deg)
	}
	30%, 50%, 70%, 90% {
		-o-transform:scale(1.1) rotate(3deg)
	}
	40%, 60%, 80% {
		-o-transform:scale(1.1) rotate(-3deg)
	}
	100% {
		-o-transform:scale(1) rotate(0)
	}
}
@keyframes tada {
	0% {
		transform:scale(1)
	}
	10%, 20% {
		transform:scale(0.9) rotate(-3deg)
	}
	30%, 50%, 70%, 90% {
		transform:scale(1.1) rotate(3deg)
	}
	40%, 60%, 80% {
		transform:scale(1.1) rotate(-3deg)
	}
	100% {
		transform:scale(1) rotate(0)
	}
}

Сначала картинке мы назначили время жизни анимации animation-duration равной 1 секунде. Если хотите чтобы анимация продолжалась дольше, то назначьте большее количество секунд, и наоборот меньшее время, например 0.5s. Затем тип анимации animation-timing-function равной ease. Более подробно описано в статье «CSS3 Animation»

Третьи делом на событие HOVER назначаем саму анимацию animation-name: tada;, где tada — это имя нашей анимации, которую мы создаем ниже. Для самых маленьких поясню, что событие hover мы посадили на ссылку, однако анимацию применяем к картинке.

И теперь то начинается самое сложное. Если вы знакомы с какими либо программами для анимации, например FLASH или видео редактором каким либо, то вам будет проще далее представить как это выглядит, представив TIMELINE. Тут принцип точно такой же — за весь цикл анимации берется 100%, который в уме разбивается на нужное нам число кадров. В данном случае на 10, где 1 кадр — это 10%. В данном примере видно, что мы создали нашу анимацию @keyframes tada, где tada, как я ранее упоминал, название нашей анимации.
Далее ключевым кадрам мы указываем какую анимацию мы должны делать в каждый отрезок времени. И вот в данном примере, что для меня оказалось новым — это группировка одинаковых кадров

30%, 50%, 70%, 90% {
	transform:scale(1.1) rotate(3deg)
}

Если без группировки, то этот код был бы в несколько раз больше и выглядел бы так:

@keyframes tada {
	0% {
		transform: scale(1)
	}
	10% {
		transform:scale(0.9) rotate(-3deg)
	}
	20% {
		transform:scale(0.9) rotate(-3deg)
	}
	30% {
		transform:scale(1.1) rotate(3deg)
	}
	40% {
		transform:scale(1.1) rotate(-3deg)
	}
	50% {
		transform:scale(1.1) rotate(3deg)
	}
	60% {
		transform:scale(1.1) rotate(-3deg)
	}
	70% {
		transform:scale(1.1) rotate(3deg)
	}
	80% {
		transform:scale(1.1) rotate(-3deg)
	}
	90% {
		transform:scale(1.1) rotate(3deg)
	}
	100% {
		transform:scale(1) rotate(0)
	}
}

Заметьте как разросся код и стал менее читаемым.

Данная анимация проверена на работоспособность в актуальных версиях браузеров Chrome, Safari, Firefox и Opera. В Internet Explorer 10 тоже должно работать как минимум с префиксами -ms-.

Анимация логотипа на CSS3

В данной статье мы рассмотрели как с помощью CSS3 анимации и эффектов transform: scale и rotate мы создали интересную анимацию, которую с чистой душой подсмотрели на DealExtreme. На этом всё. Если что-то не понятное, то спрашивайте в комментариях, не стесняйтесь.