您可以在 Google Web Designer 中，透過用於定義動畫起始點和結束點的主要畫面格建立動畫。為每個主要畫面格的動畫元素設定屬性後，Web Designer 會處理主要畫面格之間的補間動畫 (又稱為轉場)。
例如：
- 在第一個主要畫面格中，頁面左側有紅色矩形。
- 2 秒過後，在第二個主要畫面格中，您變更了矩形的顏色和位置屬性，使這個矩形變成藍色並顯示在頁面右側。
Web Designer 會產生動畫，其中矩形會經歷紫色調變化，逐漸改變顏色，並從頁面的其中一側移動到另一側。
CSS 可讓現有 HTML 元素產生動畫效果，但無法新增或移除元素。如要隱藏和顯示元素，請改為設定動畫元素的 visibility 屬性。
由於動畫是使用 CSS 製作而成，因此當您使用回應式設計工具時，可以針對不同大小的可視區域建立不同的動畫順序。
動畫建立模式
您可以使用「快速模式」或「進階模式」製作動畫，而且隨時可在這兩種模式之間切換。
快速模式您必須以場景為單位來建立動畫，流程包括新增整個頁面的新場景，以及變更所有要產生動畫效果的元素。時間軸上會依序顯示各個場景的縮圖 (類似分鏡腳本)。瞭解詳情 |
進階模式您可以讓各個元素分別產生動畫效果，藉此建立更複雜的動畫。每個元素在時間軸上都有專屬圖層，且時間軸上會依照主要畫面格的時間點顯示主要畫面格標記。瞭解詳情 |
