Menggunakan sifat tersuai untuk bertengkar variasi dalam animasi kerangka utama

Gunakan sifat tersuai CSS untuk mengawal varian fleksibel animasi keyframe tanpa memerlukan preprocessor! Artikel ini akan meneroka cara menggunakan CSS dan sifat tersuai hanya untuk melaksanakan penyesuaian animasi kerangka utama, mengelakkan kebergantungan tambahan yang dibawa menggunakan preprocessors seperti mixin.

Pernahkah anda tertanya -tanya bagaimana untuk menyesuaikan kerangka kunci animasi CSS tanpa bergantung pada preprocessor? Saya sering beralih kepada preprocessors untuk ini, tetapi tidak lebih baik untuk menggunakan CSS asli jika saya dapat menyingkirkan kebergantungan ini?

Ternyata kawalan varian animasi keyframe dapat dicapai dengan CSS sahaja, terima kasih kepada CSS Custom Properties! Mari menggali bagaimana kerangka kunci CSS berfungsi dan bagaimana memanfaatkan CSS dan sifat tersuai untuk meningkatkannya.

Mekanisme warisan animasi CSS

Apabila kita menggunakan animasi kepada elemen, kita boleh menyesuaikan beberapa sifat seperti tempoh, kelewatan, dan lain -lain. Mari kita lihat contoh mudah: terdapat dua kelas.

 <code>@keyframes breath { from { transform: scale(0.5); } to { transform: scale(1.5); } } /* 两者共享相同的动画，但行走比奔跑慢*/ .walk { animation: breath 2s alternate; } .run { animation: breath 0.5s alternate; }</code>

Setiap kali animasi digunakan semula, tingkah lakunya bervariasi mengikut sifat yang kami berikan . Oleh itu, boleh dikatakan bahawa tingkah laku animasi mewarisi dari unsur -unsur di mana ia digunakan.

Tetapi bagaimanakah peraturan animasi (nisbah skala dalam contoh ini) dikendalikan? Kembali ke contoh animasi nafas: Kelas .walk melakukan animasi nafas perlahan -lahan, tetapi juga memerlukan nisbah skala yang lebih besar, jadi kita perlu menetapkan nilai skala untuk menjadi lebih besar daripada kelas .run, manakala kelas .run mengamalkan perubahan skala yang lebih kecil dan lebih kerap.

Dalam CSS tulen, adalah perkara biasa untuk menyalin animasi asal dan kemudian menyesuaikan nilai secara langsung di dalam kelas:

 <code>@keyframes breath { /* 与之前相同... */ } /* 与breath类似，但缩放比例不同*/ @keyframes breathDeep { from { transform: scale(0.3); } to { transform: scale(1.7); } } .walk { animation: breathDeep 2s alternate; } .run { animation: breath 0.5s alternate; }</code>

Walaupun pendekatan ini berfungsi, penyelesaian yang lebih baik adalah untuk menggunakan semula sifat dan nilai animasi pada masa yang sama! Bagaimana melakukannya? Gunakan mekanisme warisan pembolehubah CSS! Mari lihat bagaimana melaksanakannya:

 <code>/* breath动画的行为基于继承的CSS变量值*/ @keyframes breath { from { transform: scale(var(--scaleStart)); } to { transform: scale(var(--scaleEnd)); } } .walk { --scaleStart: 0.3; --scaleEnd: 1.7; animation: breath 2s alternate; } .run { --scaleStart: 0.8; --scaleEnd: 1.2; animation: breath 0.5s alternate; }</code>

Bukankah itu sejuk? Sekarang kita boleh mendapatkan kesan yang berbeza dari animasi yang sama tanpa menulis animasi berulang !

Sekiranya anda perlu melangkah lebih jauh, ingatlah bahawa kami juga boleh mengemas kini sifat tersuai CSS menggunakan JavaScript, yang bukan sahaja mengemas kini pembolehubah akar, tetapi juga pembolehubah unsur -unsur tertentu. Saya mendapati ini sangat kuat kerana kita boleh membuat animasi yang lebih cekap dengan JavaScript tanpa kehilangan pengoptimuman asli untuk animasi CSS. Ini adalah keadaan menang-menang!

Atas ialah kandungan terperinci Menggunakan sifat tersuai untuk bertengkar variasi dalam animasi kerangka utama. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!