CSS ialah akronim bagi 'Cascading Style Sheets'.
Apa pula maksud 'Cascading Style Sheets'
Err.. kalau ikut terjemahan ia bermaksud Melata Helaian Stail. Itu je. Selebihnya pengarang kurang faham serta belum layak untuk memberi penerangan secara terperinci.
Okay, berbalik kita ke tajuk :
Bagaimana CSS gerak animasi
Animasi CSS ialah satu ciri CSS yang membolehkan anda menganimasikan perubahan dalam satu atau lebih sifat gaya sesuatu elemen, serta mengawal pelbagai aspek animasi. Animasi CSS tulen tidak memerlukan kod tambahan (cth. JavaScript) atau media (cth. GIF) — semuanya dilakukan dengan HTML dan CSS.
Animasi CSS adalah bagus untuk tapak web yang ingin menambah kandungan yang lebih dinamik serta menarik, tanpa lebih membebankan halaman. Memandangkan ia tidak memerlukan skrip tambahan, animasi CSS tidak mungkin memperlambatkan halaman anda.
Untuk membuat animasi CSS, anda memerlukan tiga perkara: elemen HTML untuk dianimasikan, peraturan CSS yang mengikat animasi kepada elemen ini dan sekumpulan bingkai utama yang mentakrifkan gaya pada permulaan dan akhir animasi. Anda juga boleh menambah tetapan untuk menyesuaikan lagi animasi anda, seperti kelajuan dan kelewatan.
Berikut adalah satu contoh mudah animasi CSS:
Demo
Paparan teks HTML
<div class="bks" style="height: 300px; position: relative;">
<div class="labu"></div>
</div>
<style>
.labu {
animation-name: gerakku;
animation-duration: 2s;
animation-direction: alternate;
animation-iteration-count: infinite;
animation-timing-function: linear;
width: 100%;
height: 100%;
border-radius: 10px;
position: absolute;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
}
@keyframes gerakku {
from {
background: orange;
height: 40px;
width: 100%;
}
to {
background: #555;
height: 300px;
width: 50px;
}
}
</style>
<div class="labu"></div>
</div>
<style>
.labu {
animation-name: gerakku;
animation-duration: 2s;
animation-direction: alternate;
animation-iteration-count: infinite;
animation-timing-function: linear;
width: 100%;
height: 100%;
border-radius: 10px;
position: absolute;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
}
@keyframes gerakku {
from {
background: orange;
height: 40px;
width: 100%;
}
to {
background: #555;
height: 300px;
width: 50px;
}
}
</style>
Dalam contoh ini, <div class="labu"></div> ialah elemen yang dianimasikan. Dalam CSS, tetapan animasi dikaitkan dengan div. Tetapan tambahan mempengaruhi masa dan tingkah laku animasi.
Animasi itu sendiri dibuat dalam bingkai utama <div class="bks" style="height: 300px; position: relative;"><div class="labu"></div></div>, diaturkan oleh peraturan @keyframes. Kerangka kunci mentakrifkan keadaan permulaan animasi (from {}) dan keadaan akhirnya (to {}).
Sifat animasi (animation-direction: alternate; animation-iteration-count: infinite;) membuat animasi terus berlaku secara berulang-alik.
Animasi kerangka utama mengubah tiga sifat gaya div pada warna latar belakang, lebar dan ketinggian. Apabila ketiga-tiga sifat ini dianimasikan sekaligus, ia menghasilkan animasi yang padu.
Terdapat dokumen dengan pelbagai jenis animasi yang mungkin mempunyai berbilang bingkai utama, setiap satu terikat pada elemen yang berbeza. - Berbanding dengan CSS contoh ini, hanya ada satu kerangka utama.
- Pengarang bukanlah pakar tentang CSS ni. Hanya tahu sedikit, belajar dengan mengunjungi laman-laman web berkaitan.
Ulasan