Animasi @keyframes
Definisikan animasi bertahap dengan @keyframes, pasang dengan singkatan animation, dan kendalikan pengulangan, arah, serta fill-mode.
Animasi @keyframes adalah pelajaran Frontend Academy gratis di CoddyKit. Ini adalah pelajaran 3 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 Frontend Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Frontend Academy mencakup 4 pelajaran total.
Transisi dan Animasi
Transisi menganimasikan perpindahan antara dua keadaan yang dipicu oleh suatu perubahan. Animasi @keyframes berjalan otomatis, dapat berulang, dibalik, diputar tanpa batas, dan mendefinisikan beberapa langkah perantara — tidak memerlukan pemicu.
Mendefinisikan @keyframes
Deklarasikan rangkaian animasi dengan @keyframes. Tentukan keadaan pada persentase tertentu (0%, 50%, 100%) atau dengan kata kunci from dan to.
@keyframes fadeIn {
from { opacity: 0; transform: translateY(16px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}Bentuk Singkat Properti Animasi
animation: name duration timing-function delay iteration-count direction fill-mode. Terapkan animasi ke sebuah elemen menggunakan bentuk singkat ini.
.card {
animation: fadeIn 0.4s ease-out forwards;
}
.loader {
animation: pulse 1.5s ease-in-out infinite;
}Jumlah Pengulangan Animasi
Menentukan berapa kali animasi diputar. infinite mengulanginya tanpa batas. Angka tertentu akan memutarnya tepat sebanyak angka tersebut.
.spinner {
animation: spin 1s linear infinite;
}
.badge {
animation: bounce 0.6s ease 3; /* plays 3 times */
}Arah Animasi
normal (bawaan): maju setiap kali. reverse: mundur. alternate: maju lalu mundur. alternate-reverse: dimulai dari arah sebaliknya. Alternate sangat cocok untuk efek bolak-balik.
@keyframes swing {
from { transform: rotate(-15deg); }
to { transform: rotate(15deg); }
}
.pendulum {
animation: swing 1s ease-in-out infinite alternate;
}Mode Pengisian Animasi
Mengontrol keadaan elemen sebelum dan sesudah animasi. forwards: elemen tetap pada keadaan bingkai kunci terakhir. backwards: menerapkan keadaan from selama jeda. both: menerapkan keduanya.
.entrance {
opacity: 0;
animation: fadeIn 0.5s ease 0.2s forwards;
/* stays visible (opacity: 1) after animation ends */
}Status Pemutaran Animasi
Jeda dan lanjutkan animasi dengan JavaScript dengan mengubah animation-play-state: paused | running.
// Pause:
element.style.animationPlayState = 'paused';
// Resume:
element.style.animationPlayState = 'running';Animasi Ganda
Terapkan beberapa animasi ke satu elemen dengan memisahkannya menggunakan koma. Setiap animasi berjalan secara mandiri.
.icon {
animation:
rotate 2s linear infinite,
pulse 1.5s ease-in-out infinite alternate;
}Animasi Bergiliran dengan animation-delay
Atur item dalam daftar agar muncul bergiliran dengan menambah jeda untuk setiap item. Properti khusus CSS memudahkan hal ini dengan JavaScript.
/* CSS */
.list-item {
animation: slideIn 0.3s ease forwards;
animation-delay: calc(var(--index) * 60ms);
}
/* JS */
list.querySelectorAll('.list-item').forEach((el, i) => {
el.style.setProperty('--index', i);
});will-change — Petunjuk untuk Peramban
will-change: transform memberi petunjuk kepada peramban bahwa properti tersebut akan dianimasikan, sehingga elemen dapat dipromosikan ke lapisan pengomposisinya sendiri terlebih dahulu. Gunakan secukupnya — terlalu banyak lapisan pengomposisi akan menghabiskan memori GPU.
.animated {
will-change: transform; /* only while animating */
}
/* Remove will-change after animation: */
el.addEventListener('animationend', () => el.style.willChange = 'auto');Praktik: Layar Pemuatan Kerangka
Layar kerangka menggunakan animasi kilau bergerak untuk menunjukkan bahwa konten sedang dimuat. Gradien bergerak melintasi bentuk-bentuk pengganti.
@keyframes shimmer {
from { background-position: -200% 0; }
to { background-position: 200% 0; }
}
.skeleton {
background: linear-gradient(
90deg,
#e2e8f0 25%,
#edf2f7 50%,
#e2e8f0 75%
) 200% 0 / 200% 100%;
animation: shimmer 1.5s linear infinite;
}Pemeriksaan Singkat
Nilai animation-fill-mode mana yang membuat elemen mempertahankan keadaan bingkai kunci terakhir setelah animasi berakhir?
Rangkuman: Animasi @keyframes
Tentukan dengan @keyframes menggunakan from/to atau persentase. Terapkan dengan bentuk singkat animation. Gunakan iteration-count untuk pengulangan. Gunakan arah alternate untuk efek bolak-balik. Gunakan fill-mode: forwards untuk mempertahankan keadaan terakhir. Atur kemunculan bergiliran dengan animation-delay dan variabel CSS. Gunakan bingkai kunci transform dan opacity untuk animasi terkomposisi yang mulus.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Animasi @keyframes” gratis?
Ya — teks lengkap “Animasi @keyframes” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Frontend Academy, upgrade ke CoddyKit PRO. Kursus Frontend Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Animasi @keyframes”?
Definisikan animasi bertahap dengan @keyframes, pasang dengan singkatan animation, dan kendalikan pengulangan, arah, serta fill-mode. Kamu berlatih Frontend 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 Frontend Academy?
Tidak diperlukan pengalaman sebelumnya. Frontend 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 3 dari 4.
Berapa lama pelajaran “Animasi @keyframes” 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 Frontend Academy ini?
Ya. Setiap pelajaran Frontend 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
- Properti Khusus CSS: mendeklarasikan dan memperbarui
- Transisi: properti, durasi, waktu
- Animasi @keyframes
- Menghormati prefers-reduced-motion