Bahasa HTML menyediakan struktur halaman web, dan CSS menyediakan reka bentuk dan pemformatan aplikasi itu. Gabungan ini juga membolehkan anda menambah animasi, kerana elemen animasi kelihatan lebih menarik berbanding dengan elemen statik. Ia juga membenarkan elemen menukar gayanya secara beransur-ansur.
Artikel ini akan membimbing cara kita boleh menggunakan animasi pada elemen. Jadi, mari kita mulakan!
Apakah Kerangka Kunci Animasi CSS?
Untuk menyiapkan animasi, kita mesti mengikat animasi dengan elemen HTML. Untuk tujuan ini, gunakan kata kunci ' @keyframes ” diikuti dengan nama animasi. Komponen ini menentukan permulaan dan akhir animasi.
Bagaimana untuk Menyediakan Kerangka Kunci Animasi CSS?
Untuk menyediakan bingkai utama animasi dalam CSS, kami akan melalui dua contoh.
Contoh 1
Untuk menyediakan kerangka utama animasi dalam CSS, lakukan langkah berikut:
-
- Tambah yang mempunyai nama kelas “ utama-div ”.
- Di dalam div, tambahkan div lain dengan nama kelas ' img-peng ”.
- Di dalam div img-peng ini, tambah
untuk meletakkan imej. Tag ini mempunyai tiga atribut, iaitu “ src ' atribut untuk menyediakan laluan imej, ' segala-galanya ' ialah teks alternatif yang ditambah jika imej tidak dipaparkan, dan ' lebar ” atribut untuk memberikan lebar imej.
HTML
< div kelas = 'div utama' >
< div kelas = 'img-peng' >
< img src = 'images/penguin.png' segala-galanya = 'penguin' lebar = '100' >
div >
div >
.main-div {
CSS
lebar: 90 % ;
ketinggian: 90px;
warna latar belakang: rgb ( 67 , 66 , 87 ) ;
jidar: 20px auto;
padding: 10px;
}
Dalam CSS, ' .main-div ” ditambah untuk mengakses kelas div. Sifat yang digunakan untuknya dijelaskan di bawah:-
- “ lebar ” nilai harta mentakrifkan lebar div.
- “ ketinggian ” hartanah digunakan untuk menetapkan ketinggian div.
- “ warna latar belakang sifat ” menggunakan warna pada latar belakang elemen.
- “ margin ” ditetapkan sebagai “ kereta 20px ”, yang menunjukkan ruang dari atas dan bawah, dan auto bermaksud ruang yang sama dari kiri dan kanan.
- “ padding nilai sifat ” diperuntukkan sebagai 10px, yang menggunakan ruang di sekeliling kandungan elemen.
Kelas img-peng gaya
.img-peng {
lebar: 50px;
ketinggian: 100px;
kedudukan: relatif;
animasi: goncang;
tempoh animasi: 2s;
animasi-fungsi-masa: 2s;
animasi-iteration-count: tak terhingga;
}
' .img-peng ” digunakan untuk mengakses kelas div, yang disebut dalam fail HTML di atas. Elemen div ini digayakan dengan sifat yang dibincangkan di bawah:-
- “ lebar ” nilai hartanah digunakan untuk menetapkan lebar elemen.
- “ ketinggian ” nilai sifat digunakan untuk menetapkan ketinggian elemen.
- “ kedudukan 'harta benda diberi nilai' relatif ”, yang bermaksud ia akan diletakkan secara relatif kepada kedudukan normalnya.
- “ animasi 'nama diberikan sebagai' goncang ”. Walau bagaimanapun, anda boleh menamakan animasi mengikut keperluan.
- “ tempoh animasi ” mewakili tempoh animasi, iaitu 2 saat.
- “ fungsi-masa-animasi ” diberikan nilai 2s yang bermaksud dalam 2 saat, animasi selesai.
- “ kiraan lelaran animasi ” ditetapkan sebagai infiniti, yang bermaksud animasi ini akan berlaku dalam masa yang tidak terhingga.
Tentukan @keyframes Dengan kepada dan dari kata kunci
@ bingkai kunci bergegar {
daripada {
atas: 50px;
}
kepada {
jidar bawah: 200px;
}
}
Perihalan kerangka utama animasi yang ditetapkan pada imej disenaraikan di bawah:-
- “ @keyframes bergegar ” merujuk kepada goncangan nama animasi diikuti dengan kata kunci @keyframes. Dalam peraturan ini, tingkah laku animasi ditentukan.
- Di dalam kurungan kerintingnya, ' daripada ” dan “ kepada ” kata kunci menentukan selang yang berbeza untuk menentukan tingkah laku animasi.
- ' atas sifat ” diberikan nilai 50px, yang bermaksud animasi bermula dari 50px dari bahagian atas skrin dan terus ke 200px di bahagian bawah.
Hasilnya, anda akan melihat output berikut:
Sekarang, biarkan animasi berkelakuan berbeza pada selang masa yang berbeza. Untuk berbuat demikian, gunakan peratusan animasi dalam @keyframes.Tentukan @keyframes Dengan Peratusan
@ bingkai kunci bergegar {
0 % {
ditinggalkan: -50px ;
}
25 % {
kiri: 50px;
}
lima puluh % {
ditinggalkan: -25px ;
}
75 % {
kiri: 25px;
}
100 % {
kiri: 10px;
}
}
Jadi, perihalan coretan kod di atas disebut di sini:-
- Nilai peratusan 0%, 25%, 50%, 75% dan 100% mewakili animasi pada selang masa yang berbeza.
- Selain itu, pada 0%, ruang di sebelah kiri imej akan menjadi “ -50px ”. Pada 25%, ruang di sebelah kiri ialah “ 50px ”. Pada 50%, ruang di sebelah kiri ialah “ -25px ”. Pada 75%, ruang kiri ialah “ 25px ”, dan apabila animasi selesai (100%), ruang kiri akan menjadi “ 10px ”.
Kod di atas memaparkan animasi berikut:
Mari kita ambil contoh lain untuk melihat cara kita boleh menetapkan animasi pada imej.Contoh 2
Dalam HTML, tambahkan
yang mempunyai nama kelas “ muka surat utama ”. Di dalam elemenini, letakkan dua lagi tag div dengan kelas “ awan1 ” dan “ awan2 ”, masing-masing.HTML
< div kelas = 'muka surat utama' >
< div kelas = 'awan1' > div >
< div kelas = 'awan2' > div >
div >
badan {
CSS
margin: 0 ;
padding: 0 ;
}
Dalam CSS, kami akan menetapkan sifat CSS berikut kepada elemen badan:-
- “ margin ” harta sebagai 0 menentukan tiada ruang di sekeliling elemen.
- “ padding sifat ” dengan nilai 0 tidak menentukan ruang di sekeliling kandungan elemen.
Gaya div halaman utama
.muka surat utama {
imej latar belakang: url ( / imej / serigala-malam.png ) ;
background-repeat: tiada-ulang;
saiz latar belakang: penutup;
ketinggian: 100vh;
kedudukan: relatif;
limpahan: tersembunyi;
}
di sini:-
- “ .muka surat utama ” digunakan untuk mengakses kelas div.
- “ imej latar belakang 'harta benda diberi nilai' url(/images/wolf-night.png) ” dengan imej ialah folder yang mengandungi imej wolf-night.png.
- “ latar belakang-ulang 'harta benda diberi nilai' tidak berulang , yang bermaksud imej akan dipaparkan sekali.
- “ saiz latar belakang ” ditetapkan sebagai “ penutup ” untuk mengisi keseluruhan elemen div.
- “ ketinggian ” ialah 100vh iaitu 100% daripada ketinggian viewport.
- “ kedudukan ” sebagai relatif menetapkan kedudukan imej berbanding lokasi semasanya.
- “ melimpah ” nilai hartanah ditetapkan sebagai tersembunyi untuk menyembunyikan bahagian imej yang terlalu besar untuk dimuatkan ke dalam bekas.
Kelas cloud1 gaya
.awan1 {
imej latar belakang: url ( / imej / awan.png ) ;
saiz latar belakang: mengandungi;
background-repeat: tiada-ulang;
jawatan: mutlak;
atas: 100px;
lebar: 500px;
ketinggian: 300px;
animasi: cloudanimation1;
tempoh animasi: 70s;
animasi-iteration-count: tak terhingga;
}
Kelas div cloud1 digunakan dengan sifat yang dijelaskan berikut:-
- “ .awan1 ” digunakan untuk mengakses cloud1 kelas div.
- “ imej latar belakang sifat ” ditetapkan sebagai url(/images/cloud.png), dengan imej ialah folder yang mengandungi imej cloud.png.
- “ saiz latar belakang 'dengan nilai' mengandungi ” memastikan keterlihatan imej.
- “ latar belakang-ulang ” harta dengan nilai yang ditetapkan sebagai “ tidak berulang ” memaparkan imej sebagai tidak berulang.
- “ kedudukan ” sebagai kedudukan mutlak imej berbanding dengan elemen induknya.
- “ atas sifat ” menetapkan imej pada 100px dari atas.
- “ lebar sifat ” digunakan untuk menetapkan lebar elemen div kepada 500px.
- “ ketinggian sifat ” digunakan untuk menetapkan ketinggian elemen div kepada 300px.
- “ animasi ” diberi nama cloudanimation1.
- “ tempoh animasi ” mewakili tempoh animasi, iaitu 70 saat.
- “ kiraan lelaran animasi ” diberikan nilai tak terhingga, yang akan mengulangi masa tak terhingga animasi.
Setakat ini, kami telah menggunakan sifat CSS pada halaman utama kelas div dan cloud1. Sekarang, dalam bahagian seterusnya, kami akan menggayakan kelas div seterusnya bernama cloud2.
Gaya kelas cloud2
.awan2 {
imej latar belakang: url ( / imej / awan.png ) ;
saiz latar belakang: mengandungi;
background-repeat: tiada-ulang;
jawatan: mutlak;
atas: 50px;
lebar: 200px;
ketinggian: 300px;
animasi: cloudanimation2;
tempoh animasi: 15s;
animasi-iteration-count: tak terhingga;
}
Cloud2 kelas div digunakan dengan sifat yang dijelaskan di bawah:-
- “ .awan2 ” digunakan untuk mengakses awan kelas2.
- “ imej latar belakang sifat ” ditetapkan sebagai url(/images/cloud.png), dengan imej ialah folder yang mengandungi imej cloud.png.
- “ saiz latar belakang ” mengandungi nilai memastikan keterlihatan imej.
- “ latar belakang-ulang ” harta dengan nilai yang ditetapkan sebagai tidak berulang memaparkan imej sebagai tidak berulang.
- “ kedudukan ” sebagai kedudukan mutlak imej berbanding dengan elemen induknya.
- “ atas sifat ” menetapkan imej pada 100px dari atas.
- “ lebar ” harta digunakan untuk menetapkan lebar elemen div.
- “ ketinggian harta ” digunakan untuk menetapkan ketinggian elemen div.
- “ animasi ” diberi nama cloudanimation2.
- “ tempoh animasi ” mewakili tempoh animasi.
- “ kiraan lelaran animasi ” diberikan nilai tak terhingga, yang akan mengulangi masa tak terhingga animasi.
Nyatakan @keyframes untuk cloudanimation1
@ bingkai utama animasi awan1 {
kepada {
kiri: 0px;
}
daripada {
ditinggalkan: 100 % ;
}
}
Div cloud1 terikat dengan animasi yang diterangkan di bawah:-
- “ @keyframes cloudanimation1 ” nama animasi cloudanimation1 diikuti dengan kata kunci @keyframes yang digunakan untuk menentukan peralihan.
- Kata kunci @keyframes menentukan cara animasi dilakukan dari awal hingga akhir pada imej awan.
- ' kepada ” dan “ daripada ” kata kunci menentukan awan1 akan bergerak daripada 100% kepada 0px skrin.
Nyatakan @keyframes untuk cloudanimation2
@ keyframes cloudanimation2 {
0 % {
ditinggalkan: 0 % ;
}
100 % {
ditinggalkan: 100 % ;
}
}
Cloud2 kelas div dikaitkan dengan animasi yang dijelaskan di bawah:-
- “ @keyframes cloudanimation2 ” mewakili nama animasi cloudanimation2 diikuti dengan kata kunci @keyframes yang digunakan untuk menentukan animasi.
- ' 0% ” dan “ 100% ” mewakili permulaan dan akhir animasi.
- Pada 0% daripada animasi, awan akan berada di sebelah kiri dengan nilai ditetapkan sebagai 0%, dan ia akan beransur-ansur beralih kepada 100% lebar.
Pengeluaran
Itu hebat! Kami telah membincangkan cara kami boleh menentukan animasi kepada elemen menggunakan kata kunci @keyframes dengan jayanya.Kesimpulan
CSS membenarkan kami menggunakan gaya pada elemen HTML. Animasi dalam CSS melakukan peralihan dari satu gaya ke gaya yang lain. Ia terdiri daripada dua komponen, gaya animasi, dan bingkai utama. Gaya animasi mewakili sifat yang berbeza seperti namanya, tempoh animasi, kiraan lelaran animasi dan banyak lagi. Manakala komponen keyframe mentakrifkan permulaan dan penghujung animasi. Panduan ini menghuraikan cara untuk menyediakan bingkai utama animasi dengan contoh.
- Tambah