Tutorial CSS / Animasi Keyframe CSS: Fill Mode, Arah, dan Jeda

Animasi keyframe CSS menjelaskan nilai properti sepanjang garis waktu animasi dan dapat berjalan tanpa pemicu hover atau fokus. Durasi, penundaan, jumlah iterasi, fill mode, dan status pemutaran mengontrol bagian yang berbeda dari perilaku tersebut.

Membedakan transisi dan animasi keyframe

Transisi cocok untuk perubahan sederhana, misalnya warna latar tombol. Anda dapat melihat animasi untuk efek seperti ketika notifikasi muncul pertama kali atau untuk penjelasan visual yang melalui beberapa langkah. Mengontrol properti yang sama pada elemen yang sama dengan dua fungsi secara bersamaan membuat sulit untuk melacak nilai mana yang diterapkan, jadi untuk latihan ini kita membagi peran. Jika efek sebelum dan sesudah perubahan keadaan sudah cukup, pertimbangkan memulai dengan transisi sederhana menggunakan CSS Transforms dan Transitions.

Tentukan keyframes dan pengaturan pemutaran

Dalam keyframe, from sesuai dengan 0%, dan to sesuai dengan 100%. Jika Anda memerlukan keadaan perantara, tambahkan persentase kemajuan seperti 50%. Hanya mendeklarasikan nama keyframe tidak akan membuatnya berjalan; Anda harus mengaitkannya dengan animation-name dari elemen tersebut.

@keyframes travel {
  0% { transform: translateX(0); }
  50% { transform: translateX(3rem); }
  100% { transform: translateX(6rem); }
}
.marker { animation: travel 4s linear 1s 1 normal forwards; }

Kode sebagian ini adalah versi singkat dari keyframe dan pengaturan .marker dengan nama yang sama dalam contoh lengkap di bawah. 4s adalah waktu yang dibutuhkan untuk diputar sekali dan 1s adalah penundaan awal. Jika durasi tidak ditentukan, nilai default adalah 0 detik, sehingga sulit untuk mengamati proses pergerakan. Anda dapat mengurangi kebingungan tentang waktu dan frekuensi dengan membaginya menjadi properti terperinci pada awalnya.

Persentase keyframe yang berjarak sama belum menjamin kecepatan gerak konstan; kurva waktunya juga berpengaruh. Latihan ini menggunakan linear, yang memudahkan untuk memeriksa posisi sementara. Untuk pembuatan dan penghubungan keyframe, lihat dokumen MDN @keyframes .

Bandingkan arah, jumlah iterasi, dan fill mode

normal bergerak dari awal ke akhir, dan reverse bergerak dari akhir ke awal. alternate dimainkan secara bergantian dalam arah maju pada kali pertama dan arah mundur pada kali berikutnya. Jika jumlah iterasi adalah 2 dan bergantian, yang terakhir akan sampai pada keyframe pertama.

forwards bukan pengaturan yang selalu mempertahankan 100% keyframe. Tergantung pada arah pemutaran dan jumlah kali, nilai dari keyframe terakhir yang benar-benar tercapai akan dipertahankan. Dalam contoh, sekali dalam arah maju mempertahankan posisi 6rem, sekali dalam arah mundur mempertahankan posisi 0, dan dua kali dalam arah bergantian juga mempertahankan posisi 0. Deskripsi ini didasarkan pada jumlah bulat pemutaran yang telah selesai, angka pecahan mungkin berakhir di tengah-tengah proses. Kondisi untuk setiap arah dirangkum dalam penjelasan animation-fill-mode MDN.

Jika nilai CSS dasar dan nilai keyframe akhir sama, perbedaan antara none dan forwards mungkin tidak terlihat. Kotak gerak di bawah memiliki posisi default 1rem, awal 0, dan akhir 6rem untuk menunjukkan perbedaannya. Di sisi lain, pesan petunjuk menggunakan gaya dasar yang sudah terlihat, sehingga tetap terbaca jika animasi dihapus.

Jalankan dan ubah satu pengaturan setiap kali

