Memahami Harta Mode Animasi-Fill CSS

mata teras

CSS
• Atribut mengawal bagaimana gaya digunakan sebelum dan selepas pelaksanaan animasi. animation-fill-mode Nilai -nilai none forwards Pastikan bahawa selepas animasi selesai, gaya yang ditakrifkan dalam kerangka utama animasi yang terakhir kekal pada elemen dan bukannya dipulihkan kepada gaya asal. backwards both
Nilai menggunakan gaya kerangka utama pertama ke elemen semasa sebarang kelewatan sebelum animasi bermula.
• Nilai forwards
menggabungkan kesan
• dan backwards, menggunakan gaya kerangka utama pertama sebelum animasi bermula, dan mengekalkan gaya kerangka utama terakhir selepas animasi berakhir.
• both Hampir semua pemaju front-end telah menggunakan animasi berasaskan kerangka keyframe CSS. Sesetengah orang mungkin membuat demonstrasi dan eksperimen yang agak kompleks dengan ciri ini. forwards backwards Jika anda memerlukan pengenalan penuh ke topik ini, jawatan saya di Smashing Magazine pada tahun 2011 masih merupakan pilihan yang baik. Walau bagaimanapun, dalam artikel ini, saya ingin memberi tumpuan kepada satu komponen spesifikasi animasi CSS: atribut
.

Ini adalah satu-satunya harta berasaskan animasi yang tidak mudah difahami. Sebagai contoh, tiada siapa yang akan dikelirukan tentang

,

, dan lain -lain ... tetapi apa sebenarnya maksud "isi mod"? Mari kita fikirkan secara ringkas dan berikan beberapa contoh. animation-fill-mode

animation-name Grammar animation-duration

anda mungkin sudah tahu bahawa animasi utama kerangka asas ditakrifkan menggunakan peraturan . Walau bagaimanapun, melainkan jika anda mengaitkan kerangka utama dengan nama animasi, kerangka utama tidak akan berfungsi. Ini adalah pengisytiharan atribut animasi yang disingkat, anda boleh memahami maksud saya: fill-mode

Sudah tentu, singkatan garis yang sama ini boleh diperluas kepada:

@keyframes

Dalam kedua -dua contoh, atribut

.example {
  animation: myAnim 2s 500ms 2 normal ease-in forwards;
}

ditakrifkan terakhir, dan dalam kedua -dua kes nilai ditetapkan kepada "". Kami tidak perlu menentukannya pada akhirnya, tetapi ini mungkin amalan yang baik.

Begitu juga, walaupun anda tidak pernah menggunakan animasi CSS, anda mungkin dapat mengetahui apa yang ada dalam pernyataan di atas-except

.example {
  animation-name: myAnim;
  animation-duration: 2s;
  animation-delay: 500ms;
  animation-iteration-count: 2;
  animation-direction: normal;
  animation-timing-function: ease-in;
  animation-fill-mode: forwards;
}

.

Takrif normatif animation-fill-mode forwards

Jadi bagaimanakah spesifikasi mengatakan tentang atribut ini? animation-fill-mode

Atribut

mentakrifkan nilai mana yang digunakan di luar masa pelaksanaan animasi. fill-mode

kerana ia terus menerangkan, masa "masa pelaksanaan luar" secara khusus merujuk kepada masa antara masa animasi digunakan untuk elemen dan masa apabila elemen sebenarnya bermula pada animasi. Pada asasnya, dengan menggunakan nilai , anda boleh menentukan bagaimana elemen animasi kelihatan di luar masa pelaksanaan animasi tetapi selepas animasi digunakan. Ia mungkin terdengar membingungkan, tetapi anda akan memahami apa yang saya maksudkan. fill-mode

mari kita memperluaskan definisi asas ini dengan melihat setiap nilai yang mungkin (yang mungkin masih sedikit mengelirukan).

Nilai penguraian Atribut

boleh menerima salah satu daripada empat nilai: animation-fill-mode, none, forwards, atau backwards. Berikut adalah pecahan setiap nilai. both

Nilai:

none Ini adalah nilai awal atau lalai

. Mendefinisikan nilai

akan berlebihan melainkan anda menetapkannya melalui JavaScript untuk mengubahnya dari nilai -nilai lain, atau anda menimpa sesuatu dalam cascading. animation-fill-mode none untuk memahami apa nilai

, di sini adalah demonstrasi codepen yang menunjukkan animasi tanpa

(jadi nilainya none): animation-fill-mode none [pautan demo codepen (sila ganti dengan pautan sebenar)]

anda dapat melihat bahawa dalam kebanyakan kes mod pengisian

bukanlah apa yang anda mahukan. Ingat bahawa

mentakrifkan bagaimana elemen kelihatan di luar masa pelaksanaan animasi. none fill-mode Dalam contoh ini, bola pada mulanya merah dan kemudian beransur -ansur bertukar merah jambu ketika bergerak ke kanan dan mengubah saiz pada masa yang sama. Lebih baik jika bola tetap kecil, merah jambu dan tepat selepas animasi berakhir. Ini akan menghalang lompat hodoh kembali ke negeri permulaan selepas animasi berakhir.

