Переходы в CSS

Переходы в CSS позволяют плавно перейти от одного состояния элемента к другому. Работает это так, что отдельные свойства анимируются от начального состояния до конечного.

Вы можете определить:

• transition-property: какие свойства анимируются;
• transition-duration: как долго длится анимация;
• transition-timing-function: как вычисляются промежуточные состояния;
• transition-delay: анимация начинается через некоторое время.

Вы можете установить каждое свойство CSS по отдельности или использовать сокращённую версию: transition. В этом случае, только transition-duration является обязательным.

Имейте в виду, что переход представляет собой специфический вид анимации, где есть только начальное и конечное состояние.

Быстрый пример

Переходы часто используются для состояния :hover.

a { background: lightgrey; color: grey; }
a:hover { background: yellow; color: red; }
a.with-transition { transition: 1s; }

Вместо мгновенного применения правил CSS при наведении, фон и цвет текста меняются медленно.

transition-duration

transition-duration является единственным стилевым свойством, необходимым для создания перехода. Оно может быть установлено либо в секундах (2s), либо в миллисекундах (100ms).

Если вы хотите, чтобы ваш переход длился полсекунды, то можете написать 0.5s или 500ms. В зависимости от того, насколько быстро вы хотите, чтобы длился переход, может быть проще и/или быстрее писать одну единицу.

a { background: lightgrey; color: grey; }
a:hover { background: yellow; color: red; }
a.with-fast-transition { transition: 0.5s; }
a.with-slow-transition { transition: 3s; }

transition-property

Только треть свойств CSS может быть анимирована. На сайте Mozilla есть полный список свойств.

По умолчанию у свойства transition-property значение all, это просто означает, что будут анимироваться все возможные свойства.

Вы можете разрешить анимацию только одного или нескольких свойств.

a { background: lightgrey; color: grey; }
a:hover { background: yellow; border: 5px solid blue; color: green; }
a.with-background-transition { transition-duration: 2s; transition-property: background; }
a.with-all-transition { transition: 2s; }

Свойство border полностью анимируется и позволяет легко наблюдать медленный переход (2 секунды).

transition-timing-function

Функция времени определяет, как вычисляется значение каждого свойства во время перехода.

По умолчанию переход равен ease: он ускоряется в начале и замедляется в конце.

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

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

CSS

div { left: 0; position: relative; transition: 1s; }
main:hover div { left: 200px; }
.ease { transition-timing-function: ease; } /* Поведение по умолчанию */
.linear { transition-timing-function: linear; } /* Постоянная скорость */
.ease-in { transition-timing-function: ease-in; }
.ease-out { transition-timing-function: ease-out; }
.ease-in-out { transition-timing-function: ease-in-out; }

HTML

<main>
  <p><strong>ease</strong>: медленно начинается, быстро в середине, медленно завершается</p>
  <div class="ease"></div>
  <p><strong>linear</strong>: постоянная скорость</p>
  <div class="linear"></div>
  <p><strong>ease-in</strong>: медленно начинается, быстро завершается</p>
  <div class="ease-in"></div>
  <p><strong>ease-out</strong>: быстро начинается, медленно завершается</p>
  <div class="ease-out"></div>
  <p><strong>ease-in-out</strong>: похоже на ease, но с более выраженным ускорением/замедлением</p>
  <div class="ease-in-out"></div>
</main>

Имейте в виду, что все переходы занимают одинаковое время (1 секунда).

Если вы хотите получить представление, как работают другие функции времени, посмотрите эту шпаргалку.

cubic-bezier

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

Сайт cubic-bezier.com — это простой инструмент для визуального написания своих собственных кривых.

transition-delay

transition-delay определяет задержку, т. е. как долго переход должен ждать, прежде чем начнётся на самом деле.

Как и с transition-duration вы можете использовать секунды (s) или миллисекунды (ms).

CSS

a { background: blue; color: white; transition: all 1s; }
div:hover a { background: red; }
a.with-delay { transition-delay: 1s; }

HTML

<div>
  <p>Наведите курсор на серую область</p>
  <a>Без задержки</a>
  <a class="with-delay">С секундной задержкой</a>
</div>