0Pricing
CSS Academy · Pelajaran

Arah Animasi, Fill-Mode, dan Iterasi

Kendalikan arah pemutaran animasi, jumlah pengulangannya, dan keadaan akhir dengan fill-mode.

Arah Animasi, Fill-Mode, dan Iterasi adalah pelajaran CSS Academy gratis di CoddyKit. Ini adalah pelajaran 2 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.

Jumlah Pengulangan Animasi

Mengatur berapa kali animasi diulang. Gunakan infinite untuk pengulangan terus-menerus.

<div class="spinner"></div>
<div class="pulse"></div>

Arah Animasi

Mengatur arah pemutaran pada siklus yang bergantian:

  • normal — diputar maju pada setiap pengulangan
  • reverse — diputar mundur
  • alternate — maju lalu mundur secara bergantian
  • alternate-reverse — mundur lalu maju
<div class="bounce"></div>

Mode Pengisian Animasi

Menentukan apa yang terjadi pada elemen sebelum animasi dimulai dan setelah animasi berakhir:

  • none — bawaan, kembali ke keadaan semula
  • forwards — mempertahankan bingkai kunci terakhir setelah selesai
  • backwards — menerapkan bingkai kunci pertama selama jeda
  • both — menerapkan keduanya, sebelum dan sesudah

Mode Pengisian ke Depan

Kasus penggunaan yang paling umum—mempertahankan elemen dalam keadaan akhir hasil animasinya setelah animasi selesai:

<p class="item">I fade in and stay visible</p>

Mode Pengisian ke Belakang

Saat terdapat jeda, backwards membuat elemen dimulai dari keadaan bingkai kunci pertama selama periode jeda, sehingga mencegah kilatan keadaan semula sebelum animasi dimulai:

<p class="item">Starts invisible during the delay</p>

Mode Pengisian Keduanya

both menggabungkan mode ke depan dan ke belakang—pilihan yang paling mudah diprediksi untuk elemen animasi yang tidak boleh berkedip sebelum atau sesudah animasi.

Jeda Animasi

Menunda dimulainya animasi. Jeda negatif membuat animasi dimulai dari bagian tengah—berguna untuk menyinkronkan beberapa animasi:

<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>

Pola Animasi Bertahap

Animasi bertahap khusus CSS menggunakan jeda berdasarkan elemen anak ke-n:

<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>

Menjeda dan Melanjutkan

Alihkan keadaan animasi dengan JavaScript dengan mengubah animation-play-state:

<div class="spinner" id="js-spinner"></div>
<button onclick="const s=document.getElementById('js-spinner').style; s.animationPlayState = s.animationPlayState === 'paused' ? 'running' : 'paused';">Pause / Resume</button>

Mengatur Ulang Animasi

Untuk memutar ulang animasi CSS, hapus lalu tambahkan kembali kelasnya. Peramban menerapkan trik berikut: paksa aliran ulang di antara penghapusan dan penambahan.

<div class="box" id="reset-box"></div>
<button onclick="const el=document.getElementById('reset-box'); el.classList.remove('animate'); void el.offsetWidth; el.classList.add('animate');">Replay Animation</button>

Jeda Animasi Negatif

Mulai animasi dari tengah pemutaran menggunakan jeda negatif—berguna untuk pola latar belakang yang disinkronkan atau elemen berulang yang seharusnya tampak sudah bergerak.

<div class="star"></div>
<div class="star"></div>
<div class="star"></div>

Pemeriksaan Singkat

Nilai mode pengisian animasi mana yang mempertahankan elemen pada keadaan bingkai kunci terakhir setelah animasi berakhir?

Ringkasan

animation-iteration-count: infinite mengulang tanpa batas. animation-direction: alternate membuat gerakan bolak-balik. animation-fill-mode: forwards mempertahankan keadaan akhir. animation-fill-mode: both adalah pilihan yang paling aman. Gunakan jeda negatif untuk mengimbangi animasi yang disinkronkan.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Arah Animasi, Fill-Mode, dan Iterasi” gratis?

Ya — teks lengkap “Arah Animasi, Fill-Mode, dan Iterasi” 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 “Arah Animasi, Fill-Mode, dan Iterasi”?

Kendalikan arah pemutaran animasi, jumlah pengulangannya, dan keadaan akhir dengan fill-mode. 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 2 dari 4.

Berapa lama pelajaran “Arah Animasi, Fill-Mode, dan Iterasi” 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. Sintaks @keyframes dan Properti Animasi
  2. Arah Animasi, Fill-Mode, dan Iterasi
  3. Merangkai dan Mengurutkan Animasi
  4. Animasi yang Aksesibel dengan prefers-reduced-motion
← Kembali ke CSS Academy