Nilai:

mari kita ubah animasi bola ke forwards nilai adalah "

":

fill-mode [pautan demo codepen (sila ganti dengan pautan sebenar)] forwards

Sekarang anda dapat melihat manfaat menggunakan

dan mengapa nilai

digunakan lebih daripada nilai lain. Apabila kita menentukannya dengan nilai ini, kita memberitahu pelayar bahawa kita mahu elemen animasi untuk mengekalkan set gaya terakhirnya, seperti yang ditakrifkan dalam kerangka utama yang terakhir. Dengan cara ini, kami tidak melompat kembali ke keadaan awal sebelum elemen memulakan animasi selepas animasi berakhir (butang "Reset" yang saya tambah dalam demo boleh melakukan ini untuk kami).

animation-fill-mode Nilai: forwards

mari kita ubah nilai ke

-Apa yang berlaku sekarang? backwards

[pautan demo codepen (sila ganti dengan pautan sebenar)]

backwards Perhatikan bahawa tingkah laku dalam demo ini sama persis dengan demo pertama dengan nilai

"

". Mengapa ini berlaku?

bertentangan dengan animation-fill-mode, nilai none memberikan elemen gaya sebelum animasi bermula selepas animasi berakhir. Ini lebih masuk akal apabila kita melihat penerangan spesifikasi mengenai nilai

:

Dalam tempoh yang ditakrifkan oleh animation-delay, animasi akan menggunakan nilai atribut yang ditakrifkan dalam kerangka utama di mana lelaran pertama animasi akan dimulakan. Ini adalah nilai -nilai kerangka utama from ... atau nilai -nilai kerangka kekunci to.

Untuk menunjukkan ini, saya membuat dua pengubahsuaian kepada demonstrasi:

• Menambah kekunci from untuk menggunakan warna yang berbeza untuk bola.
• Tambah kelewatan ditambah menggunakan atribut animation-delay.

Di sini:

[pautan demo codepen (sila ganti dengan pautan sebenar)]

Sekarang anda dapat melihat bahawa sebaik sahaja anda menekan butang "Mula Animasi", bola akan menjadi biru. Ini kerana kelewatan yang jelas. Secara teknikal, setiap animasi mempunyai kelewatan lalai, tetapi kelewatannya adalah 0s, jadi dalam hal ini anda tidak akan benar -benar melihat nilai backwards jika gaya anda dalam kerangka utama awal adalah berbanding sebelum animasi bermula gaya adalah sama, Dan anda pasti tidak akan melihatnya. Jika menggunakan gaya yang sama dan kelewatan yang sama, memadam nilai backwards menyebabkan bola kekal merah sebelum animasi bermula.

Sejujurnya, saya tidak melihat banyak kegunaan praktikal backwards nilai. Sukar untuk membayangkan bahawa dalam terlalu banyak kes gaya dalam kerangka utama animasi adalah berbeza dari keadaan statik sebelum animasi elemen. Tetapi jika anda mempunyai idea, saya suka mendengar beberapa kes penggunaan.

Nilai: both

Nilai terakhir yang akan kita lihat ialah nilai

. Nilai ini memberitahu penyemak imbas untuk menggunakan kesan both dan forwards. backwards

mari kita simpan gaya yang sama dalam demo dan lihat apa yang berlaku apabila kita memberikannya kepada nilai

: both

[pautan demo codepen (sila ganti dengan pautan sebenar)]

bukan sains roket. Seperti yang anda lihat, semasa kelewatan awal, gaya kerangka utama awal digunakan, dan animasi berakhir dan gaya dalam kerangka utama terakhir dibekukan (seperti yang disebutkan sebelumnya, ini biasanya apa yang anda mahukan). Sekali lagi, nilai ini tidak akan jauh berbeza daripada menggunakan

jika bukan untuk kelewatan dan warna alternatif yang ditakrifkan dalam kerangka utama pertama. forwards

Beberapa langkah berjaga -jaga dan tip

Berdasarkan kandungan di atas dan beberapa butiran dalam spesifikasi, berikut adalah beberapa perkara yang perlu diperhatikan:

• Walaupun saya agak meminimumkan kepentingan nilai backwards dan both, nilai -nilai ini mungkin berguna dalam animasi kompleks yang dikawal oleh skrip atau input pengguna. Kes penggunaan akan berlimpah (berfikir: permainan), tetapi hanya melalui percubaan dan inovasi.
• Apabila harta animation-direction ditetapkan kepada reverse, kesan nilai forwards dan backwards dibalikkan. Sekiranya anda mengamuk dengan demo, anda akan melihat bagaimana ia berfungsi.
• Walaupun saya berkata animation-fill-mode hanya menerima empat nilai, ingat bahawa anda juga boleh menggunakan nilai atribut pelbagai CSS.
• Dalam versi spesifikasi terdahulu, animation-fill-mode bukan sebahagian daripada sifat animasi singkatan, tetapi nampaknya semua pelayar yang menyokong kerangka utama boleh menggunakannya untuk singkatan.
• Apabila menggunakan singkatan animasi dan memilih nama tersuai untuk animasi, jangan gunakan nama yang sesuai dengan nilai fill-mode. reverse forwards fill-mode
Kesimpulan

