0Pricing
CSS Academy · Pelajaran

Menerapkan Transition pada Banyak Properti

Terapkan transition pada beberapa properti CSS sekaligus menggunakan nilai yang dipisahkan koma.

Menerapkan Transition pada Banyak Properti 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.

Mengapa Menggunakan Beberapa Transisi Properti?

Interaksi antarmuka nyata sering melibatkan beberapa properti yang berubah secara bersamaan — warna latar belakang, bayangan, dan skala saat kursor diarahkan. CSS mendukung easing dan durasi yang berbeda untuk setiap properti.

Transisi yang Dipisahkan Koma

Cantumkan beberapa transisi dengan koma. Setiap entri diterapkan pada satu properti secara terpisah:

  <div class="card">Card</div>

Durasi Berbeda untuk Setiap Properti

Berikan kecepatan berbeda pada setiap properti untuk menghasilkan kesan berlapis yang alami:

  <button class="btn">Hover-ready button</button>

Easing Berbeda untuk Setiap Properti

Padukan fungsi easing agar setiap properti terasa sesuai:

  <div class="modal">Modal content</div>

Kekurangan transition: all

Menggunakan transition: all berarti setiap properti yang berubah mendapatkan pengaturan waktu yang sama. Hal ini dapat menyebabkan animasi yang tidak diinginkan pada properti yang seharusnya langsung berubah (seperti perubahan display atau posisi).

Transisi yang Dapat Diinterupsi

Transisi CSS dapat diinterupsi. Jika keadaan kursor berakhir di tengah transisi, transisi berbalik dari nilai yang sedang dianimasikan, bukan dari keadaan akhir. Hasilnya adalah pembalikan yang halus tanpa lompatan yang mengganggu.

Mengatur Masuk dan Keluar

Gunakan durasi yang berbeda untuk kursor masuk dan keluar dengan menimpa transisi dalam keadaan :hover:

  <div class="card demo-active">Card</div>

Membuat Jeda Bertahap

Tambahkan penundaan yang semakin besar pada elemen saudara untuk menghasilkan efek kemunculan bertahap:

  <div class="item">One</div>
  <div class="item">Two</div>
  <div class="item">Three</div>

Properti Kustom CSS untuk Jeda Bertahap

Tetapkan penundaan bertahap dari properti kustom CSS yang diatur melalui JavaScript atau HTML:

  <div class="item">Item</div>

Transisi vs Animasi

Gunakan transisi untuk perubahan dua keadaan (diam → kursor diarahkan). Gunakan animasi @keyframes untuk rangkaian beberapa langkah, efek berulang, atau animasi yang dimulai sendiri.

Optimasi Will-change

Beri petunjuk kepada peramban tentang properti yang akan dianimasikan agar dapat melakukan optimasi awal. Gunakan secukupnya — fitur ini menggunakan memori GPU.

  <div class="card">Card</div>

Pemeriksaan Singkat

Sebuah kartu memiliki transition: background 150ms, transform 250ms pada keadaan dasar. Saat kursor diarahkan, apa yang terjadi jika pengguna segera memindahkan kursor menjauh di tengah animasi?

Ringkasan

Transisi yang dipisahkan dengan koma memungkinkan setiap properti memiliki durasi, pelandaian, dan jedanya sendiri. Hindari transition: all—aturan ini dapat menganimasikan properti yang tidak diinginkan. Transisi dapat diinterupsi dan berbalik arah dengan mulus dari posisi saat ini. Gunakan jeda untuk efek bertahap.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Menerapkan Transition pada Banyak Properti” gratis?

Ya — teks lengkap “Menerapkan Transition pada Banyak Properti” 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 “Menerapkan Transition pada Banyak Properti”?

Terapkan transition pada beberapa properti CSS sekaligus menggunakan nilai yang dipisahkan koma. 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 “Menerapkan Transition pada Banyak Properti” 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

  1. Durasi dan Waktu Properti Transition
  2. Fungsi Easing: ease linear cubic-bezier
  3. Menerapkan Transition pada Banyak Properti
  4. Performa: Properti yang Dapat Ditranformasi vs Pengecatan Ulang
← Kembali ke CSS Academy