Simpan kode berikut sebagai animation-lab.html dalam UTF-8 dan buka di browser Anda. Pesan di atas muncul melalui animasi singkat dan kemudian tetap terlihat, dan kotak dekoratif bagian bawah mulai bergerak setelah 1 detik dan bergerak selama 4 detik. Setelah memodifikasi nilainya, simpan file dan muat ulang halaman untuk membandingkan dari awal.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Keyframes and end states exercise</title>
  <style>
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; padding: 1rem; color: #183044; font-family: sans-serif; line-height: 1.6; }
main { max-width: 46rem; margin-inline: auto; }
h1 { font-size: 1.5rem; } h2 { font-size: 1.2rem; }
button, input { font: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid #164f73; outline-offset: 3px; }
.notice { padding: 1rem; border: 1px solid #90bdd8; border-radius: .5rem; background: #eaf4fa;
  opacity: 1; transform: none; animation: appear 400ms ease-out; }
@keyframes appear {
  from { opacity: 0; transform: translateY(.5rem); }
  to { opacity: 1; transform: translateY(0); }
}
.track { margin-block: 1rem; padding: 1rem; border: 2px dashed #8a9ba7; }
.marker { width: 2rem; height: 2rem; border-radius: .25rem; background: #166b92;
  transform: translateX(1rem);
  animation-name: travel; animation-duration: 4s; animation-timing-function: linear;
  animation-delay: 1s; animation-iteration-count: 1; animation-direction: normal;
  animation-fill-mode: forwards; }
@keyframes travel {
  0% { transform: translateX(0); background-color: #166b92; }
  50% { transform: translateX(3rem); background-color: #6a3989; }
  100% { transform: translateX(6rem); background-color: #28633b; }
}
#pause:checked ~ .track .marker { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .notice, .marker { animation: none; }
}
  </style>
</head>
<body>
<main>
<h1>Check entrance and movement</h1>
<p class="notice">This notice remains readable without animation.</p>
<h2>Comparing end states</h2>
<p>Movement starts one second after loading. Refresh the page to compare again.</p>
<input id="pause" type="checkbox"><label for="pause">Pause movement</label>
<div class="track"><div class="marker" aria-hidden="true"></div></div>
<p>The colors and movement are decorative. Essential information remains available independently of the animation, as in this sentence.</p>
</main>
</body>
</html>

1. Dalam pengaturan default, kotak berada pada posisi 1rem selama penundaan, bergerak ke 0 saat mulai, dan tetap pada posisi 6rem saat selesai. Periksa perbedaan antara nilai penundaan dan nilai mulai.
2. Ubah hanya animation-fill-mode menjadi none dan segarkan. Setelah selesai, kembali ke posisi default 1rem dan warna biru default. Kembalikan ke forwards.
3. Ubah hanya fill-mode menjadi both. Posisi awal 0 berlaku bahkan selama penundaan. Setelah dikonfirmasi, kembalikan ke forwards.
4. Biarkan count sebagai 1 dan ubah direction menjadi reverse. Setelah selesai, periksa bahwa posisi 0 tetap dan kembalikan ke normal.
5. Periksa hasilnya dengan mengubah animation-direction ke alternate dan mempertahankan jumlah pada 1. Dalam keadaan itu, jika Anda mengubah angka menjadi 2, pemutaran kedua akan terjadi. Setelah konfirmasi, jumlah kembali menjadi 1 dan arah dikembalikan ke normal.
6. Segera setelah menyegarkan, nyalakan kotak centang Pause movement dan tunggu sebentar. Jika Anda membatalkannya, Anda akan melanjutkan dari tempat terakhir Anda berhenti. Ini berbeda dari kemampuan untuk memutar ulang dari awal.

Pertahankan konten terlihat dengan gerakan berkurang

Aturan prefers-reduced-motion pada contoh menghapus animasi pesan dan kotak dekoratif. Instruksi masih dapat dibaca karena default adalah opacity: 1 dan kotak muncul pada posisi default 1rem. Membiarkan keadaan terbaca hanya pada keyframe akhir atau efek forwards dapat menyebabkan konten menghilang jika tidak ada animasi.

Aktifkan gerakan dikurangi di panel Rendering DevTools atau sistem operasi dan muat ulang. Kedua elemen harus tetap diam sementara kontennya tetap terlihat. Konsultasikan panduan MDN prefers-reduced-motion, lalu kembalikan pengaturan emulasi setelah perbandingan. Juga ikuti Periksa CSS Responsif dengan Lebar, Zoom, dan Tes Keyboard untuk memeriksa pemotongan dan kegunaan saat gerakan dinonaktifkan.

Sebelum menambahkan pengulangan tak terbatas, tentukan mengapa gerakan diperlukan dan bagaimana itu akan berhenti. Contoh ini menggunakan iterasi terbatas dan menyediakan informasi penting secara independen dari gerakan dan warna. Jika tidak ada yang bergerak, periksa nama animasi, durasi, dan kondisi gerakan yang dikurangi. Untuk keadaan akhir yang tak terduga, bandingkan arah, jumlah iterasi, fill mode, dan CSS yang mendasarinya.