CSS3 сейчас — анимация, прозрачность и многое другое (часть 2)

Продолжая цикл статей «CSS3 сейчас!» (Первая статья — CSS Transitions), хотелось бы рассказать об анимации средствами CSS3, а конкретно — @keyframe и animate. Так же, в статье мы затронем свойства opacity и цветовую модель rgba(), кроссбраузерное использование border-radius, box-shadow и градиентов.

Keyframe

В настоящий момент поддержка такой анимации существует только в браузерах на базе WebKit — Chrome и Safari. Но тема настолько интересна, что стоит её рассмотреть — ведь будущее не за горами, и скоро вслед за Хромом подтянутся и другие браузеры.

Первум пунктом в создании CSS анимации идёт создание keyframe'ов (ключевых кадров). Вообще, Keyframe представляет собой набор правил, которые будут применяться в течение анимации. можно провести грубое сравнение keyframes с функциями — сначала мы объявляем ключевые кадры, и затем вызываем эту анимацию в любом месте CSS.

Сделаем пример простейшей анимации — при наведении на мячик он начинает прыгать.
Мячик:

#ball {
	width: 60px;
	height: 60px;
	border-radius: 30px;
	background: #f00;
	position: absolute;
	bottom: 0;
	}

Теперь создадим ключевые кадры:

@-webkit-keyframes bounce {
	0%	{ bottom: 0; }
	50%	{ bottom: 100px; }
	100%	{ bottom: 0; }
	}

Сначала мы задаем имя нашей анимации — в примере это будет «bounce». Затем мы описываем ключевые кадры анимации:
0% { bottom: 0; } — в начале мячик находится на исходной позиции;
50% { bottom: 100px; } — в середине анимации мячик достигает максимальной высоты;
100% { bottom: 0; } — к концу анимации мячик падает на исходное место.

Создаем анимацию:

#ball:hover {
	-webkit-animation: bounce 1s infinite ease;
	}

Этим кодом мы задаем анимацию при наведении курсора на мяч. Порядок следующий: <название нашего keyframe> <время анимации> <количество итераций> <временная функция>.

Готово! Наш мячик скачет, аки колобок! А теперь посмотрите на этот пример. Комбинация box-shadow и keyframes даёт нам замечательный эффект подсветки формы для акцентирования внимания. Его можно использовать, например, при проверке форм для подсветки ошибочных полей.
Код пульсирующей формы:

@-webkit-keyframes pulse {
	0% {
	-webkit-box-shadow: 0 0 20px rgba(200, 50, 50, 0.2);
	}
	50% {
	-webkit-box-shadow: 0 0 20px rgba(200, 50, 50, 0.9);
	}
	100% {
	-webkit-box-shadow: 0 0 20px rgba(200, 50, 50, 0.2);
	}
}

form input[type="text"]:focus {
	-webkit-animation: pulse 1.5s infinite ease-in-out;
}

В коде заметен обещанный rgba(). Как многим уже стало ясно, это цветовая модель RGB + альфа-канал, что позволяет нам задавать полупрозрачность там, где это требуется.

Opacity

А вот это свойство уже можно использовать на всю катушку — оно работает во всех браузерах, кроме нашего любимого. Правда, для IE есть следующий фикс:
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
Вот пример полупрозрачной кроссбраузерной кнопки:

.foo {
	opacity: 0.5;
	filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
}

Для тех, кто еще не знает — есть замечательная вещь CSS3Pie — она позволяет нам использовать закругленные углы, тень и градиенты уже сейчас и абсолютно кроссбраузерно: IE 6-8, Chrome, Safari, Mozilla, Opera! Пример кроссбраузерного использования всех этих свойств:

border: 1px solid #696;
padding: 60px 0;
text-align: center; width: 200px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: #666 0px 2px 3px;
-moz-box-shadow: #666 0px 2px 3px;
box-shadow: #666 0px 2px 3px;
background: #EEFF99;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#EEFF99), to(#66EE33));
background: -moz-linear-gradient(#EEFF99, #66EE33);
background: linear-gradient(#EEFF99, #66EE33);
-pie-background: linear-gradient(#EEFF99, #66EE33);
behavior: url(/PIE.htc);

Тестовые странички: мячик, форма, кроссбраузерные свойства.

Спасибо за внимание и приятной вам вёрстки!