Об анимации

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

С помощью CSS можно анимировать элементы HTML, но нельзя создавать и удалять элементы. Вместо этого можно скрывать и отображать элементы, изменяя их свойство visibility.

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

Ограничения для объявлений AMPHTML

В объявлениях AMPHTML можно анимировать только следующие свойства CSS:
  • transform (позволяет перемещать, поворачивать, масштабировать и искажать элементы)
  • opacity
  • visibility

Режимы анимации

В Google Web Designer доступны два режима работы с анимацией: быстрый и расширенный. Между ними можно переключаться в любое время.

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