You build animations in Google Web Designer using keyframes, which define the starting and ending points of an animation. You set the properties of an animated element at each keyframe, and Web Designer handles the tweening, or in-between transition, between the keyframes.
For example:
- At the first keyframe, you have a red rectangle at the left side of the page.
- At the second keyframe, two seconds later, you change the rectangle's colour and position properties so that it's blue and on the right side of the page.
Web Designer generates an animation with the gradual colour shift through shades of purple and the movement across the page.
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 create different animation sequences for different-sized viewports when you're using the responsive design tools.
Modes for building animations
Choose between two animation modes: Quick mode and Advanced mode. You can switch between modes at any time.
Quick modeYou build your animation scene by scene, adding a new view of the entire page and changing all the elements that you want to animate. The timeline displays thumbnails of each scene in sequence, like a storyboard. Learn more. |
Advanced modeYou can individually animate elements for more complex animations. Each element has its own layer on the timeline and keyframe markers are spaced along the timeline according to their timing. Learn more. |
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)opacityvisibility