En Google Web Designer, las animaciones se crean mediante fotogramas clave, que definen los puntos de inicio y finalización de una animación. Establezca las propiedades de un elemento animado en cada fotograma clave y Web Designer se encargará de la interpolación o transición entre los fotogramas.
Por ejemplo:
- En el primer fotograma, dispone de un rectángulo rojo en la parte izquierda de la página.
- En el segundo fotograma, 2 segundos después, cambie las propiedades de color y posición del rectángulo para que sea azul y esté situado en el lado derecho de la página.
Web Designer genera una animación con el cambio de color gradual mediante tonos morados y el movimiento por toda la página.
CSS puede animar los elementos HTML existentes, pero no puede añadir ni retirar elementos. En su lugar, puede ocultar y mostrar elementos animando la propiedad visibility del elemento.
Como se usa CSS en la creación de las animaciones, puede utilizar distintas secuencias de animación para ventanas gráficas de distintos tamaños cuando use las herramientas de diseño adaptable.
Modos para crear animaciones
Al trabajar en animaciones, puede elegir entre dos modos: el modo rápido y el modo avanzado. Puede alternar entre los distintos modos en cualquier momento.
Modo rápidoLas animaciones se crean escena a escena: añada una nueva vista de página entera y cambie todos los elementos que desee animar. En la línea de tiempo, se muestran las miniaturas de cada escena de la secuencia, como un storyboard. Más información |
Modo avanzadoPuede animar elementos de forma individual para elaborar animaciones más complejas. Cada elemento tiene su propia capa en la línea de tiempo, y los marcadores de fotogramas clave están distribuidos a lo largo de esa línea de acuerdo con el tiempo que tengan asignado. Más información |
Limitaciones de los anuncios AMP HTML
Solo se pueden animar las siguientes propiedades CSS de los anuncios AMP HTML:
transform(permite mover, rotar, escalar y sesgar elementos)opacityvisibility