專案需要做如上的動畫效果按鈕，因為不想要自己手寫HTML + CSS，想說有沒有更快速且有效率的方法，使用介面化動畫工具，像做Flash動畫一樣，現在Adobe 把它改名了，應該叫Adobe Animate，但是因為礙於Adobe Animate並不是免費開源軟體，感覺上產生出的應當是HTML5 Canvas，加上我只需要做個簡單的動畫按鈕，且最好是online edit 線上編輯工具，幫助我產生HTML動畫所需要的HTML + CSS Code，這樣就真的太棒了。
就在當下google了一下，發現Google Web Designer，這個由google開發釋出的工具軟體，可讓您創建基於 HTML5 的交互式設計和動態圖形，且還是免費軟體，我想google開發這個軟件主要目的，是基於Google Ads廣告投放者，給他們應用做廣告動畫橫幅用途，心想廣告橫幅動畫都做得到了，我做個小按鈕動畫，應該沒有太大問題吧！
馬上下載軟件下來，開啟新檔案，這邊選擇橫幅，設定尺寸大小與檔案名稱，按下確定開始製作。
製作時若想要修改版面大小，可以到右邊工具列，位置和大小做調整即可。
很快的使用內建的文字工具與線條工具，將所需要的畫面給畫出來。
對於工具列上不夠的CSS屬性，選擇元件時的狀態下，在視窗右下角這裡自行添加上去，這樣的設計對於會修改CSS的人多了許多彈性。
編輯動畫
它有兩種動畫模式（快速和高級）
在快速模式下，您可以逐個場景構建動畫，該工具將處理中間的幀。
先在快速模式下新增一個關鍵幀，對第二個關鍵幀做動畫線條長度的變化。
兩個關鍵幀之間可以調整過場的秒數與緩動動畫效果設定。
在高級模式下，您可以使用圖層為單個元素設置動畫，輕鬆更改堆棧中元素的位置。
這是製作完成可以按下Play按鈕預覽畫面。
修改程式碼
也可使用程式碼預覽檢視，直接可以編輯程式碼。
這裡就將動畫CSS部分修改成infinite，重複循環播放。
編輯完成後，可選擇裝置預覽。
瀏覽器預覽畫面。
最後也可以選擇輸出發布。
接下來我將Google Web Designer 自動產生出的HTML SVG 元素與CSS程式碼提取出來，直接將它應用在網頁上，並展示在Codepen。
Demo
See the Pen CSS SVG Scroll Animation by Leon Cheng (@jq153387) on CodePen. ## Google Web Designer HTML5的網頁設計
Google Web Designer還有提供製作AD範例，有360度圖片庫、youtube播放等等…，它的功能不止限於製作Ads 動畫，甚至互動網站都可製作，它有視覺化的介面輕易製作出跨平台的動態內容，不必撰寫程式碼也可上手，可以運用HTML5技術，縮短製作時程，打造跨平台互動廣告、動畫與網頁，是個不錯的好工具。
博客來也看到了一本教學的電子書，這邊推薦這本書，有興趣的朋友可以買來研究。書本連結
跨平台網頁設計與動畫製作超活用 Google Web Designer完全視覺化開發速成(HTML5的網頁設計新神器) (電子書)
