Сегодня рассмотрим замечательную возможность. Называется она 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 Color Pulse
Changing background colors using Webkit Keyframe animations.
Далее мы опишем 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 браузеров 😉 Буду рад услышать ваше мнение в комментариях.
Неподготовленный пользователь может умом тронуться, когда фон будет менять цвет 😀
Firefox 5 уже поддерживает keyfram’ы)
спасибо за напоминание — поправлю)
а как сделать так чтобы вместо изменения цвета менялась картинка