Переходы

Длительность перехода, transition-duration[1/29]

Плавные переходы в CSS или transitions позволяют изменять значения свойств постепенно, «с нежностью».

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

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

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

Рассмотрим плавный переход на простом примере с кнопкой, у которой по нажатию меняется цвет. Начальное состояние описано в классе.btn, а конечное — в классе.btn-active.

Достаточно вот такого кода, для плавности вкл и выкл кнопки:

.btn {
    background-color: #ffffff;
    transition-duration: 1s;
}

.btn-active {
    background-color: #ff5252;
}

Достаточно только в одном месте (селекторе .btn) определить свойства transition!!!!

Длительность перехода, шаг 2[2/29]

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

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

Давайте попробуем задать кнопке ещё несколько свойств и посмотрим, как они будут изменяться.

В этом и следующих примерах используются CSS-трансформации, которые подробно разбираются в курсе «Двумерные трансформации».

transition-property: какие свойства изменять плавно?[3/29]

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

Такое поведение часто нежелательно, особенно когда в правиле много свойств.

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

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

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

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

Попробуем применить описанное свойство на практике. В этом примере у кнопки анимируются свойстваbackground-color,transformиfont-size.

Задержка перехода, transition-delay[4/29]

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

«Форма» перехода, transition-timing-function[5/29]

Ещё одно свойство, влияющее на переход —transition-timing-function. Это свойство аналогично свойствуanimation-timing-function, которое разбирается в курсе по анимациям. Свойствоtransition-timing-functionопределяет с какой скоростью и ускорением будут меняться свойства во время перехода.

В предыдущих примерах переходы происходили с одинаковой динамикой. Мы меняли длительность и задержку перехода, но не «форму». Эта «форма» по умолчанию соответствует первому графику, из которого видно, что переход начинается медленно, затем ускоряется и к концу движения опять замедляется.

Так ведёт себя значениеeaseсвойстваtransition-timing-function.

• easelinear

Чтобы сделать переход равномерным, без ускорений и замедлений, используется значениеlinear. «Форма» линейного перехода приведена на втором графике.

transition-timing-function, шаг 2[6/29]

Вот ещё несколько форм переходов:ease-in,ease-outиease-in-out.

• ease-inease-outease-in-out

Из графиков видно, что при значенииease-inпереход медленно начинается, а к концу ускоряется; приease-out— начинается быстро, а к концу замедляется. Значениеease-in-outпохоже наease, то есть переход начинается и заканчивается медленно, но происходит это чуть-чуть интенсивнее.

Испробуем эти значения свойстваtransition-timing-function.

transition-timing-function, шаг 3[7/29]

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

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.

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

А вот по этойссылкеможно найти целую коллекцию разных easing-функций на основе кривых Безье.

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

transition-timing-function, шаг 4[8/29]

Ещё один возможный класс значенийtransition-timing-function— этоsteps.

Они позволяют задать «ступеньки», по которым будет идти переход. Синтаксисstepsследующий:

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

Тут всё просто:число\шагов — это целое число, за которое будет выполнен переход;направление_может принимать значениеstartилиend.

При заданномstartпервый шаг выполняется одновременно с началом перехода, а в случае cendпоследний шаг будет выполнен вместе с завершением перехода.

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

transition: width 1s ease-in 2s;

К примеру, переход тут применяется к ширине элемента, будет длиться 1 секунду с формой ease-in и задержкой перед началом в 2 секунды.

Описание перехода для квадрата.squareв этом задании мы тоже перевели в короткую форму.