About animations

You build animations in Google Web Designer by specifying keyframes at certain points in time. At each keyframe, you set the CSS properties of the animated element and the element will gradually change to take on those properties during the transition time from the previous keyframe.

CSS can animate existing HTML elements, but can't add or remove elements. Instead, hide and show elements by animating the visibility property of the element.

Because animations are created using CSS, you can use different animation sequences for different-sized viewports when you're using the responsive design tools.

Limitations for AMPHTML ads

Only the following CSS properties can be animated in AMPHTML ads:
  • transform (allows you to move, rotate, scale and skew elements)
  • opacity
  • visibility

Animation modes

Choose between two modes when working on animations, Quick mode and Advanced mode. You can switch between modes at any time.

  • In Quick mode, you build your animation scene-by-scene: you add a new view of the entire page and change the elements that you want to animate. The timeline shows you thumbnails of each scene in sequence, like a storyboard.
  • For more complex animation, Advanced mode lets you individually animate elements. Each element has its own layer on the timeline and keyframe markers are spaced along the timeline according to their timing.
Was this helpful?
How can we improve it?