Animacje

Animacje w aplikacji Google Web Designer tworzysz za pomocą klatek kluczowych, które wskazują początkowy i końcowy punkt animacji. W każdej klatce kluczowej określasz właściwości animowanego elementu, a na ich podstawie Web Designer generuje płynne przejścia między klatkami kluczowymi.

Przykład:

1. W pierwszej klatce kluczowej w lewej części strony znajduje się czerwony prostokąt.
2. W drugiej klatce kluczowej, która występuje 2 sekundy później, zmieniasz kolor i położenie prostokąta, tak by stał się niebieski i znalazł w prawej części strony.

Web Designer wygeneruje animację przedstawiającą stopniowe przybieranie przez prostokąt kolejnych odcieni barw leżących w spektrum między kolorem czerwonym a niebieskim w trakcie jego przemieszczania się po stronie.

CSS pozwala animować utworzone już elementy HTML, ale nie umożliwia ich usuwania ani dodawania nowych. Zamiast tego możesz ukrywać i wyświetlać elementy, animując ich właściwość visibility.

Dzięki temu, że do animacji używasz arkuszy stylów CSS, możesz za pomocą narzędzi do elastycznego projektowania stron tworzyć różne sekwencje animacji przeznaczone do widocznych obszarów o rozmaitych rozmiarach.

Tryby tworzenia animacji

Wybierz jeden z dwóch trybów animacji: szybki lub zaawansowany. W każdej chwili możesz się między nimi przełączyć.

Tryb szybki Animację tworzysz scena po scenie – dodajesz nowy widok całej strony, a potem zmieniasz elementy, które mają być animowane. Na osi czasu widać miniatury wszystkich scen w sekwencji – jak w scenorysie. Więcej informacji

Tryb zaawansowany W przypadku bardziej złożonych animacji możesz osobno animować poszczególne elementy. Każdy element ma na osi czasu własną warstwę, a znaczniki klatek kluczowych są na niej rozmieszczone zgodnie z własnym czasem. Więcej informacji

Ograniczenia dotyczące reklam AMP HTML

W przypadku reklam AMP HTML możesz animować tylko te właściwości arkusza stylów CSS:

• transform (pozwala przesuwać, obracać, skalować i pochylać elementy);
• opacity;
• visibility.