Основы анимации на 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 анимации. С её помощью можно реализовать намного более интересные и красивые вещи, было бы желание, так что дерзайте. Успехов вам!

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

  • В последнем демо у вас «бум» остался перед инпутом:)

  • Egor, да, спасибо, я видел. Уберу как-нибудь в свободное время 🙂

  • Вадим, извините, я ошибся в имени…

  • Viktor, о чем вы?)
    P.S. У нас коллективный блог 🙂

  • А можно ли сделать при помощи css3 увеличивающееся изображение, т.е. например не наводишь уже мышку, а щёлкаешь по картинке мышкой и она открывается уже увеличенной, с крестиком для закрывания увеличенного изображения ? Если это возможно, то опишите пожалуйста такой способ!

  • Владимир, пока такое возможно только при помощи javascript’а.

  • Ну я думаю, что не только javascript здесь может помочь, тем более, что это по моему личному мнению геморойная технология прежде всего по причине «тяжести» скриптов! Я просто подумал может анимация в css3 тоже способна на что-то такое…

  • Ну я думаю, что не только javascript здесь может помочь, тем более, что это по моему личному мнению геморойная технология прежде всего по причине «тяжести» скриптов! Я просто подумал может анимация в css3 тоже способна помочь в подобных вещах…

    • Владимир, конечно, только js’ом здесь не обойтись. В конечном итоге за внешний вид всегда отвечает css и html.
      СSS3 анимация может помочь в этих вещах, но только нужно помнить, что это новое и далеко не кроссбраузерное решение, имеющее множество недостатков.
      Для решения подобной задачи очень настоятельно рекомендую найти jQuery-плагин. При его использовании увеличивание картинки будет работать во всех браузерах.

      И с чего Вы решили что js это очень «тяжёлая» технология? Да, быстродействием JavaScript не славится, но очень многое зависит от того как написан скрипт, да и браузеры не стоят на месте. Кроме того, пока альтернатив JavaScript’у нет. CSS не способен внести ту интерактивность в страницы, которую вносит js. CSS3 анимация это лишь попытка упростить реализацию этой распрастранённой задачи, причём, по мнению многих, не совсем удачная. Такие вещи до сих пор делаются на js и ещё долго делаться будут.

  • С чего я решил? да просто знаком, со «слабым» интернетом и работой js при нём, особенно когда заходишь на какой нить портальчик, ждёшь полчаса пока он наконец-то загрузиться, а он ещё сволочь либо криво отображается, либо надо надо обновить страницу и ещё раз подождать пока он загрузиться… А вот в етом-то главный геморой и кроется в этой технологии, ну и так по мелочи, например лёгкий доступ к объектной модели браузера, но это правда уже другая «тема», но всё же…(( А так вполне согласен, мультимедийная технология позволяющая разные, прикольные спецэффекты создавать.

  • Скорость загрузки страницы зависит не только от js-скриптов. Есть ещё и внешние css и картинки в флэш. Да и оптимизации это легко поддаётся. Просто не нужно грузить ненужные скрипты, маленькие js-файлы объединить в один, динамически подгружуть только те скрипты, надобность в которых возникла, минимизировать js в конце концов и скорость загрузки можно увеличит в несколько раз.

    Вина за долго грузящиеся странички лежит не на javascript’е а на разработчиках сайта.

  • Если честно, то я не знаю «серьёзного» способа не нарушить функционал, используя js. А Вы не могли бы написать статью, описывающую способы, чтобы при большом и разнообразном функционале на js делать странички, которые будет легко грузиться? Это было бы интересно!

  • Владимир, избитая же тема. Информации полно! Просто используйте гугл.

  • Vatt’ghern

    Хорошая статья, как раз искал информацию по анимации на CSS. Только вот такой вопрос возник: как сделать так, чтобы кнопка возвращалась в исходное состояние так же плавно? А то когда убираешь курсор с кнопки она резко восстанавливает свой исходный цвет. Согласитесь, выглядит не очень эффектно.

    • Vatt’ghern, для этого свойства transition переместите из блока кода с селектором содержащим :hover в блок кода, без :hover, который применяется к html-элементу сразу после загрузки страницы. Для примера из статьи с кнопкой, на которой написано css3, это будет выглядеть вот так:

      .anim-btn {
      	font-size: 35px;
      	font-weight: bold;
      	color: #45688e;
      	width: 100px;
      	height: 100px;
      	text-shadow: black 1px 1px 2px;
      	background-color: #f1f1f1;
      	-moz-border-radius: 100px;
      	-webkit-border-radius: 100px;
      	-khtml-border-radius: 100px;
      	border-radius: 100px;
      	line-height: 100px;
      	text-align: center;	
      	position: relative;
      	margin: 20px 20px;
      	border: 3px solid lightgray;
      	-o-transition: all 0.3s linear;
      	-webkit-transition:	all 0.3s linear;
      	-moz-transition: all 0.3s linear;
      }
       
      .anim-btn:hover{
      	-o-transform: scale(1.2);
      	-webkit-transform: scale(1.2);
      	-moz-transform: scale(1.2);
      	-khtml-transform: scale(1.2);
      	transform: scale(1.2);
      	background-color: #45688e;
      	color: #f1f1f1;	
      }

      Демо

  • Vatt’ghern

    Спасибо. Странно, что сам до такого простого решения не догадался. 🙂

  • galja

    А как быть если кнопка такого вида,и нужна плавность http://ge.tt/28y0cZN/v/0?c

  • galja, если кнопка представляет собой картинку, то плавность вряд ли можно будет добавить при помощи чистого css — понадобится js.

    Если же кнопка это не картинка, то пишем два css-класса: один для кнопки, когда над ней не находится курсор, другой (с :hover) для кнопки под курсором. Затем добавляем в класс, для кнопки под курсором свойства transition.