Menentukan bagaimana beberapa efek animasi harus digabungkan dengan komposisi animasi

Mengganti, menambahkan, atau mengumpulkan? Itulah pertanyaannya.

Bramus

Menggabungkan beberapa efek animasi

Properti animation-composition memungkinkan kontrol atas apa yang harus terjadi saat beberapa animasi memengaruhi properti yang sama secara bersamaan.

Misalkan Anda menerapkan transformasi dasar ini ke elemen:

transform-origin: 50% 50%;
transform: translateX(50px) rotate(45deg);

Dan Anda juga memiliki set keyframe ini:

@keyframes adjust {
  to {
    transform: translateX(100px);
  }
}

Saat menerapkan keyframe ini ke elemen, transform di keyframe to akan menggantikan transform yang ada. Ini merupakan perilaku default.

Dengan animation-composition, Anda kini memiliki kontrol atas apa yang harus terjadi, bukan replace default. Nilai yang diterima adalah:

• replace: Nilai efek menggantikan nilai pokok. (default)
• add: Nilai efek ditambahkan ke nilai pokok.
• accumulate: Nilai efek digabungkan dengan nilai yang mendasarinya.

Perbedaan antara penambahan dan akumulasi tidak terlalu jelas. Misalnya, ambil dua nilai blur(2) dan blur(3). Jika dijumlahkan, hasilnya adalah blur(2) blur(3), tetapi jika diakumulasikan, hasilnya adalah blur(5).

Anda dapat membandingkannya dengan cangkir yang berisi teh. Saat menuangkan susu ke dalamnya, hal ini akan terjadi:

• replace: Teh dikeluarkan, dan diganti dengan susu.
• add: Susu ditambahkan ke cangkir, tetapi tetap berada di atas teh.
• accumulate: Susu ditambahkan ke teh dan karena keduanya adalah cairan, keduanya tercampur dengan baik.

Demo

Dalam demo di bawah, ada tiga kotak abu-abu yang menerapkan transform dan animation dasar.

Meskipun memiliki animasi yang sama, kotak-kotak ini menghasilkan hasil yang berbeda karena memiliki set animation-composition yang berbeda:

Kotak pertama disetel ke animation-composition: replace. Ini merupakan perilaku default. Pada posisi akhirnya, nilai translateX(50px) rotate(45deg) asli untuk transform hanya diganti dengan translateX(100px).

Kotak kedua disetel ke animation-composition: add. Di posisi akhirnya, translateX(100px) ditambahkan ke translateX(50px) rotate(45deg) asli, sehingga menghasilkan translateX(50px) rotate(45deg) translateX(100px). Tindakan ini memindahkan kotak sejauh 50 px, lalu memutarnya 45 derajat, dan kemudian memindahkannya sejauh 100 px.

Kotak ketiga disetel ke animation-composition: accumulate. Pada posisi akhirnya, translateX(100px) akan ditambahkan secara matematis ke translateX(50px) dari transformasi asli, sehingga menghasilkan transformasi translateX(150px) rotate(45deg).

Foto oleh Alex Boyd di Unsplash