使用說明
從淡入、上滑、縮放、脈動、彈跳、搖晃、旋轉等九種常見效果中挑一個，再調整持續時間、延遲、次數、timing function、播放方向與 fill mode，預覽會立刻重播。輸出同時包含 `@keyframes` 區塊與對應的 animation 屬性，複製後貼進樣式表就能直接使用，不需要任何動畫函式庫。
CSS / FRONTEND · 瀏覽器內處理
CSS 動畫產生
選擇動畫效果並調整時間與次數，輸出 keyframes 與 animation。
提供九組預先寫好的 keyframes，輸出包含完整 @keyframes 區塊，不需額外套件。
Tooloo
@keyframes tooloo-slide-in-up {
0% { opacity: 0; transform: translateY(24px); }
100% { opacity: 1; transform: translateY(0); }
}
.animated-element {
animation-name: tooloo-slide-in-up;
animation-duration: 0.8s;
animation-delay: 0s;
animation-iteration-count: 1;
animation-timing-function: ease-out;
animation-direction: normal;
animation-fill-mode: both;
}記得在 @media (prefers-reduced-motion: reduce) 中把 animation 設為 none。
動畫效果
時間設定
操作步驟
- 挑選一種動畫效果。
- 調整持續時間、延遲與播放次數，並選擇 timing function。
- 複製包含 @keyframes 的完整 CSS。
隱私
所有計算與預覽都在這個瀏覽器內完成，輸入不會上傳、不會保存，也不會寫進網址或紀錄。
常見問題
- animation-fill-mode 該選哪個？
- forwards 會讓元素停在最後一格，適合淡入後要留在畫面上的元素；backwards 會在延遲期間就先套用第一格；both 兩者都做，是進場動畫最常用的選擇。選 none 時元素會在動畫前後跳回原本樣式。
- 要怎麼尊重使用者的減少動態設定？
- 在樣式表加上 `@media (prefers-reduced-motion: reduce)` 並把 animation 設為 none，對動暈敏感的使用者就不會播放動畫。這是無障礙的基本要求，建議每個動畫都補上。