之前跟大家介紹過 bodymovin 這個可以把 After Effect 的動畫轉出來給網頁用的外掛,而他們官方也有提供使用者分享各自製作的動畫的網站,可以到上面找找有沒有喜歡的動畫效果。
OBNOXIOUS.CSS 是一個可以套用的 CSS 動畫效果。
Woah.css 是一組有點花俏的 CSS 動畫效果庫,可以試試看他 demo 的範例再決定是否使用。
WickedCSS 是一個簡單的 CSS 動畫資源庫,可以選擇自己喜歡的並套用。
cssanimation.io 是一個 CSS 文字動畫效果資源庫,如果有想要做文字進入或離開的轉場效果可以直接套用很方便。
ReboundGen 是一個 CSS 動畫效果的函式庫,可以看看是否有喜歡的效果可以直接套用。
vhs 是一個 CSS 的動畫庫,透過簡單的設置就能使用。
It’s Tuesday. 是一個輕巧的 CSS 動畫庫,可以設定進入或離開的動畫,網站並提供預覽的功能方便使用者觀看效果。
Magic Animations CSS3 是一個實用的 CSS3 動畫效果資源庫,可以即時預覽想要的效果後再套用。
All Animation Css3 是一個收錄許多 CSS3 動畫效果的資源站,可以參考看看是否有自己想要的效果。
Vivify 跟 animate.css 類似,可以透過簡單的設定 class name 就使用其設定好的動畫效果。
Storyset 是一個可自訂樣式及動畫的免費插畫集,點選有興趣的插畫,就可以設定想要顯示的元素、顏色及動畫,設定好就可以直接下載免費使用。
Motion UI 是一個好用的動畫效果函式庫,可以直接使用預設的效果或透過 SCSS 自訂效果。
Animista 是一個好用的線上 CSS 動畫產生器,可以選擇想要的效果後設定參數並預覽,如果滿意的話就可以直接複製 CSS 的 code 回去使用。
Potlab Icons 是一組動畫的 SVG 圖示,直接複製 code 到網頁上就可以使用。
pixeltrue 是一個收錄許多優秀的插畫與動畫作品的網站,可選擇自己需要的付費下載。
iconscout 是一個有著豐富的 icon、動畫、插畫以及 3D 素材資源分享網站。
SVGator 是一個強大的線上 SVG 動畫編輯工具,可以在線上繪製 SVG 後匯出,也可以上傳已經畫好的 SVG 圖片後製作動畫,動畫都是圖形化介面很方便,可以不用寫 code 就能製作動畫。