CSS Transitions (переходы)

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

Как работают переходы?

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

Свойства transition

transition-property — какое свойство анимировать (all, opacity, transform)
transition-duration — длительность перехода (0.3s)
transition-timing-function — функция плавности (ease, linear, cubic-bezier())
transition-delay — задержка перед началом

Пример: увеличение при наведении

Наведите курсор на квадрат:

Hover

.element {
  transition: transform 0.3s ease;
}

.element:hover {
  transform: scale(1.2);
}