Анимация на CSS3 (transition, transform, animation)

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

Анимация на CSS3 с помощью transition

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

CSS3 анимация, пример 1, фото 1 CSS3 анимация, пример 1, фото 2 CSS3 анимация, пример 1, фото 3

Свойство transition ответственно за параметры анимации, такие как: изменяемое CSS-свойство объекта, длительность анимационного перехода, функция времени, задержка анимации.

transition: свойство скорость_анимации временная_функция задержка

Самый банальный вариант анимации на CSS3 - преобразование цвета блока при наведении. Посмотрим как это получится transition и без него:

• Используя transition. (Цвет фона меняется плавно.)

.with_transition{
	background:#efefef;
	-webkit-transition: background 1s linear 0s;
	-moz-transition: background 1s linear 0s;
	-o-transition: background 1s linear 0s;
	transition: background 1s linear 0s;
}
.with_transition:hover{
	background:#F9FF66;
}

• Без transition. (Цвета заменяют друг друга мгновенно.)

.without_transition{
	background:#efefef;
}
.without_transition:hover{
	background:#91FF66;
}

Свойство transition простое и понятное. Хочу только остановиться на одном из его параметров - временной функции. Эта функция задается с помощью кривой Безье (cubic-bezier), которая принимает 4 значения (x1,y1,x2,y2) - координаты направляющих точек.

Несколько частных случаев этой функции имеют свои названия, например linear. Но если нужен нестандарный эффект, то можете воспользоваться данным генератором. Покажу вариант использования нестандартной временной функции:

Кто там?
.over{
	-webkit-transition: left 1s cubic-bezier(0,.99,.98,.02) 0s;
	-moz-transition: left 1s cubic-bezier(0,.99,.98,.02) 0s;
	-o-transition: left 1s cubic-bezier(0,.99,.98,.02) 0s;
	transition: left 1s cubic-bezier(0,.99,.98,.02) 0s;
	left:0px;
}
.kot-krol:hover .over{
	left:325px;
}

Трансформация на CSS3 (transform)

Анимация на сайтах выглядит круто, даже если это обычное изменение фона или положения объекта. Но намного эффектнее будет применить трансформацию. Для нее в CSS3 существует свойство transform и несколько значений, которые оно может принять. Ниже рассмотрю все возможные:

Например, используем поворот transform: rotate(<угол>):

CSS3 анимация, пример 2, фото 1
CSS3 анимация, пример 2, фото 2
CSS3 анимация, пример 2, фото 3
.orange img, .kiwi img, .apricot img{
	-webkit-transition: all 0.5s linear 0s;
	-moz-transition: all 0.5s linear 0s;
	-o-transition: all 0.5s linear 0s;
	transition: all 0.5s linear 0s;
}
.orange:hover img, .kiwi:hover img, .apricot:hover img{
	-webkit-transform: rotate(360deg);
	-moz-transform: rotate(360deg);
	-ms-transform: rotate(360deg);
	-o-transform: rotate(360deg);
	transform: rotate(360deg);
}	
	

Или же смещение transform: translate(x, y):

CSS3 анимация, пример 3, фото 1
 
 
.translate img{
	-webkit-transition:all 1.5s ease-in 0s;
	-moz-transition: all 1.5s ease-in 0s;
	-o-transition: all 1.5s ease-in 0s;
	transition: all 1.5s ease-in 0s;
}
.translate:hover img{
	-webkit-transform: translate(300px);
	-moz-transform: translate(300px);
	-ms-transform: translate(300px);
	-o-transform: translate(300px);
	transform: translate(300px);
}

Также можно применить масштаб transform: scale(x, y):

CSS3 анимация, пример 4, фото 1
.scale img{
	-webkit-transition: all 1.5s linear 0s;
	-moz-transition: all 1.5s linear 0s;
	-o-transition: all 1.5s linear 0s;
	transition: all 1.5s linear 0s;
}
.scale:hover img{
	-webkit-transform: scale(1.4);
	-moz-transform: scale(1.4);
	-ms-transform: scale(1.4);
	-o-transform: scale(1.4);
	transform: scale(1.4);
}

И еще наклон transform: skewX[Y](<угол>):

 
.skew{
	-webkit-transition: all 1.5s linear 0s;
	-moz-transition: all 1.5s linear 0s;
	-o-transition: all 1.5s linear 0s;
	transition: all 1.5s linear 0s;
	}
.skew:hover{
	-webkit-transform: skew(-30deg);
	-moz-transform: skew(-30deg);
	-ms-transform: skew(-30deg);
	-o-transform: skew(-30deg);
	transform: skew(-30deg);
	}	

