讓網站動起來，適當加入動畫、轉場，體驗不一樣。 經驗筆記，工作筆記

研究animation有一段時間了，怎麼樣的轉場、動畫效果，會讓人感覺到舒服。
連PPT 換頁的時候都有轉場特效，淡入淡出也是一種轉場。

在做互動效果的時候，有時候沒有靈感 會去參考PPT的動畫特效。(圖1)

PPT 轉場特效(圖1)

其實國外滿多網站，讓人驚艷地或覺得這個網站不錯的，都有在網站的一些元素加入動畫。

例如: 駐足在卡片上，卡片會有翻牌效果、變色效果。不再只是加個陰影。(圖2)

加入特效(圖2)

在做css 的動畫特效的時候，這個真的是需要經驗和創意的發想。

網路上其實也有提供現成的轉場特效aos.js， 但通常就是針對 一個區塊 ，比較像是 轉場效果，大多會搭配滾軸 做個 互動效果。(圖3)

滾軸互動(圖3)

如果說要與使用者有更多的互動或元件特效，則需要去逐格寫動畫，也滿推薦去看影格相關的概念，在做動畫的時候會比較融會貫通。(圖4)

向右的擦去(圖4)

自左擦去的轉場效果 用到的就是clip-path 的遮罩。

心得

有些網站一開始 會加入的載入動畫、滾軸到哪 在網頁上方加入的 閱讀進度、滑到照片 會有放大效果....等，這些加入之後網站看起來就高級許多。

我還滿喜歡參考日本的網站、國外的靜態demo網站。

大多會在css、svg、js 搭配做互動，第一眼就會讓人印象深刻，也使網站的增加了許多特色。 

當動畫效果越特別，要做的css 就越多。

這次在做公司的官網時，就加入了許多互動特效....會發現到不是做不到，只有你想不到...😉