「Easing 函數速查表」由 Andrey Sitnik 提供，各國家的貢獻者協助翻譯，因此網站還支援非常多的語言，包含正體中文（繁體中文）唷！我們前端網頁設計師常常需要製作網頁互動動畫，動畫執行一般預設都是 linear 模式，也就是線性，這就會顯得效果很呆版，沒有速度變化，現實世界中所有動態的變化基本上都不是線性，有可能由快到慢，也有一下快一下慢等，現實世界的變化更多，當然我們只要做出一點速度變化，動畫就會顯得特別吸引人，因此就有熱心的工程師提供了函數大全，只要複製貼上就可以使用，完全開源！
基本上適用於 CSS、SCSS 或 jQuery，前兩者複雜的函數不知元就要靠最後者，但我會建議用前兩者，不用加裝外掛增加載入的元素，速度理論更快，不過如果你需要複雜的函數，jQuery 也不差，我們很多網頁互動特效其實單單 CSS 是不夠的，有時候 jQuery 可以做到 CSS 做不到的功能。
網站方面都有非常詳細的使用說明與簡介，如果您本身就有在做前端設計，用起來可就相當輕鬆啦！只要選擇自己需要的函數，就可以複製原始碼到自己的原始碼中運用，至於要如何運用就看你的作品需要怎樣呈現啦！
▲網站提供的函數總共有 30 個，非常足夠！
▲ 點入其中一個函數可以看到三種使用方式，當然還有用動態圖表來呈現動畫速度變化，都可以參考！
贊助廣告 ‧ Sponsor advertisements
《上一篇》Facebook Messenger：訊息收回功能登場 
《下一篇》Visual Studio Code：開放原始碼的程式碼編輯器、中文化支援、可個人化 
留言區 / Comments
萌芽論壇