Peralihan CSS berbanding JS

Peralihan tersuai memulangkan sama ada fungsi css (GPU) atau fungsi tick (didorong JS bagi setiap bingkai).

Untuk transform, opacity, warna — apa-apa yang boleh dianimasikan oleh CSS. CSS berjalan pada penggubah untuk mencapai 60 bingkai sesaat.

Untuk perubahan teks, piksel kanvas atau sifat lain yang bukan CSS.

Denyut berjalan pada setiap bingkai animasi dalam JavaScript. Ia lebih mahal berbanding CSS.

Sesetengah peralihan boleh menggunakan CSS untuk visual dan denyut untuk kemas kini bukan CSS yang berlaku sekali-sekala.

Animasi CSS disokong secara meluas; denyut sentiasa tersedia kerana ia menggunakan JS.

Kedua-duanya mematuhi prefers-reduced-motion jika anda menyemaknya dalam peralihan.

Gunakan tab Prestasi untuk membandingkan pelaksanaan CSS dengan denyut.

Jika CSS tidak dapat menghasilkan kesan tersebut, beralihlah dengan lancar kepada denyut.

Berbilang elemen dengan peralihan berbeza boleh mencampurkan CSS dan denyut dalam paparan yang sama.

Gunakan CSS sebagai lalai. Gunakan denyut hanya apabila CSS benar-benar tidak dapat menyatakan animasi tersebut.

Pilih css untuk peralihan yang dipercepat oleh GPU; simpan tick untuk animasi bukan CSS seperti perubahan teks atau kanvas.