transition

Свойство transition относится к новым свойствам CSS3.

Плавные переходы в CSS или "transitions" позволяют изменять значения свойств постепенно, «с нежностью». Обычно эффект от изменения значений CSS-свойств виден мгновенно, но с помощью плавных переходов можно изменить это поведение и сделать процесс изменения значений плавным и без использования JavaScript.

В отличие от анимаций, которые позволяют управлять любым количеством промежуточных состояний, с помощью переходов можно управлять только переходом между двумя состояниями: начальным и конечным.

Применять свойство transition можно к чему угодно — фону, цвету, длине, размеру шрифта и т.д. В основном это свойства, задающие цвет или свойства, которые могут быть выражены в единицах длины (px, em, ex) или в процентах. В качестве события мы так же можем использовать псевдоклассы :focus и :active.

Существует четыре отдельных свойства.

transition-property
Свойство, к которому применяем анимацию. Практически любое свойство CSS: color, background, width, font-size и т.д.
transition-duration
Длительность анимации. Время в секундах.
transition-timing-function
Временная функция, используемая для анимации: ease, linear, ease-in-out, ease-in, ease-out, cubic-bezier
transition-delay
Задержка анимации. Время в секундах.

А также есть укороченная запись, вмещающая все свойства - transition.

Общий синтаксис.


.элемент { 
  переход: [свойство] [продолжительность] [легкость] [задержка]
}

.element {
	transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay]
}

transition-duration

Чтобы обозначить плавный переход в CSS, достаточно задать одно свойство: transition-duration — длительность перехода. Значения задаются в секундах (10s, 3s), долях секунды (0.1s, 0.03s) или миллисекундах (100ms, 333ms).

Сюда иди

Зададим разные цвета и размеры шрифта, а для анимации установим длительность в 3 секунды. Анимацию добавим в двух местах, чтобы она происходила как при наведении мыши на блок, так и при убирании мыши.


.t1 {
	width: 100px;
	height: 50px;
	color: white;
	background-color: green;
	transition-duration: 3s;
	text-align: center;
	font-size: 16px;
}
.t1:hover {
	background-color: red;
	transition-duration: 3s;
	font-size: 19px;
}

transition-property

Если задана только длительность перехода transition-duration, то по умолчанию плавное изменение затрагивает все свойства элемента и для всех свойств происходит одновременно. Такое поведение соответствует значению all свойства transition-property.

Такое поведение часто нежелательно, особенно когда в правиле много свойств. Можно указать, какие именно свойства нужно изменять плавно, перечислив их в transition-property через запятую:


transition-property: width;         // плавно меняется только ширина
transition-property: width, height; // плавно меняются только ширина и высота

При этом так же через запятую можно задавать переходам разных свойств разную длительность:


transition-property: width, height;
transition-duration: 1s, 5s; // ширина меняется за 1 секунду, высота за 5

Если брать предыдущий пример, то возможно мы хотим применить анимацию только для фона, но не анимировать размер шрифта.

Сюда иди

.t2 {
	width: 100px;
	height: 50px;
	color: white;
	background-color: green;
	transition-duration: 3s;
	transition-property: background-color;
	text-align: center;
	font-size: 16px;
}
.t2:hover {
	background-color: red;
	font-size: 19px;
	transition-duration: 3s;
	transition-property: background-color;
}

transition-delay

Ещё одно свойство переходов — transition-delay определяет задержку перед началом перехода и задаётся в секундах или миллисекундах.

Можно указывать и отрицательные значения. Задержка применима к отдельным элементам, в этом случае значения указываются через запятую в том же порядке, как у transition-property. Также можно добиться интересного результата, если указать много свойств у transition-property и два значения у transition-delay. В этом случае к нечётным свойствам будет применяться первое значение, а к чётным - второе.

Создадим анимацию, которая будет работать через полсекунды после наведения мышки.


.t3 
{
    width: 100px;
    height: 50px;
    color: white;
    background-color: green;
    padding: 5px 10px;
    color: white;
    transition-duration: 1s;
    transition-delay: 0.5s;
}

.t3:hover 
{
    background-color: red;
    color: #fff;
}
Сюда иди

transition-timing-function

Свойство transition-timing-function определяет с какой скоростью и ускорением будут меняться свойства во время перехода. Содержит несколько значений.

  • ease - переход начинается медленно, затем ускоряется и к концу движения опять замедляется
  • linear - переход равномерный, без ускорений и замедлений
  • ease-in
  • ease-out
  • ease-in-out

See the Pen CSS Transition Timing Functions (no cubic) by Zell Liew (@zellwk) on CodePen.

Названия linear, ease и другие — это «псевдонимы» функций кубических кривых Безье:

  • cubic-bezier(0, 0, 1, 1) - это linear
  • cubic-bezier(0.42, 0, 1, 1) - это ease

В общем представлении cubic-bezier(x1, y1, x2, y2) значения x и y — это координаты точек кривых на графике. При этом верным считается значение x только в диапазоне от 0 до 1.

Сервис http://cubic-bezier.com/#.17,.67,.83,.67 поможет разобраться в функциональном представлении кривых Безье.

На странице http://easings.net/ru можно найти целую коллекцию разных easing-функций на основе кривых Безье.

C помощью функции cubic-bezier мы можем задавать любые формы переходов.

Ещё один возможный класс значений transition-timing-function — это steps, позволяющий задать «ступеньки», по которым будет идти переход.


transition-timing-function: steps(число_шагов, направление);

Число_шагов — это целое число, за которое будет выполнен переход; направление может принимать значение start или end. При заданном start первый шаг выполняется одновременно с началом перехода, а в случае c end последний шаг будет выполнен вместе с завершением перехода.

Дополнительные материалы

Слайдер при помощи свойства CSS3 transition, где при помощи CSS и без всякого JavaScript удалось создать симпатичный слайдер.

Вернуться в раздел CSS

Реклама