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.
visibilityproperty 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.
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 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.