Animista
預覽 CSS 動畫,調整時間與緩動設定,再取得對應的 class 與 keyframes。
這是什麼
Animista 是 CSS 動畫資料庫與預覽工具。選好動畫後,可以調整持續時間、緩動、延遲、播放次數與方向,再產生 CSS。
為何推薦
不用先寫一組 keyframes 才知道動起來的樣子。先比較縮放、滑入或文字效果,再把選定的動畫帶回專案。
適合誰
為網頁加入進場效果或微互動的前端開發者與設計工程師。
常用情境
- 比較同一種動畫在不同持續時間下的節奏
- 取得單一效果的 CSS class 與 keyframes
使用提醒
本次在桌面瀏覽器選擇 scale-up-center,將持續時間改成 0.8s,產生的 class 確實使用該時間,並附上從 scale(0.5) 到 scale(1) 的 keyframes。正式使用前,仍需在自己的版面測試,並處理使用者偏好減少動態的情況。
本次未測試收藏、批次下載或舊版瀏覽器相容性。