CSS-свойство transition

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

transition — это сокращение, устанавливающее четыре отдельных свойства одновременно:

transition-property — какое свойство анимировать (например, width, opacity, all).
transition-duration — сколько времени занимает переход (например, 2s, 300ms).
transition-timing-function — кривая скорости (например, ease, linear, cubic-bezier(...)).
transition-delay — сколько ждать перед началом.

Свойство transition является одним из свойств CSS3.

Синтаксис сокращения

Один переход записывается следующим образом:

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

Для получения видимого эффекта обязательны только transition-property и transition-duration; функция плавности по умолчанию равна ease, а задержка — 0s.

/* animate width over 2 seconds, default easing, no delay */
transition: width 2s;

/* full form: animate transform over 300ms with a custom curve, after a 100ms wait */
transition: transform 300ms ease-in-out 100ms;

Первое значение времени, которое считывает парсер, всегда является длительностью; второе — задержкой. Поэтому transition: opacity 1s 2s означает длительность 1s, задержку 2s — а не наоборот.

Внимание

Если опустить длительность, она по умолчанию равна 0s, а переход за 0s — мгновенный, то есть эффект просто не анимируется. Всегда задавайте длительность.

Анимация нескольких свойств

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

.box {
  transition: left 1s ease-in-out,
              background-color 1s ease-out 1s;
}

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

transition: all 0.3s ease;

Информация

Значение none допустимо и отключает переходы для указанных свойств.

Запуск перехода

Переход сам по себе ничего не делает — он срабатывает только тогда, когда анимируемое свойство меняется между двумя состояниями. Распространённые триггеры:

Псевдоклассы, такие как :hover, :focus или :active.
Переключение класса с помощью JavaScript (element.classList.toggle('open')).
Изменение встроенного стиля из скрипта (element.style.opacity = 0).

Определяйте переход в базовом (обычном) состоянии элемента, а не в правиле :hover. Тогда анимация будет воспроизводиться как при включении состояния, так и при его выключении.

Информация

Вендорные префиксы, такие как -webkit-, -moz- и -o-, являются устаревшими и, как правило, не нужны для современных браузеров.

Начальное значение	all 0s ease 0s
Применяется к	Всем элементам, псевдоэлементам ::before и ::after.
Наследуется	Нет.
Анимируется	Нет.
Версия	CSS3
DOM-синтаксис	Object.style.transition = "all 3s";

Синтаксис

Синтаксис CSS-свойства transition

transition: transition-property | transition-duration | transition-timing-function |  transition-delay | initial | inherit;

Пример свойства transition с псевдоклассом :active:

Пример CSS-свойства transition

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        width: 150px;
        height: 100px;
        background: #8ebf42;
        transition: width 2s;
      }
      div:active {
        width: 600px;
      }
    </style>
  </head>
  <body>
    <h2>Transition property example</h2>
    <p>Click and hold to see the transition effect.</p>
    <div></div>
  </body>
</html>

Попробуйте сами »

Пример свойства transition с псевдоклассом :hover:

Пример CSS-свойства transition с псевдоклассом :hover

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        background-color: #fff;
        color: #000;
        font-size: 1em;
        font-family: 'Roboto', Helvetica, sans-serif;
      }
      .element {
        padding: 20px;
        width: 50px;
        height: 50px;
        left: 0;
        background-color: #8ebf42;
        position: relative;
        transition: left 1s ease-in-out, background-color 1s ease-out 1s;
      }
      .example:hover .element {
        left: 400px;
        background-color: #1c87c9;
      }
      .element-2 {
        transition: none;
      }
    </style>
  </head>
  <body>
    <h2>Transition property example</h2>
    <div class="example">
      <p>Hover over the container to see the transition effect.</p>
      <div class="element element-1"></div>
      <p>No transition:</p>
      <div class="element element-2"></div>
    </div>
  </body>
</html>

Попробуйте сами »

Полезно знать

Анимируются только анимируемые свойства. Числовые и цветовые свойства (width, opacity, color, transform) анимируются; такие свойства, как display или font-family, меняются мгновенно.
Избегайте значения auto. Переход между фиксированным значением и height: auto не анимируется, потому что браузер не может вычислить промежуточные размеры. Вместо этого используйте max-height или transform: scaleY().
Производительность. transform и opacity — самые дешёвые для анимации свойства, поскольку они не вызывают перерасчёт макета или перерисовку. По возможности отдавайте им предпочтение перед анимацией left/top или width/height.
Переходы и анимации. Используйте transition для простых переходов из состояния A в состояние B; обращайтесь к animation с @keyframes, когда нужна зацикленность, несколько шагов или движение, которое начинается самостоятельно.

Значения

Значение	Описание
transition-property	Задаёт имена свойств для перехода.
transition-duration	Задаёт длительность анимации перехода.
transition-timing-function	Задаёт скорость изменения объекта при переходе от одного значения к другому.
transition-delay	Задаёт время ожидания перед запуском анимации перехода.
initial	Устанавливает значение свойства по умолчанию.
inherit	Наследует свойство от родительского элемента.

Практика

Какие свойства CSS transition можно изменять?

Длительность переходаФункция плавности переходаЗадержка перед началом переходаЦвет переходаПрозрачность перехода