Более сложные трюки с анимацией на CSS3 (animation, @keyframes)

Все это помогает быстро и просто сделать интересный дизайн. Казалось бы, чего еще желать? Но я столкнулась с проблемой, с которой не удалось справится лишь CSS-свойствами transform и transition.

Речь идет о следующем: хотелось на некотором сайте сделать один блок постоянно вращающимся. Конечно, первая мысль – написать пару строчек на JavaScript, но до сегодняшнего дня меня успели убедить в том, что такой подход неправильный и даже некрутой! Пришлось искать другие пути.

Итак, я узнала о CSS-свойствах animation и @keyframes. Действительно очень полезная для анимации на CSS3 штука!

Два вышеупомянуых свойства функционируют вместе. animation задает параметры анимации (продолжительность анимации, временную функцию, задержку, количество итераций). Последнее представляло для меня особый интерес.

@keyframes, в свою очередь, вмещает разные состояния анимируемого элемента, как бы точки отсчета. Первым параметром animation принимает имя @keyframes. Выглядит это, примерно, вот так:

 
.kot{
	-webkit-animation: rotating 30s infinite linear;
	-moz-animation: rotating 30s infinite linear;
	-ms-animation: rotating 30s infinite linear;
	-o-animation: rotating 30s infinite linear;
	animation: rotating 30s infinite linear;
}

@-webkit-keyframes rotating {
	to { -webkit-transform: rotate(360deg); }
}
@-moz-keyframes rotating {
	to { -moz-transform: rotate(360deg); }
}
@-ms-keyframes rotating {
	to { -ms-transform: rotate(360deg); }
}
@-o-keyframes rotating {
	to { -o-transform: rotate(360deg); }
}
@keyframes rotating {
	to { transform: rotate(360deg); }
}

Для моей задачи – постоянно вращающийся блок на CSS3 – хватило задать только конечное положение элемента (to). Но в @keyframes можно задавать и начальное положение (from), и любые промежуточные в процентах. Это пригодится для создания более сложных анимаций.

Я придумала что-то такое:

CSS3 анимация, пример 5, фото 1 CSS3 анимация, пример 5, фото 2 CSS3 анимация, пример 5, фото 3 CSS3 анимация, пример 5, фото 4 bon-bon killer
.bon-bon1{
	animation: opacity 5s infinite linear 2s;
}
.bon-bon2{
	animation: opacity 5s infinite linear 4s;
}
.bon-bon3{
	animation: opacity 5s infinite linear 6s;
}
.robot{
	animation: translating 8s infinite linear;
}
@keyframes opacity {
	from{opacity:1;}
	40%{opacity:0;}
	50%{opacity:0;}
	75%{opacity:0;}
	to {opacity:1;}
}
@keyframes translating {
	from{bottom:0px;left:0px;}
	25%{bottom:290px;left:0px;}
	50%{bottom:290px;left:290px;}
	75%{bottom:0px;left:290px;}
	to {bottom:0px;left:0px;}
}

* Будьте внимательны! В примере кода опущены префиксы для разных браузеров!

В заключение хочу сказать: не забывайте о CSS-анимации в Веб-дизайне! Многие дизайнеры, возможно, и не догадываются о ней, так как работают исключительно в Фотошопе, но это очень зря! Думаю, что сайты с анимационными эффектами всегда выигрышно смотрятся!

Посмотрите сайты с CSS-анимацией, которые мне понравились:

CSS3 анимация, рекомендованный сайт 1 CSS3 анимация, рекомендованный сайт 2 CSS3 анимация, рекомендованный сайт 3

Владимир
Добрый день, очень понравился ваш сайт, если не сложно отпишитесь на почту мне, тоже делаю сайт может поможете мне ;)
Мирослава Новікова
Мирослава Новікова
Спасибо за коммент! Отписала в ВК :)
Павел Букин
Павел Букин
Здравствуйте, анимация последняя не работает у меня(((
Павел Букин
Павел Букин
Спасибо за помощь, Вы чудо))) После помещения в див и задав ему высоту все заработало!
Мирослава Новікова
Мирослава Новікова
Обращайтесь, Павел))) Было приятно познакомиться с Вами!
Сергій
В прикладах анімацій, для першої анімації змінилася адреса на http://en.dunlop-tire.ru/history/ Цей комент видаліть, інформативності в ньому мало ))
Александр
Вроде про анимацию зашёл почитать, теперь не могу выбраться)))) Так смешно пишете во всех статьях, спасибо за позитив)))
Мирослава Новікова
Мирослава Новікова
@Александр Спасибо, что оставили приятный комментарий! Я очень рада, что Вам пришлись по душе и порадовали статейки :)