Сегодня рассмотрим замечательную возможность. Называется она CSS анимация с помощью keyframe’ов (ключевые кадры). К сожалению, на данный момент мы имеем очень скудную поддержку браузерами данного вида анимации. Но наш любимый Google Chrome и его брат Safari отлично обрабатывают этот вид анимации. Ниже в статье мы создадим веб страницу, на которой фоновый цвет будет изменяться с течением времени с помощью ключевых кадров. Интересно? Тогда идем дальше.

Для начала предлагаю обзавестись webkit браузером и посетить демо страницу с нашим сегодняшним экспериментом.

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

Как работает анимация с помощью keyframe’ов

С помощью CSS3 достаточно легко сделать смену цветов, к примеру при наведении мыши. Установить два разных цвета, заключить их в свойство transition и собственно все. Но что если мы хотим сделать достаточно продолжительную смену цветов без каких-либо действий пользователя? Тут нам на помощь придут ключевые кадры (keyframes).

Повторюсь, что поддержка кейфреймов сильно ограничена. На данный момент поддержка есть в webkit браузерах (Safari, Chrome). Скорей всего поддержка будет присутствовать в Firefox 5 версии.

Так как же все это работает? Работа с ключевыми кадрами больше похожа на программирование чем на стилизацию. Давайте быстренько пробежимся и посмотрим как все это функционирует.

Первым делом мы объявляем блок с ключевыми кадрами и обзываем нашу анимацию:

@-webkit-keyframes animationName {
}

Имя анимации в данном случае играет роль переменной, к которой мы будем обращаться позже. Название желательно придумать такое, чтобы легко можно было понять, что это за анимация. К примеру, мы будем использовать название colorPulse для нашего примера:

@-webkit-keyframes colorPulse {
}

Далее мы зададим временную составляющую — то как будет меняться наш элемент во времени. В данном случае мы как раз используем ключевые кадры. Проценты обозначают временную составляющую анимации.

@-webkit-keyframes colorPulse {
      0% {background-color: red;}
     50% {background-color: white;}
    100% {background-color: blue;}
}

В выше приведенном коде мы сделали анимацию для свойства background-color. В самом начале, это 0%, цвет будет красный. Далее к середине, 50%, он перетечет в белый и к концу анимации, 100%, станет синий. Все промежуточные действия создаются автоматически. Все что нам остается сделать это приметь анимацию к определенному элементу и задать дополнительные параметры. В данном случае мы применим анимацию к блоку div.

#div {
    -webkit-animation: colorPulse 10s infinite alternate;
}

Как вы видите мы используем переменную, заданную ранее. Далее мы выставляем задержку в 10 секунд, количество повторений(infinite) и направление(alternate). Набор этих параметров задаст цикличность переходов: красный белый синий белый красный белый синий и т.д.

Мы использовали сокращенную форму задания анимации. Вы можете так же использовать обычную, полную форму:

#box {
 -webkit-animation-name: colorPulse;
 -webkit-animation-duration: 10s;
 -webkit-animation-iteration-count: 10;
 -webkit-animation-direction: alternate;
 -webkit-animation-timing-function: ease-in;
 -webkit-animation-fill-mode: forwards;
 -webkit-animation-delay: 2s;
}

Смена фонового цвета веб-сайта

После того как мы разобрались как все это работает, давайте сделаем реальный пример. Начнем мы со простой стилизации страницы и закончим добавлением анимации.

Для начала нам надо определиться с фоновым цветом. Достаточно интересная задача, ведь наша цель сделать постоянную смену фонового цвета. Страшно подумать, что скажут дизайнеры услышав о такой идее. Есть шанс в итоге получить что-то по-настоящему ужасное, на что никто не захочет смотреть.

Соответственно встает вопрос о правильном подборе цветов — они не должны быть слишком яркими или резать глаз. После некоторого раздумия, я решил, что идеальным вариантом будут пастельные тона. Мой взор пал на Kuler и я без труда подобрал вот такую палитру цветов.

Именно эти цвета мы используем для нашего фонового цвета. В комбинации с медленным, плавным перетеканием мы получим нужный эффект.

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

Далее мы опишем CSS стили для созданных нами элементов:

* {
	margin: 0;
	padding: 0;
}

body {
    background-color: #45CEEF;
}

h1 {
	font: 90px/70px 'Allan', arial, serif;
	text-align: center;
	margin: 50px 0 0 0;
	color: rgba(0,0,0, 0.5);
	text-shadow: rgba(255,255,255,0.5) 2px 2px 2px;
}

p {
	font: 15px/25px Helvetica, arial, sans-serif;
	text-align: center;
	color: rgba(0,0,0, 0.7);
}

#picture {
	width: 800px;
	height: 400px;
	margin: 20px auto;
	border: 5px solid #fff;
	-webkit-box-shadow: 5px 5px 5px rgba(0,0,0, 0.3);
	-moz-box-shadow: 5px 5px 5px rgba(0,0,0, 0.3);
	box-shadow: 5px 5px 5px rgba(0,0,0, 0.3);
}

Давайте немного разберем код. Первое, что бросается в глаза — это шрифт Allan. Я использую шрифты Google, поэтому все что мне нужно сделать это использовать вот такой сниппет в блоке head:

Так же я использовал очень много RGBA цветов. Сделано это для того, чтобы при смене фонового цвета все остальные цвета на странице тоже изменялись. Достигается это с помощью добавления прозрачности. Это создаст более дружественный дизайн. Для заголовка я установил черный цвет с прозрачностью 50% и наложил белую тень с помощью text-shadow чтобы добиться эффекта вдавленного текста. Так же я добавил границу и тень для изображения. Итог получился таким:

Анимация фонового цвета

Ну а теперь используем знания полученные в начале статьи и создадим анимацию. Все это делается достаточно просто — мы используем код представленный ниже, а так же цвета полученный с помощью Kuler:

@-webkit-keyframes pulse {
      0% {background-color: #45CEEF;}
     25% {background-color: #FFF5A5;}
     50% {background-color: #FFD4DA;}
     75% {background-color: #99D2E4;}
     100% {background-color: #D8CAB4;}
}

body {
     background-color: #45CEEF;
     -webkit-animation: pulse 40s infinite alternate;

}

Как вы можете видеть мы установили несколько интервалов — 0%, 25%, 50%, 75% и 100%. Таким образом мы получили очень плавную анимацию. В начале каждого интервала мы используем новый цвет из нашей палитры пастельных цветов.

Так же я установил стандартный фоновый цвет для того, чтобы он отображался в браузерах, которые не поддерживают keyframe анимацию.

Скорость анимации установлена на 40 секунд, что позволит создать очень плавную, не бросающуюся в глаза смену цвета.

Ну и по традиции, привожу ссылку на демо страницу, если вы пропустили ее в самом начале статьи.

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

Заключение

На данный момент keyframe анимация поддерживается webkit браузерами. В самое ближайшее время, я думаю, мы увидим все большую поддержку в других браузерах. В самом скором времени заработает @-moz-keyframes в Mozille Firefox.

Цель этой статьи заставить вас задуматься о том, какие необычные эффекты анимации можно сделать используя keyframe анимацию. Поэтому не бойтесь экспериментировать и показывайте своим посетителям преимущества webkit браузеров 😉 Буду рад услышать ваше мнение в комментариях.