CSS adalah salah satu kaedah paling ampuh untuk menjadikan laman web itu interaktif. Ia mengubah rupa dan nuansa asas kita laman sesawang. Salah satu ciri penting dan menarik yang ditawarkan CSS adalah bahawa ia membolehkan kita melakukan animasi. Ini membolehkan kita memindahkan elemen dalam halaman kita. Mari mulakan Perjalanan Animasi kami dalam CSS mengikut urutan berikut:
Animasi dalam CSS
Menambah animasi ke laman web kami adalah cara terbaik untuk menarik perhatian pengguna. Ia bukan sahaja menambah nilai pada halaman kami tetapi juga memperkaya pengalaman pengguna. Animasi dalam CSS dibina berdasarkan dua bahagian. Mereka
- Kerangka Utama
- Animasi
Animasi CSS disokong di semua penyemak imbas. Walau bagaimanapun, beberapa penyemak imbas yang lebih tua seperti Safari (hingga Versi 8.0) memerlukan awalan (-webkit-) untuk menafsirkan sifat animasi. Sebagai contoh:
.anim {tinggi: lebar 200 piksel: latar belakang 200 piksel: kedudukan cahaya biru: radius sempadan relatif: 100% -webkit-animation-name: cssanim / * penyemak imbas lama * / -webkit-animasi-tempoh: 5s / * pelayar lama * / animasi -nama: cssanim animasi-tempoh: 5s} / * penyemak imbas lama * / @ -webkit-keyframes cssanim {0% {kiri: 0px} 100% {kiri: 300px}} @keyframes cssanim {0% {kiri: 0px} 100 % {kiri: 300px}}Kita boleh menggunakan contoh halaman html dari atas dan menggantikan kod CSS dalam tag gaya untuk mencuba contoh lebih lanjut.
Kerangka utama dalam CSS
Ini adalah blok bangunan animasi dalam CSS. Ini digunakan untuk menentukan momen dan gaya animasi tertentu di laman web kami. Dengan kata lain, ketika kita menentukan @keyframes di dalam CSS kita, ia mendapat kawalan untuk mengubah keadaan semasa ke keadaan baru atau menghidupkan objek untuk jangka waktu tertentu.
@Keyframes perlu mempunyai sifat tertentu untuk mengawal animasi seperti nama animasi, tahap, dan sifat.
Nama - Nama mesti ada untuk setiap animasi untuk menggambarkan tingkah lakunya.
Tahap - Pentas mewakili penyelesaian animasi. Ia dapat dilambangkan dengan kata kunci 'ke' dan 'dari' atau sebagai peratusan, sedangkan 0% mewakili keadaan awal dan 100% mewakili keadaan akhir animasi. Manfaat menggunakan perwakilan peratusan adalah bahawa kita dapat menentukan beberapa peringkat perantaraan di antaranya, apa yang seharusnya menjadi tingkah laku animasi pada tahap 50% atau 75% dll.
Hartanah - Sifat ini memberi kita kawalan ke atas @keyframes untuk memanipulasinya semasa animasi.
.anim {tinggi: lebar 200 piksel: latar belakang 200 piksel: kedudukan cahaya biru: radius sempadan relatif: 100% nama-animasi: cssanim-tempoh animasi: 5s} @keyframes cssanim {0% {transform: scale (0.5) kelegapan: 0} 50 % {transform: scale (1.5) opacity: 1} 100% {transform: scale (1)}}Sekarang kerana kita jelas mengenai menentukan bingkai utama. Marilah kita meneroka sifat animasi, untuk menerangkan cara menghidupkan elemen dan objek kita. Dua harta iaitu mewarisi dan awal dapat digunakan dengan semua jenis animasi. Sifat-sifat ini biasanya digunakan bersama dengan tanda div untuk menunjukkan tingkah laku yang berbeza.
awal: Menetapkan harta ini ke nilai lalai.
mewarisi: Mewarisi harta ini dari elemen induknya.
Sifat Animasi
- nama-animasi
Ini menentukan nama animasi, yang digunakan dalam @keyframes untuk dimanipulasi.Nilai yang mungkin adalah:
- nama: Ini menentukan nama yang akan diikat pada bingkai utama untuk animasi.
- tiada: Ini adalah nilai lalai dan boleh digunakan untuk mengatasi animasi yang diwariskan atau berlari.
Sintaks:
animasi-nama: nama | tiada | awal | mewarisi
.anim {tinggi: lebar 200 piksel: latar belakang 200 piksel: kedudukan cahaya biru: radius sempadan relatif: 100% nama-animasi: cssanim animasi-tempoh: 5s} @keyframes cssanim {0% {kiri: 0px} 100% {kiri: 300px} }- tempoh animasi
Ini menentukan masa yang diperlukan untuk animasi menyelesaikan satu pelaksanaan. Ia ditentukan dalam beberapa saat atau milisaat (mis., 4s atau 400ms). Nilai lalai harta tanah ini adalah 0s, jadi jika harta ini tidak ditentukan maka animasi tidak akan berlaku.
Sintaks:
jangka masa animasi: masa
.anim {tinggi: lebar 200 piksel: latar belakang 200 piksel: kedudukan biru: radius sempadan relatif: 100% nama-nama: cssanim animasi-tempoh: 4s} @keyframes cssanim {0% {transform: scale (0.4) kelegapan: 0} 50 % {transform: scale (1.4) opacity: 1} 100% {transform: skala (1)}}- animasi-kelewatan
Properti kelewatan animasi membolehkan kita menentukan kelewatan animasi. Ini menentukan bila urutan animasi akan mula dilaksanakan.
Nilai harta tanah ini dapat dinyatakan dalam beberapa saat atau milisaat (ms). Ia dapat mengekalkan nilai positif dan negatif. Nilai positif menunjukkan bahawa animasi akan dimulakan setelah masa yang ditentukan berlalu dan sehingga saat itu akan tetap tidak ditangguhkan. Sebaliknya, nilai negatif akan segera memulakan animasi dari titik seolah-olah sudah dijalankan untuk jangka waktu yang ditentukan.
fungsi berlebihan dalam c ++
Sintaks:
animasi-kelewatan: masa
.anim {tinggi: lebar 200 piksel: latar belakang 200 piksel: kedudukan cahaya biru: radius sempadan relatif: 100% nama-animasi: cssanim animasi-tempoh: 4s-kelewatan animasi: 4s} @keyframes cssanim {0% {kiri: 0px} 100% {kiri: 250 piksel}}- animasi-lelaran-kiraan
Properti ini menunjukkan berapa kali urutan animasi dimainkan. Nilai lalai harta ini adalah 1.Nilai yang mungkin adalah:
- nombor - menunjukkan bilangan lelaran
- tidak terhingga - menunjukkan bahawa animasi harus berulang selama-lamanya
Sintaks:
animasi-lelaran-hitungan: nombor | tidak terhingga
.anim {tinggi: lebar 200 piksel: latar belakang 200 piksel: kedudukan cahaya biru: radius sempadan relatif: 100% nama-nama: cssanim animasi-tempoh: 2s animasi-iterasi-hitungan: 4} @keyframes cssanim {0% {kiri: 0px} 100% {kiri: 100 piksel}}- arahan-animasi
Ia menentukan arah animasi. Arah elemen boleh diatur untuk bermain ke depan, ke belakang atau dalam pusingan gantian.Nilai lalai harta ini adalah normal, dan ia akan diset semula pada setiap kitaran.Nilai yang mungkin adalah:
biasa - Ini adalah tingkah laku lalai dan animasi dimainkan ke hadapan. Selepas setiap kitaran, animasi sampai ke keadaan awal dan dimainkan semula
terbalik - Animasi dimainkan ke arah belakang. Selepas setiap kitaran, animasi sampai ke keadaan akhir dan dimainkan ke belakang
alternatif - Arah animasi dibalikkan iaitu memainkannya ke hadapan terlebih dahulu dan kemudian ke belakang pada setiap kitaran. Setiap kitaran ganjil menghasilkan animasi ke hadapan dan setiap kitaran genap menjadikan pergerakan mundur.
ganti-terbalik - Arah animasi dibalik secara bergantian. Di sini animasi dimainkan ke belakang terlebih dahulu dan kemudian diteruskan pada setiap kitaran. Setiap kitaran ganjil bergerak terbalik atau mundur dan setiap kitaran genap menghasilkan animasi ke hadapan.
Sintaks:
arah animasi: normal | terbalik |ganti | ganti-terbalik
.anim {tinggi: lebar 200 piksel: latar belakang 200 piksel: kedudukan cahaya biru: radius sempadan relatif: 100% nama-animasi: cssanim animasi-tempoh: 2s animasi-iterasi-hitungan: tak terhingga} @keyframes cssanim {0% {kiri: 0px} 100% {kiri: 100 piksel}}- fungsi-masa-animasi
Properti ini menentukan keluk kelajuan atau gaya pergerakan animasi. Ia ditugaskan untuk membuat perubahan dalam gaya animasi dengan lancar dari satu bentuk ke bentuk yang lain. Sekiranya tidak ada nilai yang ditetapkan, ia akan menjadi mudah untuk dilunaskan.Nilai yang mungkin untuk fungsi animasi-masa adalah:
kemudahan - Ini adalah nilai lalai harta tanah. Di sini animasi bermula perlahan, secara beransur-ansur menjadi cepat di tengah dan kemudian berakhir dengan perlahan.
linear - Animasi mengekalkan kelajuan yang sama sepanjang kitaran iaitu dari awal hingga akhir.
kemudahan - Animasi bermula dengan perlahan.
kemudahan - Animasi berakhir dengan perlahan.
kemudahan dalam keluar - Animasi bergerak perlahan pada awal dan akhir.
kubik-bezier (n, n, n, n) - Ciri canggih ini memungkinkan kita membuat fungsi pemasaan khusus dengan menentukan nilai kita sendiri. Nilai yang mungkin berkisar antara 0 hingga 1.
Sintaks:
fungsi-masa-animasi: linear | kemudahan | kemudahan | kemudahan | kemudahan dalam |kubik-bezier (n, n, n, n)
.anim {tinggi: lebar 200 piksel: latar belakang 200 piksel: kedudukan cahaya biru: radius sempadan relatif: 100% nama-animasi: cssanim-tempoh animasi: 2s-arah animasi: terbalik} @keyframes cssanim {0% {latar belakang: kiri oren: 0px } 50% {latar belakang: kiri kuning: 200 piksel atas: 200 piksel} 100% {latar belakang: kiri biru: 100 piksel}}- mod pengisian-animasi
Ini adalah harta khas kerana ia menentukan gaya animasi sebelum atau selepas animasi dimainkan.Secara lalai, gaya elemen tidak dipengaruhi oleh animasi sebelum permulaan atau selepas ia berakhir. Properti ini berguna kerana membantu mengatasi tingkah laku lalai animasi ini.Berikut adalah kemungkinan nilai untuk sifat mod animasi-isi:
tiada - Ini adalah nilai lalai dari properti iaitu gaya animasi tidak diterapkan pada elemen, sebelum atau sesudah animasi.
ke hadapan - Gaya dikekalkan oleh elemen dalam urutan animasi terakhir iaitu setelah animasi selesai.
ke belakang - Gaya dipertahankan oleh elemen dalam urutan animasi awal iaitu sebelum animasi ditatap terutamanya semasa penundaan animasi.
kedua-duanya - Ini menandakan bahawa animasi akan mengikuti kedua arah iaitu ke depan dan ke belakang
Sintaks:
mod-mengisi-animasi: tidak ada | ke hadapan | ke belakang | kedua-duanya
.anim {lebar: tinggi 50 piksel: latar belakang 50 piksel: warna biru terang: font-berat putih: kedudukan berani: animasi relatif-nama: cssanim-tempoh animasi: animasi 5s-iterasi-hitungan: tak terbatas batas-radius: 100%} # anim1 { animation-timing-function: easy} # anim2 {animation-timing-function: linear} # anim3 {animation-timing-function: easy-in} # anim4 {animation-timing-function: easy-out} # anim5 {animasi- timing-function: easy-in-out} @keyframes cssanim {dari {kiri: 0px} hingga {kiri: 400px}}- animasi-permainan-keadaan
Properti ini menentukan animasi dalam keadaan bermain atau dijeda. Juga, apabila animasi dilanjutkan dari jeda, ia bermula dari tempat ia pergi.Nilai yang mungkin adalah:
- bermain - Untuk menjadikan animasi berjalan
- berhenti sejenak - Untuk menjadikan animasi dalam keadaan jeda.
Sintaks:
animasi-main-keadaan: dijeda | bermain
.anim {lebar: 100px tinggi: latar belakang 100px: kedudukan cahaya biru: animasi relatif-nama: cssanim animasi-tempoh: 3s animation-delay: 2s animation-fill-mode: backward border-radius: 100%} @keyframes cssanim {0% {atas: 0px latar belakang-warna: oren} 50% {atas: 0px latar belakang-warna: hijau} 100% {atas: 100pxbackground-color: blue}}- animasi
Ini dikenali sebagai harta tanah animasi. Ia digunakan untuk kod yang lebih bersih. Setelah kita terbiasa dengan semua sifat animasi, disarankan agar kita menggunakan animasi singkatan untuk pengekodan lebih cepat dan menentukan semua sifat dalam satu baris.
Sintaks:
animasi: [nama animasi] | [tempoh animasi] | [fungsi animasi-masa] |[animasi-kelewatan] | [animasi-lelaran-hitungan] | [arah animasi] |[mod animasi-isi] | [animasi-main-keadaan]
cara menukar double menjadi int in java
Semua kesan animasi yang kami tunjukkan di atas menggunakan sifat animasi yang berbeza dapat dicapai dengan menggunakan singkatananimasi harta benda.
.anim {tinggi: lebar 200 piksel: latar belakang 200 piksel: kedudukan cahaya biru: radius sempadan relatif: 100% nama-animasi: cssanim animasi-durasi: 2s-arah animasi: keadaan-animasi-main-normal: dijeda} @keyframes cssanim {0% {latar belakang: oren atas: 0px} 50% {latar belakang: kiri kuning: 200px atas: 200px} 100% {latar belakang: kiri biru: 100px}}Ini menyimpulkan semua sifat animasi yang boleh digunakan dalam CSS. Kita harus mencuba pelbagai variasi sifat ini untuk mendapatkan gambaran yang lebih jelas. Apabila kita merasa selesa, harta tanah animasi pendek dapat sangat membantu menulis kod yang lebih bersih dan cepat. Ini adalah salah satu kemahiran penting untuk dipelajari di CSS untuk pembangun web. Oleh kerana kita cenderung lebih fokus pada objek bergerak daripada objek statik, animasi dapat membantu kita mencapainya dan juga mengembangkan laman web yang luar biasa.
Lihat kami yang dilengkapi dengan latihan langsung yang dipimpin oleh instruktur dan pengalaman projek kehidupan sebenar. Latihan ini menjadikan anda mahir dalam kemahiran bekerja dengan teknologi web back-end dan front-end. Ia merangkumi latihan mengenai Pembangunan Web, jQuery, Angular, NodeJS, ExpressJS, dan MongoDB.
Ada soalan untuk kami? Sila sebutkan di bahagian komen blog 'Animations in CSS' dan kami akan menghubungi anda.