LocalTools離線瀏覽器工具合集

分類: 開發工具

CSS Keyframes 產生器

站方自行規劃沒找到想要的工具？

選擇動畫預設效果並複製 @keyframes 區塊

選擇淡入、滑入、彈跳、脈動或旋轉等預設效果，設定持續時間、時間函式、重複次數與方向，即可複製完整的 @keyframes 區塊，以及使用它的 animation 簡寫屬性，並附有即時預覽。

輸出
@keyframes localtools-preview {
  from {
    transform: translateY(0);
  }

  40% {
    transform: translateY(-24px);
  }

  60% {
    transform: translateY(0);
  }

  80% {
    transform: translateY(-12px);
  }

  to {
    transform: translateY(0);
  }
}

.element {
  animation: localtools-preview 1.2s ease-in-out infinite normal;
}

每次切換預設效果時，預覽都會用下方顯示的 CSS 重新播放。

本頁的所有處理都在瀏覽器中完成，不會上傳任何內容。

這個工具能做什麼

手寫 @keyframes 區塊，代表要自己命名百分比停格點，並讓每個停格點的屬性值以你預期的方式插值，對於像彈跳這種有多個停格點的效果，很容易出現細微的錯誤。本工具內建了幾種常見動畫形態的現成停格清單，並讓你調整不會改變關鍵影格本身的時間控制項，因此預覽永遠會跟下方顯示的 CSS 區塊完全一致。

使用方式

  1. 選擇一個動畫預設效果。
  2. 設定持續時間、時間函式、重複次數與方向。
  3. 複製 @keyframes 區塊，以及下方的 animation 簡寫屬性。

隱私說明

本工具完全在你的瀏覽器中執行。輸入的內容不會被上傳、儲存或分享，關閉分頁就隨之消失。

常見問題

為什麼切換預設效果時，預覽會重新開始播放？
切換預設效果會替換底層的 @keyframes 停格點，因此預覽元素會重新掛載，以確保正在播放的動畫確實對應到剛產生的那一個，而不是把舊動畫播完。
重複次數選「infinite」是什麼意思？
它會讓動畫永遠重複播放，這也是預覽預設使用的設定；如果想讓動畫播放固定次數後停止，改設定一個數字即可。
會傳送任何內容到伺服器嗎？
不會。@keyframes 區塊與 animation 簡寫屬性是依你選擇的預設效果與時間設定在頁面內組成的，這也是預覽能即時更新的原因。

回到全部工具