As a precautionary health measure for our Google support specialists in light of COVID-19, some support options may be unavailable or delayed. We apologize for any inconvenience this may cause and appreciate your patience. This message will be updated as the situation changes.

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

Need more help?

Sign in for additional support options to quickly solve your issue

Clear search
Close search
Google apps
Main menu
Search Help Center