0Pricing
CSS Academy · Pelajaran

Durasi dan Waktu Properti Transition

Tentukan properti yang mengalami transition, durasinya, dan waktu mulainya dengan delay.

Durasi dan Waktu Properti Transition adalah pelajaran CSS Academy gratis di CoddyKit. Ini adalah pelajaran 1 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.

Apa Itu Transisi CSS?

Transisi CSS melakukan interpolasi antara dua nilai properti selama durasi yang ditentukan saat nilainya berubah (misalnya, saat kursor diarahkan). JavaScript tidak diperlukan.

Properti Transisi

Menentukan properti CSS mana yang akan dianimasikan. Gunakan all untuk mentransisikan setiap properti yang dapat dianimasikan, atau cantumkan properti tertentu.

  <button>Save changes</button>

Durasi Transisi

Menentukan lamanya transisi berlangsung. Menerima nilai waktu dalam detik (s) atau milidetik (ms).

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

Singkatan Transisi

Menggabungkan keempat subproperti transisi: properti | durasi | fungsi pengaturan waktu | penundaan.

  <button class="btn">Submit</button>

Beberapa Transisi

Cantumkan beberapa transisi yang dipisahkan dengan koma untuk menganimasikan properti yang berbeda secara terpisah:

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

Penundaan Transisi

Menunda dimulainya transisi. Berguna untuk mengurutkan animasi atau membiarkan satu transisi selesai sebelum transisi lain dimulai.

  <nav>
    <a class="nav-item" href="#">Home</a>
    <a class="nav-item" href="#">About</a>
    <a class="nav-item" href="#">Contact</a>
  </nav>

Transisi pada Keadaan Dasar

Selalu tempatkan properti transition pada keadaan dasar, bukan pada keadaan :hover. Dengan demikian, transisi berjalan saat kursor masuk maupun keluar.

  <button class="btn demo-active">Hover me</button>

Apa Saja yang Dapat Ditransisikan?

Sebagian besar properti CSS numerik dapat ditransisikan: warna, dimensi, opasitas, transformasi, dan sebagainya. Properti diskret (seperti display) tidak dapat diinterpolasikan dengan halus — nilainya langsung berpindah.

Peringatan transition: all

Menggunakan transition: all dapat menyebabkan animasi yang tidak terduga pada properti yang tidak ingin Anda animasikan. Selalu tentukan properti secara eksplisit dalam kode produksi.

Mentransisikan Warna

Transisi warna melakukan interpolasi antara beberapa nilai. Gunakan format warna yang sama untuk hasil terbaik:

  <button class="btn demo-active">Hover me</button>

Transisi dan Perubahan Tata Letak Berulang

Hindari mentransisikan properti yang memicu tata letak seperti width, height, margin, dan padding demi kinerja. Properti tersebut menyebabkan penghitungan ulang tata letak pada setiap bingkai animasi. Gunakan transform dan opacity sebagai gantinya.

Pemeriksaan Singkat

Di mana properti transition harus ditempatkan agar berjalan saat kursor masuk maupun keluar?

Rangkuman

Transisi CSS menghaluskan perubahan properti seiring waktu menggunakan transition-property, duration, timing-function, dan delay. Tempatkan transisi pada keadaan dasar agar animasi berjalan dua arah. Utamakan daftar properti tertentu daripada all demi kinerja dan hasil yang dapat diprediksi.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Durasi dan Waktu Properti Transition” gratis?

Ya — teks lengkap “Durasi dan Waktu Properti Transition” 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 “Durasi dan Waktu Properti Transition”?

Tentukan properti yang mengalami transition, durasinya, dan waktu mulainya dengan delay. 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 1 dari 4.

Berapa lama pelajaran “Durasi dan Waktu Properti Transition” 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