Вопрос с собеседования · Frontend

Как сделать плавное изменение стиля через CSS transition?

JuniorВёрстка и CSS
Ещё спрашивают так:
  • Чем transition отличается от animation?
Коротко

transition плавно переводит свойство из старого значения в новое, когда значение меняется (hover, класс, состояние): transition: transform 200ms ease-out. Задаётся свойство, длительность, функция времени (ease, linear, cubic-bezier) и задержка. Анимировать стоит transform и opacity — они не вызывают пересчёт раскладки и работают на GPU; width, height, top, margin — дорогие. animation с keyframes — для многошаговых и повторяющихся анимаций, запускаемых без смены состояния.

  • transition: all — плохая привычка: анимируется лишнее
  • Длительность интерфейсных переходов — 150–300 мс
  • display: none не анимируется — используют opacity и visibility

Подробно

.card { transition: transform .2s ease-out, box-shadow .2s; }
.card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px #0002; }

Что хотят услышать

  • Синтаксис transition.
  • transform и opacity вместо геометрии.
  • Отличие от animation.

Проверьте себя

Один верный вариант. Подумайте, потом откройте ответ.

Показать варианты и ответ
  • ✗transition запускается сам при загрузке страницы, даже без изменения значения
  • ✓transition плавно меняет свойство при смене значения; дешевле всего transform и opacity
  • ✗Анимировать width и top так же дёшево, как transform, — браузер оптимизирует всё одинаково
  • ✗display: none плавно анимируется через transition

Связанные вопросы

Партнёр платформы

Разбор собеседования с sotto

После собеседования sotto разбирает разговор: оценка, каждый вопрос — хорошо, частично или слабо, чего не хватило в ответе и над чем поработать к следующему разу. Первые 30 минут бесплатно.

Разбор собеседования