Lewati ke konten utama
iotools.cloudiotools.cloud

Generator Transisi CSS

API reference

Buat transisi CSS — properti, durasi, jeda, dan fungsi easing — dengan pratinjau langsung yang bisa di-hover, lalu salin shorthand, aturan hover lengkap, dan HTML-nya. Termasuk blok prefers-reduced-motion.

Input

Pratinjau menerapkan perubahan hover yang sesuai untuk properti yang Anda pilih.

Output

Pratinjau transisi Anda akan muncul di sini.

deklarasi transition
CSS
HTML
Apakah ini membantu?

Cara lain menggunakan alat ini

REST API

curl -X POST https://api.iotools.cloud/v1/tool/css-transition-generator \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "property": "background-color",
    "duration": "300",
    "delay": "0",
    "timing": "ease",
    "baseColor": "#3b82f6",
    "hoverColor": "#8b5cf6",
    "reducedMotion": "true"
  }'

Ganti dengan kunci Anda sendiri dari akun Anda. Bidang alat menjadi isi permintaan — tanpa pembungkus.

Tanyakan ke agen AI

Use the IOTools `css-transition-generator` tool (CSS Transition Generator) on this input:

YOUR_INPUT_HERE

Tempelkan ini ke agen mana pun yang terhubung ke server MCP IOTools, lalu tambahkan input Anda.

Widget sematan

<iframe
  src="https://iotools.cloud/embed/css-transition-generator/"
  width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
  title="Generator Transisi CSS — iotools.cloud"
  sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
  allow="clipboard-write"
  style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>

Tempelkan ini di halaman Anda sendiri — gratis, tanpa kunci, cukup tautan balik.

Biaya per panggilan API/MCPMulai dari 5 kredit
Butuh kredit lebih?Lihat harga

Juga tersedia melalui

IntegrasiEkstensi browserEkstensi VS Code

Panduan

transition CSS membuat perubahan properti terjadi secara bertahap, bukan langsung berubah. Generator ini memungkinkan Anda memilih apa yang dianimasikan, berapa lama durasinya, kapan dimulai, dan bagaimana percepatannya, lalu menampilkan hasilnya pada kotak yang bisa Anda hover, sehingga Anda bisa menyetelnya sesuai rasa sebelum menyalin CSS-nya.

Cara menggunakan

  1. Pilih properti yang akan ditransisikan. all menganimasikan setiap properti yang berubah; menyebutkan satu properti (seperti transform atau background-color) lebih cepat dan lebih mudah diprediksi.
  2. Atur durasi dan jeda dalam milidetik. 150-300 ms terasa responsif untuk efek hover; nilai yang lebih panjang cocok untuk pergerakan besar.
  3. Pilih fungsi pengaturan waktu. ease-out cocok untuk sesuatu yang masuk, ease-in untuk sesuatu yang keluar, linear cocok untuk transisi warna dan progres. Pilih cubic-bezier() kustom untuk mengatur keempat titik kontrol sendiri, atau steps() untuk efek bertahap.
  4. Sesuaikan status hover (warna, dan untuk transform juga besar skala, geser, atau rotasi) lalu arahkan kursor ke pratinjau.
  5. Salin deklarasi transition satu baris, aturan CSS lengkap, atau HTML-nya.

Perlu diketahui

  • Transisi ditulis pada status diam, jadi berlaku saat kursor masuk dan saat keluar. Tambahkan transition yang berbeda pada :hover jika Anda ingin waktu yang tidak simetris.
  • Hanya properti dengan titik tengah yang bisa dihitung yang bisa dianimasikan: warna, panjang, opacity, transform, bayangan, dan filter. display dan height: auto tidak.
  • Utamakan transform dan opacity: browser dapat menganimasikannya di GPU tanpa menghitung ulang tata letak halaman.
  • CSS yang dihasilkan menyertakan blok prefers-reduced-motion secara default agar orang yang meminta gerakan lebih sedikit tidak mendapatkan animasi sama sekali. Hapus centangnya jika Anda menangani hal itu di tempat lain.
  • Untuk editor kurva visual, coba Generator CSS Cubic Bezier.
css transitionhover effecteasingcubic-bezieranimationdurationdelaytransition-timing-functionfrontend

Suka alat-alatnya? Hilangkan iklannya.

Satu kali pembayaran menghapus semua iklan dari akun Anda, selamanya. Tanpa langganan, tanpa pelacakan.

Hapus iklan