cssanimasikeyframesMenengah5 mnt baca

Keyframes Dasar

Animasi multi-langkah dengan @keyframes: dari, ke, dan persen.

Transisi vs keyframes

Transisi hanya bisa menganimasikan antara dua state (normal ke hover). Tapi bagaimana dengan animasi yang jalan sendiri: loading spinner yang berputar terus, bola yang memantul tiga kali, atau teks yang berjalan? Untuk itu ada @keyframes: kamu mendefinisikan banyak titik (frame) dalam timeline, browser mengisi perpindahan di antaranya.

Analoginya: transisi seperti video 2 foto (sebelum-sesudah). Keyframes seperti storyboard film: kamu menggambar adegan kunci, animator mengisi gerakan di antaranya.

Sintaks @keyframes

css

@keyframes memantul {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-40px);
  }
}

.bola {
  animation: memantul 0.6s ease-in-out infinite alternate;
}

from/to sama dengan 0%/100%. Properti animation menjalankan keyframes bernama "memantul".

Keyframes multi-langkah dengan persen

Kekuatan sebenarnya: banyak titik.

css

@keyframes lampu-lalu-lintas {
  0%   { background: #ef4444; } /* merah */
  33%  { background: #f59e0b; } /* kuning */
  66%  { background: #22c55e; } /* hijau */
  100% { background: #ef4444; } /* kembali merah */
}

.lampu {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  animation: lampu-lalu-lintas 6s linear infinite;
}

Browser menginterpolasi warna di antara titik-titik itu secara mulus.

Contoh: spinner loading

css

@keyframes putar {
  to {
    transform: rotate(360deg);
  }
}

.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #e2e8f0;
  border-top-color: #38bdf8;
  border-radius: 50%;
  animation: putar 0.8s linear infinite;
}

Triknya: lingkaran dengan satu sisi berwarna, diputar terus. Pola loading paling umum di web.

Contoh: fade-in saat load

css

@keyframes muncul {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.kartu {
  animation: muncul 0.5s ease-out;
}

Animasi jalan sekali saat halaman dimuat. Elemen muncul dari bawah dengan fade, efek "masuk" yang elegan.

Catatan teknis: nama keyframes bersifat global di seluruh stylesheet. Pakai nama yang spesifik (misal anim-muncul-kartu) agar tidak tabrakan dengan library lain.

Tips profesional

Beri nama keyframes dengan prefix proyek: @keyframes omni-fade-up agar tidak tabrakan dengan library.
Keyframes bisa menganimasikan BEBERAPA properti sekaligus dalam satu timeline.
Untuk animasi loop yang mulus, pastikan frame 0% dan 100% IDENTIK agar tidak ada lompatan.

Pola siap salin: fade-up entrance

css

@keyframes fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

.masuk {
  animation: fade-up 0.6s ease-out both;
}

.masuk-telat-1 { animation: fade-up 0.6s ease-out 0.15s both; }
.masuk-telat-2 { animation: fade-up 0.6s ease-out 0.3s both; }

Elemen muncul dari bawah berurutan: pola entrance hero/landing paling populer.

Rangkuman

@keyframes mendefinisikan banyak titik animasi (from/to atau persen). Pasangkan dengan properti animation untuk menjalankannya. Cocok untuk animasi mandiri: spinner, pantulan, dan efek masuk.

Live Playground

export default function App(): JSX.Element {
  return <h1>Hello world</h1>
}

Edit kode di kiri, preview kanan ter-update otomatis.

Tantangan

Bikin Animasi Denyut

Keyframes adalah fondasi semua animasi mandiri di web. Setelah menguasainya, kamu bisa bikin loading, notifikasi, dan efek hidup lainnya.

Di playground:

Buat keyframes "denyut": lingkaran yang membesar-mengecil (scale 1 ke 1.3) dengan opacity berdenyut, infinite.
Terapkan pada elemen baru berbentuk hati? Tidak boleh emoji. Pakai lingkaran saja dengan warna merah muda.
Di komentar, jelaskan bedanya animation dengan transition dalam satu kalimat masing-masing.

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h1>Halo CSS</h1>
<p>Edit styles.css dan lihat hasilnya.</p>
</body>
</html>

Open Sandbox