Стань PHP-разработчиком с нуля с трудоустройством в IT-компании

Дерево навыков/Переходы и анимации/ Keyframe-анимации

  1. Базовый уровень

    • Keyframes rule

      Объявляет именованную последовательность состояний через `@keyframes`.

    • Keyframe offsets

      Располагает keyframes в точках iteration progress через `from`, `to` и percentages.

    • Имя анимации

      Связывает элемент с подходящим `@keyframes` rule.

    • Длительность итерации

      Задаёт продолжительность одного animation cycle.

    • Задержка анимации

      Смещает active interval относительно запуска CSS Animation.

    • Количество итераций

      Задаёт конечное или бесконечное повторение animation cycle.

    • Направление итераций

      Выбирает прямое, обратное или чередующееся воспроизведение cycles.

    • Fill mode

      Определяет влияние animation effect до и после active interval.

    • Состояние воспроизведения

      Переключает CSS Animation между running и paused.

    • Animation shorthand

      Собирает основные параметры одной или нескольких animations в shorthand.

  2. Продвинутый уровень

    • Отсутствующие endpoints

      Дополняет отсутствующие начальные или конечные property values из underlying style.

    • Easing сегментов

      Применяет keyframe-specific easing к следующему segment.

    • Keyframe cascade

      Разрешает declarations совпадающих keyframe offsets по правилам keyframe cascade.

    • Согласование animation-списков

      Сопоставляет параллельные animation properties с элементами `animation-name`.

    • Несколько animations

      Создаёт и поддерживает несколько именованных CSS Animations на одном элементе.

    • События анимации

      Различает start, iteration, end и cancellation events.

    • Timeline attachment

      Прикрепляет animation к уже определённому document, scroll или view timeline.

    • Range attachment

      Ограничивает attachment animation именованным участком progress timeline.

  3. Экспертный уровень

    • Обработка keyframes

      Формирует ordered computed keyframes из rule blocks, offsets, cascade и underlying values.

    • Обновление animation list

      Сопоставляет изменённый `animation-name` list с существующими animations, сохраняя подходящие playback states.

    • Animation event dispatch

      Определяет events по изменениям animation phase и iteration index.

    • Animation elapsed time

      Вычисляет event `elapsedTime` с учётом delay, active duration, iteration boundary и cancellation.

    • CSSAnimation object

      Соотносит декларативную CSS Animation с соответствующими объектами общей animation model.

    • WAAPI overrides

      Определяет, какие последующие CSS и keyframe updates перестают синхронизироваться после программного изменения animation object.