Artikel ini menunjukkan proses menambah animasi berbilang langkah dan peralihan.
Bagaimana Menggunakan Animasi dan Peralihan Berbilang Langkah?
Untuk membuat animasi berbilang langkah, satu siri bingkai utama dijana. Ia menentukan siri perubahan yang akan digunakan pada elemen HTML yang dipilih. Setiap bingkai utama mewakili keadaan animasi yang berbeza, dan penyemak imbas dengan lancar memindahkan elemen antara keadaan ini. Semasa peralihan, nyatakan perubahan lancar sifat CSS dalam tempoh tertentu mengikut interaksi pengguna atau perubahan keadaan.
Mari kita lihat contoh praktikal untuk pemahaman yang lebih baik:
Contoh 1: Mengaplikasikan Animasi Berbilang Langkah
Dalam contoh ini, animasi berbilang langkah akan digunakan pada elemen HTML yang dipilih. Lawati demonstrasi di bawah:
< gaya >
.animationContoh {
lebar: 130px;
ketinggian: 130px;
warna latar belakang: hijau hutan;
kedudukan: relatif;
animasi: bergerakAnimate 4s kemudahan-masuk-keluar tak terhingga;
}
< / gaya >
< badan >
< div kelas = 'contoh animasi' >< / div >
< / badan >
Dalam coretan kod di atas:
- Pertama, kelas bernama ' contoh animasi ” dipilih di dalam “
” tag. - Seterusnya, nilai “ 130px 'ditugaskan kepada' ketinggian ” dan “ lebar ” hartanah.
- Selain itu, tetapkan “ hutan hijau ” dan “ relatif ” sebagai nilai untuk “ warna latar belakang ” dan “ kedudukan ” sifat untuk meningkatkan visualisasi.
- Selepas itu, gunakan ' animasi ” harta dan tetapkannya sama dengan “ bergerakAnimasikan 4s memudahkan masuk-keluar tanpa terhingga ” untuk menggunakan animasi.
- Nilai ini terdiri daripada empat bahagian, yang pertama ialah animasi nama tersuai, yang kedua ialah tempoh masa untuk disiapkan, yang ketiga ialah jenis animasi dan yang keempat ialah had untuk berapa kali animasi ini akan digunakan.
- Pada akhirnya, buat elemen HTML dan tetapkan ' contoh animasi ” kelas kepadanya.
Sekarang, gunakan ' bingkai utama 'peraturan untuk menentukan adat' bergerakAnimasi ' animasi:
@ bergerakAnimasikan bingkai kekunci {0 % {
dibiarkan: 0 ;
warna latar belakang: biru;
}
lima puluh % {
kiri: 200px;
warna latar belakang: hijau hutan;
mengubah: berputar ( 180deg ) ;
}
100 % {
dibiarkan: 0 ;
warna latar belakang: biru;
}
}
Dalam blok kod di atas:
- Pertama, ' @keyframes ” blok dicipta bersama-sama dengan nama animasi tersuai yang akan ditakrifkan.
- Seterusnya, buat blok bernama ' 0% ” yang menggunakan gaya CSS pada permulaan animasi. Dan gunakan ' warna latar belakang ” dan “ dibiarkan ” Sifat CSS.
- Sekarang, buat blok bernama dan “ lima puluh% ” untuk menggayakan di tengah-tengah animasi. Ia memberikan nilai ' 200px ”, “ hutan hijau ” dan “ berputar (180deg) ” ke sifat “kiri”, “warna latar belakang” dan “transformasi”. Ini membenarkan elemen yang dipilih untuk memutarkan 200px ke kiri.
Selepas penyusunan blok kod di atas:
Output menunjukkan animasi berbilang langkah telah digunakan pada elemen HTML yang dipilih.
Contoh 2: Menggunakan Peralihan Berbilang Langkah
Untuk menggunakan peralihan berbilang langkah, pemilih CSS boleh digunakan bersama dengan ' peralihan ” harta benda. Lawati kod di bawah:
.fade {
kelegapan: 1;
peralihan: kelegapan 1s;
}
.fade:hover {
kelegapan: 0;
}
<
/ gaya>
<
badan>
< hlm kelas = 'pudar' > Tuding di atas saya untuk melihat peralihan. < / hlm >
< / badan >
Penjelasan kod di atas:
- Pertama, adat ' pudar kelas ” dipilih dan nilai 1 diberikan kepada “ kelegapan ” harta benda. Juga, tetapkan nilai ' kelegapan 1s ' kepada ' peralihan ” Harta CSS. Ini menetapkan atau mengalih keluar kelegapan dalam tempoh masa “ 1s ”.
- Seterusnya, ' : berlegar ' pemilih diberikan kepada ' pudar ” kelas. Di dalamnya, nilai ' 0 ” ditetapkan kepada sifat kelegapan.
- Pada akhirnya, elemen HTML dicipta di dalam '
teg ” dan kelas “ pudar ” dilampirkan padanya.
Selepas tamat fasa penyusunan, halaman web kelihatan seperti ini:
GIF memaparkan bahawa peralihan pudar tersuai telah digunakan pada elemen HTML yang dipilih.
Kesimpulan
Animasi dan peralihan berbilang langkah menghidupkan halaman web HTML dengan menambahkan gerakan dan kesan visual. Untuk animasi, ' bingkai utama ' digunakan bersama dengan peratusan tempoh seperti ' 0% 'adalah permulaan,' lima puluh% ” ialah pertengahan, dan “ 100% ” ialah penamat kepada tempoh animasi. Untuk peralihan, pemilih CSS boleh digunakan bersama dengan ' peralihan ” kelas. Artikel ini telah menunjukkan proses menggunakan animasi berbilang langkah dan peralihan.