免費開發工具

CSS 動畫建構器

視覺化建構CSS關鍵影格動畫。即時預覽動畫效果，立即複製生成的CSS程式碼。

預覽

持續時間2s

重複次數

時間函數

方向

Keyframes

translateX (px)

translateY (px)

旋轉 (deg)

縮放

透明度

顏色

translateX (px)

translateY (px)

旋轉 (deg)

縮放

透明度

顏色

translateX (px)

translateY (px)

旋轉 (deg)

縮放

透明度

顏色

Generated CSS

.animated-element {
  width: 80px;
  height: 80px;
  border-radius: 8px;
  animation-name: my-animation;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: ease;
  animation-direction: normal;
}

@keyframes my-animation {
  0% {
    transform: translateX(0px) translateY(0px) rotate(0deg) scale(1);
    opacity: 1;
    background-color: #6366f1;
  }
  50% {
    transform: translateX(80px) translateY(-40px) rotate(180deg) scale(1.2);
    opacity: 0.7;
    background-color: #8b5cf6;
  }
  100% {
    transform: translateX(0px) translateY(0px) rotate(360deg) scale(1);
    opacity: 1;
    background-color: #6366f1;
  }
}

常見問題

我可以自訂生成的輸出嗎？

是的。該工具提供了各種自訂選項，可根據您的特定需求自訂輸出。在生成之前調整設置，或使用不同的選項重新生成。

產生的內容可以免費使用嗎？

是的。您使用此工具產生的所有內容都可以用於個人、教育或商業目的，沒有任何限製或歸屬要求。

這個需要帳號嗎？

不需要。該工具無需註冊、無需電子郵件、無需註冊即可立即使用。只需打開頁面並開始生成。

我的輸入資料是否保密？

是的。所有處理都發生在您的瀏覽器中。您的輸入資料和產生的輸出永遠不會發送到任何外部伺服器。

CSS 動畫建構器

預覽

Keyframes

Generated CSS

關於此工具

使用方法

常見問題

CSS 動畫 建構器

預覽

Keyframes

Generated CSS

相關工具

CSS 壓縮工具

CSS Flexbox 版面生成器

CSS Grid 版面生成器

CSS 漸層 生成器

關於此工具

使用方法

常見問題

Related Articles

Essential Developer Tools: JSON, Base64, RegEx, and More

Hashing, Encryption, and Encoding Explained: A Developer's Security Guide

Spreadsheet & Data Conversion Guide: Excel, CSV, JSON, and More

Why Browser-Based Tools Are the Future: No Installs, No Uploads, No Risk

CSS 動畫建構器

CSS 漸層生成器