Menganimasikan Bentuk clip-path
Buat animasi pembukaan yang dramatis dengan melakukan transition di antara nilai polygon clip-path.
Menganimasikan Bentuk clip-path adalah pelajaran CSS Academy gratis di CoddyKit. Ini adalah pelajaran 3 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar CSS Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus CSS Academy mencakup 4 pelajaran total.
clip-path yang Dapat Dianimasikan
CSS dapat melakukan transisi dan animasi antara dua nilai clip-path selama keduanya menggunakan fungsi bentuk yang sama dengan jumlah argumen yang sama. Interpolasi dilakukan titik demi titik.
Animasi Pengungkapan Geser
Pengungkapan clip-path klasik — konten bergeser masuk dari kiri:
<div class="content visible"></div>
Pengungkapan Melingkar
Perluas lingkaran dari tengah untuk menampilkan konten:
<div class="overlay open"></div>
Morfing Bentuk
Animasikan transisi antar bentuk poligon untuk menghasilkan efek morfing. Kedua poligon harus memiliki jumlah titik sudut yang sama:
<div class="morph-shape"></div>
Menyamakan Jumlah Titik Sudut
Untuk menganimasikan transisi antar bentuk poligon yang berbeda (misalnya, segitiga menjadi persegi), tambahkan titik-titik berimpit tambahan ke bentuk yang lebih sederhana:
<div class="triangle-4pt"></div>
<div class="square-4pt"></div>
Efek Pengungkapan saat Diarahkan
Gambar kartu yang dipotong menjadi lingkaran saat kursor diarahkan ke atasnya:
<div class="card">
<div class="card-img"></div>
</div>
Transisi Usap
Transisi usap diagonal untuk perubahan halaman:
<div class="page-enter"></div>
Kinerja Animasi clip-path
Animasi clip-path memicu tahap pengecatan pada sebagian besar peramban (berbeda dari transform/opacity yang hanya melalui komposisi). Untuk animasi kompleks pada elemen besar, uji kinerjanya di DevTools sebelum diluncurkan.
clip-path dibandingkan dengan mask-image untuk Animasi
Untuk transparansi animasi yang kompleks, mask-image dengan gradien yang dianimasikan dapat memberikan kinerja yang lebih baik daripada clip-path untuk pengungkapan arah sederhana.
Kurva Waktu seperti Pegas dengan clip-path
Kurva waktu yang menyerupai pegas menghasilkan pengungkapan yang terasa alami:
<div class="reveal"></div>
Pemeriksaan Singkat
Apa yang diperlukan agar CSS dapat melakukan interpolasi secara mulus antara dua nilai clip-path polygon()?
Ringkasan
Animasikan transisi antar bentuk clip-path menggunakan transisi atau @keyframes. Interpolasi memerlukan fungsi bentuk yang sama dengan jumlah titik sudut yang sama. Gunakan circle() untuk pengungkapan yang meluas, polygon() untuk usap dan morfing, serta inset() untuk transisi kliping persegi panjang. Samakan jumlah titik sudut dengan menambahkan titik-titik berimpit pada bentuk yang lebih sederhana.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Menganimasikan Bentuk clip-path” gratis?
Ya — teks lengkap “Menganimasikan Bentuk clip-path” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus CSS Academy, upgrade ke CoddyKit PRO. Kursus CSS Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Menganimasikan Bentuk clip-path”?
Buat animasi pembukaan yang dramatis dengan melakukan transition di antara nilai polygon clip-path. Kamu berlatih CSS Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai CSS Academy?
Tidak diperlukan pengalaman sebelumnya. CSS Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 3 dari 4.
Berapa lama pelajaran “Menganimasikan Bentuk clip-path” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran CSS Academy ini?
Ya. Setiap pelajaran CSS Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- clip-path dengan polygon() dan circle()
- shape-outside untuk Pembungkusan Teks
- Menganimasikan Bentuk clip-path
- Mask CSS vs Clip-path