digtools
✨
view transition,

Pembuat CSS View Transition

Simulasikan animasi 'View Transition API' dan CSS(::view-transition-old/new) langsung di browser Anda.

🪄
View Transition API
Pembuatan Kode Otomatis
⚙️
Old/New Animations
Dapat Disesuaikan Sepenuhnya
⚡
SPA & MPA
Output HTML/CSS/JS

Pilih Preset

Pratinjau

Pengaturan Generator

0.5s
0s

※ Titik akhir (To) untuk ::view-transition-old (status keluar)

0
1
0%
0%
0°

※ Titik awal (From) untuk ::view-transition-new (status masuk)

0
1
0%
0%
0° 
 
 
 
 
  
 
  
Anda mungkin juga suka
🎨
Konverter Warna
🎨
Pemilih Warna Gambar
↔️
Pembuat CSS Clamp
 
  
  
 
 about, 
  Ikhtisar Pembuat CSS View Transition 
 
  
Alat ini memungkinkan Anda membangun dan melihat pratinjau animasi transisi halaman yang mulus menggunakan View Transition API generasi berikutnya secara visual di browser Anda.
 
Sekarang Anda dapat dengan mudah menyesuaikan animasi keluar dan masuk (terjemahkan, skala, putar, pudar) dan menyalin kodenya untuk SPA dan MPA tanpa pustaka JS yang berat.
 
Semua pemrosesan terjadi sepenuhnya di dalam browser Anda, memastikan privasi dan keamanan data Anda.
  
 
 
 
 
 how to, 
  Cara Membuat Animasi Transisi 
 
  
 
 STEP 1 
Pilih Preset
 
Pilih preset seperti 'Fade' atau 'Slide Left', atau masukkan 'view-transition-name'.
 
 
 STEP 2 
Pratinjau dan Sesuaikan Animasi
 
Klik 'Mainkan / Alihkan Status' untuk melihat transisi. Sesuaikan parameter di tab 'Old' (keluar) dan 'New' (masuk).
 
 
 STEP 3 
Salin dan Terapkan Kode
 
Salin kode CSS, JavaScript, dan HTML yang dihasilkan dan integrasikan ke proyek Anda.
 
 
  
 
 
 
 
 glossary, 
  Glosarium View Transition 
 
  
 
 
View Transition API
 
Mekanisme di mana browser menangkap tangkapan layar DOM sebelum dan sesudah perubahan secara otomatis, menganimasikan di antara keduanya.
 
 
 
view-transition-name
 
Properti CSS untuk mengidentifikasi elemen yang akan dianimasikan. Elemen dengan nama yang sama ditautkan bersama.
 
 
 
::view-transition-old / new
 
`old` adalah pseudo-elemen untuk status lama (keluar). `new` adalah untuk status baru (masuk).
 
 
 
Cross-document View Transitions
 
Memungkinkan transisi layar antara MPA dianimasikan dengan menambahkan tag meta, melampaui SPA.
 
 
  
 
 
 
 
 faq, 
  Pertanyaan yang Sering Diajukan (FAQ) 
 
  
 
 
Q.Apakah data saya dikirim ke server?
 
Tidak, alat ini sepenuhnya beroperasi di dalam browser Anda. Tidak ada data yang dikirim ke luar. Ini berfungsi dengan aman bahkan saat offline.
 
 
Q.Apakah animasi akan berfungsi di semua browser?
 
Ini didukung di Chrome 111+, Edge 111+, Safari 18+. Untuk browser yang tidak didukung seperti Firefox, itu dengan aman beralih kembali ke perubahan halaman instan reguler tanpa merusak situs Anda.
 
 
Q.Bisakah saya menggunakannya untuk MPA (Aplikasi Multi-Halaman)?
 
Ya, dengan menambahkan `<meta name="view-transition" content="same-origin" />` ke `<head>` HTML Anda dan CSS, Anda dapat mengimplementasikan animasi tanpa menulis JavaScript.
 
 
Q.Apa yang harus saya gunakan untuk view-transition-name?
 
