Работа с анимацией

Редактор @ключевых кадров

Любые @keyframes rules связанные с выбранным элементом отображаются в виде Rules view и редактируются:

Функция изменения строки

Когда вы create a CSS animation вы можете задать timing function: это определяет скорость, с которой анимация прогрессирует. Один из способов определить функцию является синхронизация с кубической кривой Безье.

Временные функции, определенные как кубические кривые Безье получают значок в правилах просмотра. При нажатии на иконку вы получаете визуальный редактор для кривой, что позволяет перетащить P1 and P2, и увидеть результат на странице:

Кубический редактор Безье включает в себя ряд предварительных настроек, сгруппированных в разделе "Ease-in", "Ease-out", и "Ease-in-out":

Инспектор Анимации

Из Firefox 41, Инспектор страниц включил в себя extra view labeled "Animations".

 Этот вид отображает как CSS переходы и CSS анимации синхронизированы по шкале времени, перетаскивая виджет вы можете использовать для перемещения любую точку на временной шкале и увидеть страницу в этой точке.

Чтобы увидеть, как это работает, мы разберем пример. Раздел данный ниже содержит три серые иконоки, каждая из которых представляет разные Firefox channel. Если щелкнуть значок, он увеличивается измененяя цвет, и на экране отображается название канала. Нажмите на значок еще раз, чтобы изменить эффект. Эти анимации сделаны путем применения переходов к нескольким свойствам CSS.

Давайте использовать инспектор анимации, чтобы увидеть, что происходит на данном примере.

• Используйте Firefox 43 или более позднюю версию, щелкните правой кнопкой мыши один из значков и выберите пункт "Проверить элемент".
• Вы, вероятно, также хотите настроить выбранный узел на один уровень вверх, к узлу.
   
• Переключение на вкладку "Animations" .

Теперь воспроизведение анимации:

Давайте внимательнее посмотрим на содержание инспектора анимации здесь:

Он показывает синхронизированный график для каждого перехода CSS свойств участвующих в анимации. Шкала времени начинается с начала первого перехода, и заканчивается в конце последнего перехода, и помечена маркерами каждые 100 миллисекунд (это зависит от временного масштаба анимации отображаемой в данный момент). Вы можете видеть, что приведенный выше пример занимает 735 миллисекунд для запуска.

Каждая анимация или переход показан в виде горизонтальной полосы, установленной по шкале времени:

• Бар синий, если transition был использован для свойств анимации, и оранжевый, если был использован @keyframes animation.
• С Firefox 44, строка содержит значок молнии() если свойства анимации используют набранные нити (посмотреть больше о cost of animating different CSS properties).
• Бар помечается именем свойства существующей анимации или названием @keyframes анимации .
• Если в анимации или переходе произошла задержка, это показано в виде заштрихованной части панели.
• При наведении курсора на панели появляется подсказка, что дает вам более подробную информацию о анимации или переходе .

С левой стороны бара переключатель для узлов относящихся к анимации. если навести курсор на переключатель, то выделится узел на странице. Нажмите переключатель для выбора узла в инспекторе

Слева от переключателя имеется значок "мишень" (). Из Firefox 44, нажав на этот значок будет блокировать фломастер на элементе.

Применяя все это к нашему примеру, мы можем видеть, что :

• В анимации участвуют два элемента , span.channel-note and img#selected.channel-icon. Проходя над этими переключателями, мы видим эти элементы, соответственно, название канала "Firefox Nightly" и значок канала :
• Каждый элемент имеет два свойства анимации :
  • width и opacity для названия канала
  • filter и transform для значка
  • transform свойство оживлялось на наборщике нити.
• Свойство фильтра имеет задержку 0,25 секунды, применяемых к нему.
• Преобразование перехода свойства заканчивается через 0,5 секунды.

Воспроизведение анимации

В верхней части инспектора анимации:

• there are buttons to play/pause and rewind the animation (new in Firefox 44)
• текущее время в анимации отображается (новое в Firefox 44).

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