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

🚀 Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

Свойство в общем виде записывается так:

transition: property duration timing-function delay;
  • property — определяет CSS-свойство, для которого будет применяться переход. Можно указать несколько свойств, разделив их запятой. Если указать all, переходы будут применяться ко всем свойствам элемента.
  • duration — определяет длительность перехода. Задаётся в секундах (s) или миллисекундах (ms).
  • timing-function — определяет скорость перехода в разные моменты времени. Наиболее часто используются следующие функции: linear, ease, ease-in, ease-out, ease-in-out.
  • delay — время задержки перед началом перехода. Задаётся в секундах (s) или миллисекундах (ms).

Примеры использования

В данном примере применяем плавный переход цвета фона (background-color) для элемента p при наведении курсора. Фон плавно изменится за секунду.

p {
  background-color: blue;
  transition: background-color 1s ease-in-out;
}

p:hover {
  background-color: red;
}
Анимация фона при наведении курсора

👉 Если вы не понимаете, что написано в этом примере кода и откуда там p, прочитайте статью про селекторы.

В этом примере применяем переход для двух свойств (width и height) одновременно. При наведении курсора размеры элемента p плавно увеличиваются.

p {
  width: 100px;
  height: 100px;
  transition: width 2s, height 4s;
}

p:hover {
  width: 200px;
  height: 200px;
}
Изменение размера элемента при наведении курсора

Анимировать изменение цвета текста при наведении на ссылку.

a {
  color: blue;
  transition: color 0.3s ease-in-out;
}  

a:hover {
  color: red;
}
Изменение цвета ссылки при наведении курсора

Изменение размера шрифта при наведении на текст:

p {
  font-size: 16px;
  transition: font-size 0.5s ease;
}

p:hover {
  font-size: 24px;
}
Изменение размера шрифта при наведении курсора

Нюансы

☹️ Не все свойства возможно анимировать. Для корректной работы перехода изменяемое свойство должно быть анимируемым. Например:

  • Цветовые свойства: color, background-color, border-color и другие.
  • Размеры и отступы: width, height, padding, margin, top, right, bottom, left и другие.
  • Свойства трансформации: transform (включая rotate, scale, translate, skew и другие).
  • Некоторые свойства текста: font-size, letter-spacing, word-spacing, line-height.
  • Свойство прозрачности: opacity.
  • Свойства границы: border-width, border-radius.
  • Свойство позиционирования: position.

❌ Не все CSS-свойства могут быть анимированы. Например, свойства display, content, visibility и некоторые другие не поддерживают анимацию.

Переходы не работают при изменении свойств с помощью JavaScript. В этом случае лучше использовать CSS-анимации или JavaScript-анимации.

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

Поддержка браузерами

Свойство transition хорошо поддерживается всеми современными браузерами. Для детальной информации рекомендуется обратиться к сайту caniuse.

Материалы по теме