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

Как сделать анимацию через @keyframes?

JuniorВёрстка и CSS
Ещё спрашивают так:
  • Как сделать бесконечную анимацию загрузки?
Коротко

@keyframes имя { from {…} to {…} } (или проценты 0%, 50%, 100%) описывает шаги, свойство animation применяет её: имя, длительность, функция времени, задержка, число повторов (infinite), направление (alternate), fill-mode (forwards — оставить конечное состояние). Так делают индикаторы загрузки, пульсацию, появление элементов. Те же правила производительности: transform и opacity.

  • animation-play-state: paused — пауза
  • Событие animationend — продолжить логику после анимации
  • Сложные сценарии — Web Animations API или библиотеки

Подробно

@keyframes spin { to { transform: rotate(360deg); } }
.spinner { animation: spin 1s linear infinite; }

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

  • @keyframes и свойство animation.
  • infinite, fill-mode.
  • Производительность.

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

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

Показать варианты и ответ
  • ✗@keyframes работает только при наведении мыши, как transition
  • ✗В keyframes нельзя использовать проценты, только from и to
  • ✓@keyframes задаёт шаги, свойство animation применяет их с длительностью и повторами
  • ✗animation-fill-mode: forwards возвращает элемент в начальное состояние после окончания анимации

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

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

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

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

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