Основы анимации на CSS3


На сегодняшний день многие современные браузеры поддерживают некоторые свойства СSS3, одним из самых интересных, на мой взгляд, из них является свойство transition. Это свойство имеет префиксы для работы в разных браузерах, например, свойство -о-transition поддерживается последними версиями Оперы, -moz-transition поддерживается Мозилой и т.д. В дальнейшем, я буду опускать для краткости эти префиксы, как в описании, так и в коде. Полную версию кода вы можете посмотреть в исходниках.

Свойство transition позволяет задавать плавное изменение CSS-свойств в течение некоторого времени, тем самым, создавая различные визуальные эффекты, которые до его появления средствами CSS реализовать было невозможно. И, хотя, transition имеет множество недостатков, например, нельзя остановить уже начавшуюся анимацию при помощи js, или узнать на какой стадии выполнения она находится, всё же такое свойство есть и познакомиться с ним поближе не помешает.

Начнём с простого примера. Наверняка, вам знаком css-псевдокласс :hover, задающий свойства, которые html-элемент приобретает, когда курсор мыши находится над ним. Классика жанра: кнопка меняет цвет по наведению на неё курсора.

СSS:

1
2
3
4
5
6
7
8
9
10
11
12
#btn {
	width: 115px;
	height: 22px;
	padding: 0px;
	background: #f4f4f4;	
	border: 1px solid #CCC;
}
 
#btn:hover {
	background-color: #e60000;
	color: #fff;
}

HTML:

<button id=”submit”>Button</button>

Теперь используем transition для того, чтобы смена цвета произошла плавно. Изменяемые во время анимации свойства пишутся в значении свойства transition-property (не забываем про опущенные префиксы), длительность анимации в секундах (s) или миллисекундах (ms) задаётся в свойстве transition-duration, можно указать задержку перед началом анимации в свойстве transition-delay. Для указания характера изменения анимируемых свойств можно использовать свойство transition-timing-function. Его возможные значения: linear, ease-in, ease-out, ease-in-out. На деле часто значения всех этих свойств часто объединяют и пишут вот так: transition: all .3s linear. Такая запись означает, что все свойства плавно поменяют свои значения на новые за три десятых секунды, и их значения в процессе анимации будут изменяться линейно.

CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
#btn {
	width: 115px;
	height: 22px;
	padding: 0px;
	background: #f4f4f4;	
	border: 1px solid #CCC;
}
 
#btn:hover {
	background-color: #e60000;
	color: #fff;
	/*постфикс опущен!!!*/
transition: all .3s linear;
}

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

Если вспомнить про transform — ещё одно замечательное свойство CSS3, то можно плавно увеличивать кнопки при наведении, а при помощи border-radius можно сделать кнопку круглой. Одно из возможных значений свойства transformationscale(d), где d — число раз, во сколько увеличивается элемент (можно дробное). Свойство border-radius делает углы элемента закруглёнными и может принимать в качестве значения радиус их закругления. Если добавить немного фантазии, то можно получить примерно следующее (префиксы у transform, border-radius и transition опущены. Полный код в демо).

CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.anim-btn {
	font-size: 35px;
	font-weight: bold;
	color: #45688e;
	width: 100px;
	height: 100px;
	text-shadow: black 1px 1px 2px;
	background-color: #f1f1f1;
	border-radius: 100px;
	line-height: 100px;
	text-align: center;	
	position: relative;
	margin: 20px 20px;
	border: 3px solid lightgray;
}
 
.anim-btn:hover{	
	transform: scale(1.2);
	background-color: #45688e;
	color: #f1f1f1;	
	transition: all 0.3s linear;	
}

HTML:

<div class="anim-btn">CSS3</div>

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

Для создания анимации не обязательно использовать только псевдокласс hoverfocus и active тоже подойдут. Например, можно анимировать плавное изменение цвета краёв и фона текстового поля при приобретении им фокуса.

CSS:

1
2
3
4
5
6
7
8
9
10
11
input[type=text] {
	height: 28px;
	background: #fff;
	border: 1px solid black;
}
 
input[type=text]:focus {
	transition: all .3s linear;
	background: #f4f4f4;	
	border: 1px solid #ccc;
}

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

Я познакомил вас лишь с основами СSS3 анимации. С её помощью можно реализовать намного более интересные и красивые вещи, было бы желание, так что дерзайте. Успехов вам!

Скачать исходники