Как работает свойство transition

«Как работает свойство transition» — вопрос из категории CSS, который задают на 10% собеседований Frontend Разработчик. Ниже — развёрнутый ответ с разбором ключевых моментов.

Ответ

Нет, селектор не указывается в свойстве transition. Оно принимает только параметры анимации: свойство, длительность, функция времени и задержку.

Пример:

.element {
  transition: opacity 0.3s ease-in-out 0.1s;
}

Здесь:

  • opacity — свойство для анимации,
  • 0.3s — длительность,
  • ease-in-out — функция времени,
  • 0.1s — задержка перед началом.

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

.element {
  transition: opacity 0.3s, transform 0.5s ease-out;
}