Home-theater-designers
CSS memberikan kemampuan kepada pembangun untuk menghidupkan halaman web mereka menggunakan animasi bingkai utama.
Animasi CSS dicapai dengan mengubah keadaan awal elemen HTML melalui pelbagai sifatnya. Beberapa sifat CSS umum yang dapat dianimasikan termasuk:
pulihkan tajuk video youtube yang dipadam
- Lebar
- Ketinggian
- Kedudukan
- Warna
- Kelegapan
Sifat CSS umum ini dimanipulasi oleh elemen CSS tertentu untuk menghasilkan hasil yang diinginkan. Sekiranya anda pernah menemui elemen animasi di laman web, kemungkinan elemen tersebut dianimasikan menggunakan animasi bingkai utama.
Apakah Elemen Kerangka Utama?
The elemen bingkai utama boleh digunakan pada satu atau lebih elemen HTML yang mempunyai aksesnya. Ia mengenal pasti titik tertentu dalam keadaan elemen dan menentukan penampilan yang mesti ada pada elemen ini pada masa ini.
Ini mungkin kedengaran banyak dicerna, tetapi sebenarnya agak mudah. The elemen bingkai utama mempunyai struktur yang cukup mudah dan senang difahami dan disesuaikan agar sesuai dengan sebarang keperluan animasi.
Contoh Struktur Kerangka Utama
@keyframes identifier {
from{
/* where you would like the animation to start from. */
}
to{
/* where you would like the animation to end up */
}
}Katakan anda mahu menghidupkan butang segi empat hijau dengan mengubahnya menjadi butang bulat biru.
Dalam parameter dari dari bahagian di atas anda perlu meletakkan semua gaya yang diperlukan agar elemen kelihatan seperti butang segi empat hijau, kemudian di ke bahagian, anda akan meletakkan semua syarat gaya untuk mengubah butang ini menjadi butang bulat biru.
Sekiranya anda berfikir, itu tidak terlalu menyerupai animasi. Itu kerana komponen utama dari keseluruhan proses ini belum diperkenalkan --- komponen ini adalah harta animasi.
Harta Animasi
The harta animasi mempunyai satu set sub-sifat yang berbeza; ini digunakan dalam kombinasi dengan struktur kerangka utama di atas untuk menghidupkan elemen HTML yang diinginkan.
Walau bagaimanapun, anda hanya perlu mengetahui lima sub-sifat ini dan nilai-nilai yang berkaitan dengannya, untuk mencapai animasi dalam projek anda. Sifat-sifat ini dikenali sebagai:
- Nama animasi
- Tempoh animasi
- Fungsi masa-animasi
- Kelewatan animasi
- Kiraan animasi-lelaran
Menggunakan Animasi di Halaman Web
Dengan menggunakan senario di atas, tujuannya adalah untuk membuat butang animasi.
Contoh Animasi Butang
Animation
/* styling the button */
.btn{
color:white;
border: none;
font-size: 20px;
width: 100px;
height: 40px;
padding: 10px 20px;
/* animating the button */
animation-name: clickButton;
animation-duration: 5s;
animation-delay: 4s;
animation-iteration-count:infinite;
animation-timing-function: ease-in-out;
}
/* styling the button states in the animation */
@keyframes clickButton {
from{
background-color: springgreen;
}
to{
border-radius: 30px;
background: blue;
}
}
Click!
Bahagian animasi kod di atas mengandungi lima sub-sifat yang disebutkan sebelumnya. Setiap harta mempunyai fungsi yang sangat berbeza dan bersama-sama mereka berfungsi untuk menghidupkan elemen HTML apa pun yang dibuat untuk disasarkan.
Berkaitan: Cara Menyasarkan Bahagian Halaman Web Menggunakan Pemilih CSS
Harta Nama-Animasi
Harta ini adalah satu-satunya harta terpenting dalam senarai. Tanpa harta nama-animasi , anda tidak akan mempunyai pengecam yang lalu ke elemen bingkai utama , menjadikan semua kod dalam parameternya tidak berguna.
Sekiranya anda lupa memasukkan satu atau dua sub-sifat lain, anda mungkin masih mempunyai animasi yang cukup baik. Walau bagaimanapun, jika anda terlupa harta nama-animasi anda tidak akan mempunyai animasi.
Harta Tempoh Animasi
Properti ini digunakan untuk menentukan jumlah masa yang diperlukan oleh elemen animasi ketika beralih dari satu keadaan ke keadaan yang lain.
Dalam contoh di atas, harta jangka masa animasi diatur ke 5 saat (5s), jadi butang segi empat hijau akan mempunyai total 5 saat sebelum menjadi butang bulat biru sepenuhnya.
Harta penundaan Animasi
Harta ini penting kerana satu sebab; beberapa halaman web mungkin mengambil masa beberapa saat untuk dimuat sepenuhnya (kerana beberapa faktor yang berbeza). Jadi harta penundaan animasi menghalang animasi bermula dengan segera sekiranya halaman web memerlukan sedikit masa untuk dimuat.
Dalam contoh di atas, harta penundaan animasi ditetapkan ke 4 detik, yang bermaksud bahawa animasi tidak akan bermula sehingga 4 saat setelah laman web dikunjungi (memberi halaman web masa yang cukup untuk dimuat sebelum animasi bermula).
Harta Animasi-lelaran
Properti ini menyatakan berapa kali elemen animasi harus beralih dari satu keadaan ke keadaan yang lain. The harta animasi-lelaran-hitungan mengambil nilai yang berupa kata dan nombor. Nilai nombor boleh terdiri dari 1 ke atas, sementara nilai kata biasanya tidak terhingga .
Dalam contoh di atas, nilai animasi-lelaran-hitungan ditetapkan ke tidak terhingga , yang bermaksud selagi laman web berada di atas, butang properti akan bernyawa dari satu keadaan ke keadaan yang lain, secara berterusan.
The Animation-timing-function Property
Properti ini menentukan pergerakan elemen animasi ketika beralih dari satu keadaan ke keadaan yang lain. The harta animasi-fungsi-masa biasanya diberikan satu daripada tiga nilai kemudahan.
- Kemudahan
- Kemudahan
- Kemudahan keluar
The nilai kemudahan dalam digunakan di atas; ini secara perlahan mengalihkan animasi dari satu keadaan ke keadaan yang lain. Sekiranya tujuannya adalah untuk membuat peralihan perlahan ketika butang berubah dari segi empat hijau ke bulatan biru, anda akan menggunakan nilai kemudahan . Sekiranya anda hanya mahukan peralihan perlahan ke arah yang berlawanan, anda akan menggunakan nilai kemudahan .
Mengurangkan Kod Kami
Dalam kebanyakan keadaan, pengurangan program dilihat sebagai pendekatan praktikal. Ini kerana lebih sedikit baris kod mengurangkan kemungkinan kesalahan tidak disedari dalam program anda.
Kod di atas dapat dikurangkan dengan empat baris. Ini dapat dicapai dengan hanya menggunakan harta animasi tanpa mengenal pasti setiap sub-sifatnya secara eksplisit.
Mengurangkan Kod untuk Contoh Animasi Butang
Animation
/* styling the button */
.btn{
color: white;
border: none;
font-size: 20px;
width: 100px;
height: 40px;
padding: 10px 20px;
/* animating the button */
animation: clickButton 5s ease-in-out 4s infinite;
}
/* styling the button states in the animation */
@keyframes clickButton {
from{
background-color: springgreen;
}
to{
border-radius: 30px;
background: blue;
}
}