Ganti, tambah, atau kumpulkan? Itulah pertanyaannya.
Menggabungkan beberapa efek animasi
Properti animation-composition memungkinkan kontrol atas apa yang akan terjadi saat beberapa animasi memengaruhi properti yang sama secara bersamaan.
Misalkan, Anda telah menerapkan transformasi dasar ini ke elemen:
transform-origin: 50% 50%;
transform: translateX(50px) rotate(45deg);
Selain itu, Anda juga memiliki set keyframe ini:
@keyframes adjust {
to {
transform: translateX(100px);
}
}
Saat menerapkan keyframe ini ke elemen, transform dalam keyframe to akan menggantikan transform yang sudah ada. Ini merupakan perilaku default.
Dengan animation-composition, Anda kini dapat mengontrol apa yang akan terjadi, bukan replace default. Nilai yang diterima adalah:
replace: Nilai efek menggantikan nilai dasar. (default)add: Nilai efek ditambahkan ke nilai dasar.accumulate: Nilai efek digabungkan dengan nilai dasar.
Perbedaan antara penambahan dan akumulasi sangat halus. Misalnya, ambil dua nilai blur(2) dan blur(3). Jika ditambahkan bersama-sama, metode ini akan menghasilkan blur(2) blur(3), tetapi jika diakumulasi, hasilnya akan menghasilkan blur(5).
Anda bisa membandingkannya dengan cangkir yang berisi teh. Hal ini akan terjadi saat susu menuangkan susu:
replace: Teh akan dibuang dan diganti dengan susu.add: Susu akan ditambahkan ke cangkir, tetapi tetap ada di atas teh.accumulate: Susu ditambahkan ke teh dan, karena keduanya merupakan cairan, keduanya tercampur dengan baik.
Demo
Dalam demo di bawah ini, ada tiga kotak abu-abu yang menerapkan transform dan animation dasar tersebut.
Meskipun kotak-kotak ini memiliki animasi yang sama, namun memberikan hasil yang berbeda karena memiliki kumpulan animation-composition yang berbeda:
Kotak pertama ditetapkan ke animation-composition: replace. Ini merupakan perilaku default. Di posisi akhirnya, nilai translateX(50px) rotate(45deg) asli untuk transform hanya diganti dengan translateX(100px).
Kotak kedua ditetapkan ke animation-composition: add. Di posisi akhirnya, translateX(100px) ditambahkan ke translateX(50px) rotate(45deg) asli, sehingga menghasilkan translateX(50px) rotate(45deg) translateX(100px). Ini akan memindahkan kotak sebesar 50px, kemudian mengubahnya 45deg, dan kemudian memindahkannya 100px.
Kotak ketiga ditetapkan ke animation-composition: accumulate. Di posisi akhirnya, translateX(100px) akan ditambahkan secara matematis ke translateX(50px) dari transformasi asli, sehingga menghasilkan transformasi translateX(150px) rotate(45deg).