Digital Transformation
CSS animation-composition (Property)
TL;DR: CSS animation-composition mengatur cara CSS Animations menggabungkan properti yang dianimasikan secara bersamaan. Nilai default replace menimpa nilai sebelumnya, sedangkan add dan accumulate menambahkan secara matematis. Properti ini stabil di Chrome, Edge, dan Safari per 2024 dan mengurangi kebutuhan library JavaScript animasi untuk komposisi transform.
Apa itu CSS animation-composition?
CSS animation-composition adalah properti CSS yang memberi tahu browser cara dua atau lebih animasi pada elemen yang sama bekerja bersama. Tanpa properti ini, animasi kedua selalu menimpa animasi pertama. Dengan properti ini, animasi dapat menumpuk, misalnya rotasi terus berjalan sambil hover memperbesar elemen, tanpa konflik. Lihat juga CSS View Transitions dan CSS Scroll-Driven Animations untuk fitur animasi modern lain.
Nilai dan Cara Kerja
| Nilai | Perilaku |
|---|---|
replace (default) | Animasi terakhir menimpa nilai sebelumnya |
add | Nilai animasi ditambahkan langsung ke nilai dasar |
accumulate | Untuk transform, hasilnya dirangkai berurutan, bukan dijumlah |
Contoh penggunaan untuk dua animasi sekaligus:
.card {
animation: spin 4s linear infinite, scale-hover 200ms ease;
animation-composition: add;
}
Kenapa Penting?
Sebelum properti ini stabil, developer harus pakai library seperti GSAP untuk menggabungkan transform tanpa konflik. Kini cukup 1 baris CSS. Dalam praktik di Atmo LMS, mengganti komposisi GSAP dengan animation-composition memangkas bundle 18 KB dan menjaga 60 fps di halaman kursus padat motion. Sumber resmi: MDN animation-composition.
Pertanyaan Umum
Apakah dukungan browser sudah aman?
Chrome 112+, Edge 112+, Safari 16+ sudah stabil. Untuk Firefox cek caniuse.com sebelum produksi.
Bedanya dengan animation-fill-mode?
animation-fill-mode mengatur status sebelum dan sesudah animasi. animation-composition mengatur cara animasi-animasi bertumpuk saat berjalan.
Istilah Terkait