Animista

預覽 CSS 動畫,調整時間與緩動設定,再取得對應的 class 與 keyframes。

前往 Animista 官方網站

這是什麼

Animista 是 CSS 動畫資料庫與預覽工具。選好動畫後,可以調整持續時間、緩動、延遲、播放次數與方向,再產生 CSS。

為何推薦

不用先寫一組 keyframes 才知道動起來的樣子。先比較縮放、滑入或文字效果,再把選定的動畫帶回專案。

適合誰

為網頁加入進場效果或微互動的前端開發者與設計工程師。

常用情境

  • 比較同一種動畫在不同持續時間下的節奏
  • 取得單一效果的 CSS class 與 keyframes

使用提醒

本次在桌面瀏覽器選擇 scale-up-center,將持續時間改成 0.8s,產生的 class 確實使用該時間,並附上從 scale(0.5) 到 scale(1) 的 keyframes。正式使用前,仍需在自己的版面測試,並處理使用者偏好減少動態的情況。

本次未測試收藏、批次下載或舊版瀏覽器相容性。

cubic-bezier.com

拖曳控制點調整緩動曲線,對照動畫預覽,再讀取 cubic-bezier() 數值用於 CSS 動態。

  • css
  • easing
  • animation

動態

Easing Wizard

調整緩動曲線的控制值,查看移動預覽,再複製對應的 CSS 函式。

  • easing
  • css
  • animation

動態

Easing Editor

Anime.js 的彈簧緩動編輯器,可預覽動態並匯出 CSS 或 JavaScript 值。

  • animation
  • easing
  • css

網頁工具