CSS Transition (linear, ease). Примеры. Как сделать анимацию в html

Свойство CSS Transition нужен для установки анимационного перехода из одного состояния в другое. Анимация работает с помощью псевдоэлементов :hover и :active, т.е. при переходе объекта из одного состояния в другое.

Синтаксис CSS transition

transition: [ none | <transition-property> ] || <transition-duration> || <transition-timing-function> || <transition-delay>;

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

<transition-property>
<transition-duration>
<transition-timing-function>
<transition-delay>

Примеры со свойством Transition

Пример #1. Анимация в html через transition

<html>
<head>
<style>
	.primer1{ 
	width:100px; 
	height:100px; 
	background:#444;
	margin:30px;
	transition: all 1s linear; 
	-webkit-transition: all 1s linear;
	-o-transition: all 1s linear;
	-moz-transition: all 1s linear;
	}
	.primer1:hover{ 
	width:120px; 
	height:120px; 
	background:#AAA;
	margin:30px;
	transition: all 1s linear;
	-webkit-transition: all 1s linear;
	-o-transition: all 1s linear;
	-moz-transition: all 1s linear;
	}
</style>
</head>
<body>
	<div class="primer1"></div>
</body>
</html>

На странице преобразуется в следующее

Разберем этот пример более более подробно. Свойство transition: all 1s linear отвечает за плавный переход. Если его не писать, то был бы резкий переход. Чтобы вы понимали разницу, ниже представлен пример без анимационного эффекта:

Код transition: all 1s linear означает следующее:

all - плавное действие применяется ко всем свойствам, это касается цвета (color), фона (background). Вместо all можно было написать color, тогда плавный переход распространился бы только на цвет
1s - время в течении которого осуществляется переход (можно задавать в формате милисекунд: 1000ms);
linear - объект изменяется с постоянной скоростью (линейно). Есть и другие варианты эффектов (о них будет рассказано чуть ниже)

Чтобы все остальные объекты не смещались из-за увеличивающегося квадрата, можно использовать свойство свойство transform.

Пример #2. Увеличение объекта в html без смещения других объектов

<html>
<head>
<style>
	.primer2{
	width:100px; 
	height:100px; 
	background:#444;
	margin:30px;
	transition: all 1s linear; 
	-webkit-transition: all 1s linear;
	-o-transition: all 1s linear;
	-moz-transition: all 1s linear;
	}
	.primer2:hover{
	width:100px; 
	height:100px; 
	background:#AAA;
	margin:30px;
	-ms-transform: scale(1.2);
	-webkit-transform: scale(1.2);
	-o-transform: scale(1.2);
	-moz-transform: scale(1.2);
	transform: scale(1.2);
	transition: all 1s linear;
	-webkit-transition: all 1s linear;
	-o-transition: all 1s linear;
	-moz-transition: all 1s linear;
	}
</style>
</head>
<body>
	<div class="primer2"></div> 
</body>
</html>

На странице преобразуется в следующее

Теперь объект увеличивается и не происходит смещения других объектов.

Рассмотрим детально какие значения может принимать каждый из параметров

Значения свойств transition

1. Параметр transition-property

Свойство transition-property отвечает за части свойств объекта, к которым будет применена анимация. Может принимать следующие значения

all - ко всему объекту (можно опустить, если задано время)
color - к цвету текста
background - к цвету фона объекта
width, height - к изменению габаритов по ширине и высоте соответственно
none - анимация отсутствует (по умолчанию стоит у каждого элемента)

Для включения нескольких свойств, их можно перечислить через запятую.

2. Параметр transition-duration

Определяет количество времени в течении которого длится трансформация. Измеряется в секунда (s) и милисекундах (ms).

Например

0.5s

Параметр transition-duration можно задавать отдельным свойством в CSS:

transition-duration: 1s;

3. Параметр transition-timing-function

Это важнейший параметр, который определяет как изменяется скорость трансформации. Например, в начале с замедленинем, или же в конце.

Синтаксис transition-timing-function

transition-timing-function: value;

Где value может принимать значения:

ease (значение по умолчанию) - замедление во время старта и финиша, равносильно параметру cubic-bezier(0.25, 0.1, 0.25, 1.0)
linear - равномерная скорость на протяжении всей трансформации, равносильно параметру cubic-bezier(0.0, 0.0, 1.0, 1.0)
ease-in - замедление в начале, равносильно параметру cubic-bezier(0.42, 0, 1.0, 1.0)
ease-out - замедление в конце, равносильно параметру cubic-bezier(0, 0, 0.58, 1.0)
ease-in-out - замедление при старте и в конце (похож на ease, но с другими коэффициентами скорости), равносильно параметру cubic-bezier(0.42, 0, 0.58, 1.0)
step-start - мгновенный старт, равносильно параметру steps(1, start)
step-end - мгновенное исполнение в конце, равносильно параметру steps(1, end)
cubic-bezier(a1,b1,a2,b2) - задание собственного изменения скорости
steps(a,b) - изменение рывками

Например

linear

ease

ease-in

ease-out

ease-in-out

step-start

step-end

steps(3)

steps(10)

4. Параметр transition-delay

Задает время задержки до начала эффекта перехода. Измеряется в секундах (s) и милисекундах (ms)

Например

0.5s

Пример #3. Разные задержки

Ранее мы уже говорили про возможность задавать разные задержки для трансформаций. Рассмотрим это на примере.

<html>
<head>
<style>
	.raznye_zaderzhki {
	width: 100px; 
	height: 100px; 
	background: #444;
	margin: 30px;
	font-size: 14px;
	color: #0f0;
	border: 3px solid #bbb;
	transition: font-size 3s linear, background-color 1s linear, color 1s ease-in-out, width 2s ease;
	-moz-transition: font-size 3s linear, background-color 1s linear, color 1s ease-in-out, width 2s ease;
	-webkit-transition: font-size 3s linear,background-color 1s linear, color  1s ease-in-out, width 2s ease;
	-o-transition: font-size 3s linear, background-color 1s linear, color 1s ease-in-out, width 2s ease;
	}
	.raznye_zaderzhki:hover {
	background-color: #000;
	color: #0ff;
	width: 500px;
	font-size: 23px;
	}
</style>
</head>
<body>
	<div class="raznye_zaderzhki"></div> 
</body>
</html>

На странице преобразуется в следующее

Пример сложной трансформации с задержками

Браузеры

Не все браузеры поддерживают трансформацию. Необходимо использовать вендорные префиксы CSS:

-ms-transform-origin - для IE9 и старше (младше девятой версии трансформация не поддерживается
-webkit-transform-origin - для Chrome, Safari, Android и iOS
-o-transform-origin - для Opera до версии 12.10
-moz-transform-origin - для Firefox до версии 16.0

Для обращения из JavaScript к свойству CSS transition используется следующая конструкция:

[window.]document.getElementById("elementID").style.transition

← Перейти в каталог CSS уроков