Saya harap ringkasan ini akan membantu anda memahami harta ini dengan lebih baik. Beberapa penyelidikan benar -benar membantu saya memahaminya dengan lebih baik. Jika anda telah melakukan sesuatu yang unik tentang , atau mempunyai sebarang kes penggunaan yang unik untuk nilai yang berbeza, atau mempunyai sebarang pembetulan untuk artikel ini, sila beritahu kami dalam perbincangan.

animation-fill-mode FAQs Mengenai CSS Animation Fill Mode Properties

CSS Apakah maksud atribut?

CSS animation-fill-mode sifat adalah aspek utama animasi CSS. Ia mentakrifkan bagaimana animasi menggunakan gaya untuk sasarannya sebelum dan selepas pelaksanaan. Harta ini membantu mengawal keadaan pertengahan unsur semasa animasi. Ia boleh mengambil empat nilai:

,

, animation-fill-mode, dan none. Setiap nilai menentukan bagaimana animasi mempengaruhi unsur -unsur pada peringkat yang berbeza, dengan itu memberikan pemaju yang lebih besar ke atas animasi. forwards Bagaimanakah nilai backwards dalam berfungsi? both Nilai

CSS

dalam atribut memastikan bahawa elemen mengekalkan nilai yang dikira untuk kerangka utama terakhir yang dihadapi semasa proses animasi. Ini bermakna selepas animasi selesai, gaya yang ditakrifkan dalam kerangka utama terakhir akan kekal pada elemen dan bukannya dipulihkan kepada gaya asal. animation-fill-mode forwards Bolehkah anda menerangkan nilai

dalam

? animation-fill-mode forwards CSS

Nilai dalam harta

menggunakan gaya kerangka utama pertama ke elemen semasa tempoh sebelum animasi bermula. Ini bermakna jika terdapat kelewatan sebelum animasi bermula, elemen akan mengambil gaya yang ditakrifkan dalam kerangka utama pertama semasa kelewatan itu. animation-fill-modeApakah nilai

dalam animation-fill-mode both?

Nilai

dalam atribut animation-fill-mode CSS both menggabungkan kesan forwards dan backwards. Ini bermakna menggunakan gaya kerangka utama pertama sebelum animasi bermula, dan mengekalkan gaya kerangka utama terakhir selepas animasi berakhir.

Apa yang berlaku apabila harta animation-fill-mode ditetapkan ke none?

Apabila harta CSS animation-fill-mode ditetapkan kepada none, animasi tidak menggunakan apa -apa gaya ke elemen sebelum atau selepas ia bermula. Unsur -unsur hanya terjejas oleh animasi semasa operasi aktif animasi.

Bolehkah saya menggunakan pelbagai nilai untuk atribut animation-fill-mode?

tidak, atribut CSS animation-fill-mode hanya boleh mengambil satu nilai pada satu masa. Anda boleh pilih dari none, forwards atau backwards mengikut keperluan khusus animasi. both

Semua penyemak imbas menyokong

atribut? animation-fill-mode

CSS

sifat disokong secara meluas dalam semua pelayar moden, termasuk Chrome, Firefox, Safari, dan Edge. Walau bagaimanapun, ia tidak disokong di Internet Explorer. animation-fill-mode

Bagaimana atribut berinteraksi dengan atribut animation-fill-mode? animation-delay

CSS

Properties berfungsi dengan sifat animation-fill-mode. Jika animation-delay ditetapkan ke animation-fill-mode atau backwards dan both hadir, gaya kerangka utama pertama digunakan semasa kelewatan. animation-delay

Bolehkah atribut digunakan dengan kerangka utama dengan nilai peratusan? animation-fill-mode

Ya, atribut CSS

boleh digunakan dengan kerangka key dengan nilai peratusan. Nilai animation-fill-mode dan forwards akan menggunakan gaya paling dekat 0% dan 100% daripada kerangka utama. backwards

Apakah nilai lalai atribut? animation-fill-mode Nilai lalai atribut adalah

. Ini bermakna bahawa secara lalai, animasi tidak menggunakan apa -apa gaya ke elemen sebelum atau selepas ia bermula. animation-fill-mode none Sila ambil perhatian bahawa saya telah menggantikan pautan codepen dengan pemegang tempat. Anda perlu menyediakan pautan demo codepen sebenar untuk membuat artikel lengkap.

Atas ialah kandungan terperinci Memahami Harta Mode Animasi-Fill CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!