Tentukan string yang sepenuhnya unik di dalam halaman. Jika nama yang sama ada pada beberapa elemen, animasi akan gagal.
 
 
  
 
 
 
 
 use cases, 
  Kasus Penggunaan 
 
  
Berikut adalah contoh penerapan umum.
 
 
 🛒 
Detail Produk di E-Commerce
 
Mengeklik thumbnail memperluas gambar dengan mulus ke halaman detail.
 
 
 📱 
Alur UI Layaknya Aplikasi Asli
 
Raih animasi layar meluncur ala aplikasi asli langsung di browser. Sempurna untuk PWA.
 
 
 🌗 
Peralihan Mode Gelap
 
Tambahkan efek animasi lingkaran warna yang meluas saat mengaktifkan mode gelap.
 
 
 📋 
Menyortir dan Memfilter Daftar
 
Elemen yang dihapus memudar sementara yang tersisa meluncur ke posisi barunya secara visual.
 
 
  
 
 
 
 
 
 
  Alat Terkait 
  Generator CSSLihat semua   
 
   
 🎨 
 
 
 Konverter Warna 
 
 Konversi kode HEX/RGB/HSL/CMYK dan buat palet warna. 
 
 
  
   
 🎨 
 
 
 Pemilih Warna Gambar 
 
 Ekstrak warna dari gambar dan dapatkan kode warna (HEX/RGB) 
 
 
  
   
 ↔️ 
 
 
 Pembuat CSS Clamp 
 
 Secara otomatis menghitung nilai fungsi clamp() fluida untuk desain responsif. 
 
 
  
   
 ✂️ 
 
 
 Pembuat clip-path CSS 
 
 Buat bentuk clip-path CSS dengan mudah menggunakan operasi seret dan hasilkan kode. 
 
 
  
   
 📦 
 
 
 Generator Container Query CSS 
 
 Hasilkan container query secara visual dengan pratinjau langsung & konversi. 
 
 
  
   
 🖼️ 
 
 
 Generator Filter & Blend CSS 
 
 Gabungkan filter secara visual, hasilkan kode, dan simpan gambar. 
 
 
  
   
 🎨 
 
 
 Generator Gradien CSS 
 
 Hasilkan gradien linear, radial, conic, dan pola secara intuitif. 
 
 
  
   
 📐 
 
 
 Generator Layout Flexbox/Grid 
 
 Buat kode layout dengan GUI visual 
 
 
  
   
 ☁️ 
 
 
 Generator Box-Shadow 
 
 Buat bayangan multi-lapis yang indah secara intuitif 
 
 
  
  
 
 
 
  Semua Kategori 
 
  Alat Web & Pengembang  Generator CSS  Alat Gambar & Foto  Alat Video & Audio  SEO & Pemasaran  Jaringan & Infrastruktur  Analisis & Pemrosesan Teks  Alat Keuangan & Gaji  Alat Tanggal & Kalender  Alat Dokumen & Bisnis  Permainan & Acara  Kehidupan & Kesehatan   Halaman Utama  
 
 
 
  
 
 
  Kirim Umpan Balik 
 
Beri tahu kami pendapat Anda untuk membantu kami menyempurnakan alat ini.
 
       
   
 
     
 
 
  
  
 
  
 
 
    
  
   
 
 
 
  Sanggahan 
 
 Semua alat yang disediakan di situs ini sepenuhnya gratis untuk digunakan, namun harap gunakan dengan risiko Anda sendiri. Kami tidak memberikan jaminan apa pun terkait keakuratan, kelengkapan, atau keamanan hasil perhitungan, hasil konversi, atau data yang dihasilkan. Harap diketahui bahwa operator tidak bertanggung jawab atas segala kerusakan atau masalah yang disebabkan oleh penggunaan alat-alat ini. Sebagian besar alat memproses file dan perhitungan secara lokal di browser Anda, artinya data yang Anda masukkan tidak dikirim atau disimpan di server kami.