Об анимации

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

Например:

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

Google Web Designer генерирует анимацию с постепенным изменением цвета через оттенки фиолетового и перемещением прямоугольника через страницу.

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

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

Режимы создания анимации

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

Быстрый режим Анимация строится по сценам. Вы добавляете новый вид всей страницы и меняете все элементы, которые нужно анимировать. На временной шкале последовательно отображаются значки каждой сцены, как в раскадровке. Подробнее…

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

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

В объявлениях AMPHTML можно анимировать только следующие свойства CSS:

• transform (позволяет перемещать, поворачивать, масштабировать и искажать элементы);
• opacity (прозрачность);
• visibility (видимость).