Эффект вращения и увеличения с помощью CSS3. Используем keyframes

Сегодня мы рассмотрим очень интересное дизайнерское решение. Мы будем вращать и увеличивать картинку при наведении курсора мыши. Эффект очень привлекает внимание пользователя и может применяться для концентрирования внимания на определенном элементе. Напоминаю, что параллельно публикую цикл статей CSS3 для начинающих.

[adsense]
В том случае если вы не знали — анимацию можно сделать с помощью CSS3. Анимация сделанная с помощью CSS3 создается гораздо проще чем с помощью JavaScript и в будущем будет самым популярным решением для браузеров. Давайте на сегодняшнем примере разберемся как же реализовать на CSS3 вращение и увеличение.

Посмотреть демо

Для начала создадим базовую анимацию с помощью свойства @-webkit-keyframes.

@-webkit-keyframes rotater {
0% { -webkit-transform:rotate(0) scale(1) }
50% { -webkit-transform:rotate(360deg) scale(2) }
100% { -webkit-transform:rotate(720deg) scale(1) }
}

Свойство -webkit-keyframes выступает аниматором в нашей анимации. Определим основные состояния элемента:

• 0% — вращение 0, масштаб 1 — изначальное состояние элемента без изменений.
• 50% — вращение на 360 градусов (полный оборот), и элемент вырастет в размерах в 2 раза.
• 100% — элемент вернется к своему стандартному размеру и повернется на 720 градусов, что будет выглядеть так же как и первоначальное состояние.

Теперь мы создадим анимацию для элемента при наведении на него курсора мыши:

a.advert:hover {
  /* safari / chrome */
  -webkit-animation-name:rotater;
  -webkit-animation-duration:500ms;
  -webkit-animation-iteration-count:1;
  -webkit-animation-timing-function: ease-out;

  /* mozilla */
  -moz-transform:rotate(360deg) scale(2);
  -moz-transition-duration:500ms;
  -moz-transition-timing-function: ease-out;

  /* opera */
  -o-transform:rotate(360deg) scale(2);
  -o-transition-duration:500ms;
  -p-transition-timing-function: ease-out;

  /* ie */
  -ms-transform:rotate(360deg) scale(2);
  -ms-transform-duration:500ms;
  -ms-transform-timing-function: ease-out;
}

События назначены с помощью свойства -webkit-animation-name. Остальные свойства отвечают за:

• -webkit-animation-duration — задает время, в течении которого будет происходить анимация — 500мс.
• -webkit-animation-iteration-count — отвечает за то, чтобы анимация проявлялась только раз.
• -webkit-animation-timing-function — описывает метод расчета промежуточных значений свойств при анимации — значение easy-out.

Посмотреть демо

[info]Не забывайте, что данное свойство работает пока только в браузерах Google Chrome и Safari.[/info]

Рекомендовано использовать эти эффекты с изображениями, у которых заранее заданы размеры, с фоновыми изображениями. Если у вас появились какие-либо мысли относительно такого варианта реализации анимации — поделитесь своими мыслями.