Create CSS animations

You can create CSS animations in Google Web Designer in two modes, Quick mode and Advanced mode. Because animations are created using CSS, you can use different animation sequences for different sized viewports when you're using the responsive design tools.

In Quick mode, you build your animation scene by scene: you add a new view of the entire page, change the elements you want to animate, and, optionally, modify your transition times and easings.

For more complex animation, Advanced mode lets you individually animate each of the the elements, optionally modifying transition times and easings as well. Advanced mode also shows layers, which let you change where each element is in the stack of elements.

You can switch between modes at any time, by clicking the mode switch button next to the play controls.