Animasi CSS: @keyframes, Properti, dan Contoh

Animasi CSS dalam satu contoh

Sebuah animasi punya dua bagian: @keyframes, yang menjelaskan langkah-langkahnya, dan properti animation, yang menerapkannya ke elemen dengan durasi tertentu. Kartu ini bergeser masuk dan muncul perlahan saat halaman dimuat:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>CSS animation</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    @keyframes slide-in {
      from { opacity: 0; transform: translateY(20px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .card {
      padding: 16px;
      border-radius: 8px;
      background: #2563eb;
      color: white;
      animation: slide-in 0.6s ease-out both;
    }
    /* Keep only the fade for people who asked for less motion */
    @media (prefers-reduced-motion: reduce) {
      @keyframes slide-in { from { opacity: 0; } to { opacity: 1; } }
    }
  </style>
</head>
<body>
  <div class="card">Hello! This card animated in.</div>
</body>
</html>

Ubah kodenya (atau ganti durasinya menjadi 2s) dan pratinjau akan dimuat ulang, jadi kamu bisa melihat kartu itu masuk lagi. Blok @media (prefers-reduced-motion: reduce) mengganti keyframe dengan efek muncul perlahan saja, khusus untuk pembaca yang sistemnya diatur untuk mengurangi gerakan.

Sintaks @keyframes

@keyframes pulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}

• from sama dengan 0% dan to sama dengan 100%.
• Tambahkan langkah persentase sebanyak yang kamu perlukan. Langkah dengan style yang sama bisa berbagi satu baris: 0%, 100% { ... }.
• Properti yang tidak ada di keyframe pertama atau terakhir dianimasikan dari atau menuju nilai milik elemen itu sendiri.
• Namanya (pulse) adalah nilai yang kamu berikan ke animation-name. Nama ini peka huruf besar kecil dan tidak boleh berupa kata kunci seperti none.

Properti animation

Shorthand-nya menerima nilai-nilai ini dalam urutan hampir apa saja. Satu-satunya aturan: nilai waktu pertama adalah durasi dan nilai waktu kedua adalah delay:

.loader {
  animation: pulse 1.2s ease-in-out 0.2s infinite alternate both;
  /*         name  duration timing  delay count   direction fill */
}

direction dan fill-mode secara langsung

Pilih direction, fill mode, dan jumlah perulangan, lalu tekan Play. Kotak itu bergerak 200px ke ujung lintasan. Teks di bawahnya menunjukkan posisi kotak setelah animasi selesai:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>direction and fill-mode</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    @keyframes move {
      from { transform: translateX(0); background: #2563eb; }
      to   { transform: translateX(200px); background: #16a34a; }
    }
    .track { width: 240px; background: #f3f4f6; margin: 10px 0; }
    #box { width: 40px; height: 40px; background: #f59e0b; }
    .controls { display: flex; flex-wrap: wrap; gap: 10px; }
  </style>
</head>
<body>
  <div class="controls">
    <label>direction <select id="dir"><option>normal</option><option>reverse</option><option>alternate</option></select></label>
    <label>fill-mode <select id="fill"><option>none</option><option>forwards</option><option>backwards</option><option>both</option></select></label>
    <label>count <select id="count"><option>1</option><option>2</option></select></label>
    <button id="play">Play</button>
  </div>
  <div class="track"><div id="box"></div></div>
  <p id="out">The amber color is the box's own style, used whenever no keyframe applies.</p>
  <script>
    const box = document.getElementById('box');
    const val = (id) => document.getElementById(id).value;
    document.getElementById('play').addEventListener('click', () => {
      box.style.animation = 'none';
      box.offsetWidth; // restart: let the browser see the animation removed
      box.style.animation = 'move 1s ease-in-out ' + val('count') + ' ' + val('dir') + ' ' + val('fill');
    });
    box.addEventListener('animationend', () => {
      const x = new DOMMatrix(getComputedStyle(box).transform).m41;
      document.getElementById('out').textContent = 'Finished at x = ' + Math.round(x) + 'px, color ' + getComputedStyle(box).backgroundColor;
    });
  </script>
</body>
</html>

Yang perlu diperhatikan:

• fill-mode: none (default): setelah frame terakhir, kotak melompat kembali ke x = 0 dan berwarna kuning tua lagi.
• forwards: kotak tetap di keyframe terakhir. Dengan normal posisinya x = 200 dan hijau; dengan reverse ia berakhir di x = 0 dan biru, karena keyframe terakhir yang dimainkan adalah from.
• alternate dengan jumlah 2 berjalan ke sana lalu kembali, jadi bahkan dengan forwards kotak berakhir di x = 0.

Perulangan tanpa henti: indikator loading

infinite mengulang animasi selamanya, dan animation-delay pada setiap anak elemen menggeser waktunya sehingga mereka bergerak bergantian. Buat perulangan tetap tenang: lambat, kecil, tanpa kedip.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Loading dots</title>
  <style>
    @keyframes bounce {
      0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
      40%           { transform: scale(1);   opacity: 1; }
    }
    .dots { display: flex; gap: 8px; padding: 12px; }
    .dots span {
      width: 14px;
      height: 14px;
      border-radius: 50%;
      background: #2563eb;
      animation: bounce 1.4s ease-in-out infinite;
    }
    .dots span:nth-child(2) { animation-delay: 0.2s; }
    .dots span:nth-child(3) { animation-delay: 0.4s; }
    @keyframes fade {
      0%, 80%, 100% { opacity: 0.4; }
      40%           { opacity: 1; }
    }
    @media (prefers-reduced-motion: reduce) {
      .dots span { animation-name: fade; } /* no size change, only a soft fade */
    }
  </style>
</head>
<body>
  <div class="dots" role="status" aria-label="Loading"><span></span><span></span><span></span></div>
</body>
</html>

role="status" bersama aria-label memberi tahu pengguna pembaca layar bahwa ada sesuatu yang sedang dimuat, hal yang tidak bisa disampaikan titik-titik itu sendiri. Untuk lingkaran yang berputar, lihat halaman rotate.

Menjeda dan mengendalikan animasi

animation-play-state: paused membekukan animasi di posisinya, dan running melanjutkannya dari sana. Arahkan kursor ke batang di bawah untuk menjedanya:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Pause on hover</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    @keyframes slide {
      from { transform: translateX(0); }
      to   { transform: translateX(260px); }
    }
    .track { width: 300px; padding: 6px 0; background: #f3f4f6; }
    .bar { width: 40px; height: 24px; border-radius: 4px; background: #16a34a; animation: slide 3s ease-in-out infinite alternate; }
    .track:hover .bar { animation-play-state: paused; }
  </style>
</head>
<body>
  <div class="track"><div class="bar"></div></div>
  <p>Hover the gray track to pause.</p>
</body>
</html>

Dari JavaScript, element.getAnimations() mengembalikan animasi CSS yang sedang berjalan, masing-masing dengan pause(), play(), cancel(), dan currentTime yang bisa kamu baca atau atur. Event animationend dipicu saat animasi yang tidak infinite selesai, dan animationiteration di akhir setiap siklus.

Hormati pengaturan gerakan dikurangi dan jangan pernah berkedip

Dua aturan aksesibilitas berlaku untuk setiap animasi:

1. Gerakan dikurangi. Orang bisa meminta sistemnya mengurangi gerakan karena gerakan membuat mereka tidak nyaman. Pola paling aman adalah menambahkan gerakan hanya jika mereka tidak meminta pengurangan:

@media (prefers-reduced-motion: no-preference) {
  .hero-title { animation: slide-in 0.8s ease-out both; }
}

2. Tanpa kedip. Konten yang berkedip lebih dari tiga kali dalam satu detik bisa memicu kejang. Hindari kedipan cepat dengan kontras tinggi sama sekali.

Jaga animasi tetap mulus

Animasikan transform dan opacity kapan pun bisa. Browser bisa menerapkannya tanpa menata ulang halaman, jadi animasinya tetap mulus bahkan di ponsel yang lambat. Menganimasikan width, height, top, left, atau margin menghitung ulang tata letak di setiap frame. Untuk memindahkan elemen, pakai translate() dari halaman transform.

Kesalahan umum

• Tanpa durasi. animation: fade; tidak melakukan apa-apa, karena durasi default-nya 0s.
• Nama yang tidak cocok. animation-name harus sama persis dengan nama @keyframes, termasuk huruf besar kecilnya.
• Melompat kembali di akhir. Tambahkan forwards (atau both) untuk mempertahankan keyframe terakhir.
• Kedipan sebelum animasi yang tertunda dimulai. Selama animation-delay, elemen menampilkan style normalnya. backwards (atau both) menerapkan keyframe pertama selama delay.
• Memulai ulang animasi dengan mengatur nilai yang sama. Mengatur animation yang sama lagi tidak melakukan apa-apa. Hapus dulu, paksa reflow (el.offsetWidth), lalu atur lagi, seperti yang dilakukan tombol Play di atas.
• Menganimasikan display. Properti ini langsung berganti. Animasikan opacity dan transform sebagai gantinya.