CSS adalah salah satu cara paling ampuh untuk membuat halaman web menjadi interaktif. Ini mengubah tampilan dan nuansa dasar kami halaman web. Salah satu fitur penting dan menarik yang ditawarkan CSS adalah memungkinkan kita melakukan animasi. Ini memungkinkan kita untuk memindahkan elemen dalam halaman kita. Mari kita mulai Perjalanan Animasi di CSS dengan urutan sebagai berikut:
Animasi di CSS
Menambahkan animasi ke situs web kami adalah cara terbaik untuk menarik perhatian pengguna. Ini tidak hanya menambah nilai ke halaman kami tetapi juga memperkaya pengalaman pengguna. Animasi di CSS dibangun di atas dua bagian. Mereka
- Bingkai utama
- Animasi
Animasi CSS didukung di semua browser. Namun, beberapa browser lama seperti Safari (hingga Versi 8.0) memerlukan prefiks (-webkit-) untuk menafsirkan properti animasi. Sebagai contoh:
.anim {height: 200px width: 200px background: lightblue position: relative border-radius: 100% -webkit-animation-name: cssanim / * browser lama * / -webkit-animation-durasi: 5s / * browser lama * / animasi -name: cssanim animation-durasi: 5s} / * browser lama * / @ -webkit-keyframes cssanim {0% {left: 0px} 100% {left: 300px}} @keyframes cssanim {0% {left: 0px} 100 % {left: 300px}}Kita dapat menggunakan halaman html contoh dari atas dan mengganti kode CSS di tag gaya untuk mencoba contoh lebih lanjut.
Bingkai utama di CSS
Ini adalah blok bangunan animasi di CSS. Ini digunakan untuk menentukan momen dan gaya tertentu dari animasi di halaman web kami. Dengan kata lain, ketika kita menentukan @keyframes di dalam CSS kita, itu mendapat kontrol untuk mengubah keadaan saat ini ke keadaan baru atau menganimasikan objek untuk durasi tertentu.
@Keyframes harus memiliki properti tertentu untuk mengontrol animasi seperti nama animasi, tahapan, dan properti.
Nama - Nama harus ada pada setiap animasi untuk menggambarkan perilakunya.
Tahapan - Panggung mewakili penyelesaian animasi. Ini dapat dilakukan dengan dilambangkan dengan kata kunci 'ke' dan 'dari' atau sebagai persentase, sedangkan 0% mewakili status awal dan 100% mewakili status akhir animasi. Manfaat menggunakan representasi persentase adalah bahwa kita dapat menentukan beberapa tahap menengah di antaranya, yaitu apa yang seharusnya menjadi perilaku animasi pada tahap 50% atau 75% dll.
Properti - Properti ini memberi kita kendali atas @keyframes untuk memanipulasinya selama animasi.
.anim {height: 200px width: 200px background: lightblue position: relative border-radius: 100% animation-name: cssanim animation-length: 5s} @keyframes cssanim {0% {transform: scale (0,5) opacity: 0} 50 % {transform: scale (1.5) opacity: 1} 100% {transform: scale (1)}}Sekarang karena kita sudah jelas tentang mendefinisikan keyframes. Mari kita jelajahi properti animasi, untuk menjelaskan bagaimana menganimasikan elemen dan objek kita. Dua properti yaitu mewarisi dan inisial dapat digunakan dengan semua jenis animasi. Properti ini umumnya digunakan bersama dengan tag div untuk menunjukkan perilaku yang berbeda.
awal: Set properti ini ke nilai defaultnya.
mewarisi: Mewarisi properti ini dari elemen induknya.
Properti Animasi
- animasi-nama
Ini menentukan nama animasi, yang digunakan di @keyframes untuk dimanipulasi.Nilai yang mungkin adalah:
- nama: Ini menentukan nama yang akan diikat ke bingkai utama untuk animasi.
- tidak ada: Ini adalah nilai default dan dapat digunakan untuk mengganti animasi yang diturunkan atau bertingkat.
Sintaksis:
animasi-nama: nama | tidak ada | awal | mewarisi
.anim {height: 200px width: 200px background: lightblue position: relative border-radius: 100% animation-name: cssanim animation-durasi: 5s} @keyframes cssanim {0% {left: 0px} 100% {left: 300px} }- animasi-durasi
Ini menentukan waktu yang dibutuhkan animasi untuk menyelesaikan satu eksekusi. Ini ditentukan dalam detik atau milidetik (mis., 4s atau 400ms). Nilai default dari properti ini adalah 0s, jadi jika properti ini tidak ditentukan maka animasi tidak akan berlangsung.
Sintaksis:
melewati nilai di java
animasi-durasi: waktu
.anim {height: 200px width: 200px background: blue position: relative border-radius: 100% animation-name: cssanim animation-durasi: 4s} @keyframes cssanim {0% {transform: scale (0.4) opacity: 0} 50 % {transform: scale (1.4) opacity: 1} 100% {transform: scale (1)}}- animasi-penundaan
Properti animation-delay memungkinkan kita menentukan penundaan dalam animasi. Ini menentukan kapan urutan animasi akan mulai dieksekusi.
Nilai properti ini dapat dideklarasikan dalam detik (s) atau milidetik (ms). Ini dapat menyimpan nilai positif dan negatif. Nilai positif menunjukkan bahwa animasi akan dimulai setelah waktu yang ditentukan berlalu dan sampai kemudian animasi akan tetap bulat. Di sisi lain, nilai negatif akan segera memulai animasi dari titik seolah-olah telah dijalankan untuk jangka waktu yang ditentukan.
Sintaksis:
animasi-penundaan: waktu
.anim {height: 200px width: 200px background: lightblue position: relative border-radius: 100% animation-name: cssanim animation-durasi: 4s animation-delay: 4s} @keyframes cssanim {0% {left: 0px} 100% {kiri: 250px}}- animasi-iterasi-hitungan
Properti ini menunjukkan berapa kali urutan animasi harus dimainkan. Nilai default dari properti ini adalah 1.Nilai yang mungkin adalah:
- jumlah - menunjukkan jumlah iterasi
- tak terbatas - menunjukkan bahwa animasi harus berulang selamanya
Sintaksis:
animasi-iterasi-hitungan: angka | tak terbatas
.anim {height: 200px width: 200px background: lightblue position: relative border-radius: 100% animation-name: cssanim animation-durasi: 2s animation-iteration-count: 4} @keyframes cssanim {0% {left: 0px} 100% {kiri: 100px}}- animasi-arah
Ini menentukan arah animasi. Arah elemen dapat diatur untuk bermain maju, mundur atau dalam siklus alternatif.Nilai default dari properti ini adalah normal, dan disetel ulang pada setiap siklus.Nilai yang mungkin adalah:
normal - Ini adalah perilaku default dan animasi diputar ke depan. Setelah setiap siklus, animasi mencapai keadaan awalnya dan dimainkan kembali
balik - Animasi diputar dengan arah mundur. Setelah setiap siklus, animasi mencapai status akhirnya dan diputar mundur
bergantian - Arah animasi dibalik yaitu bermain maju pertama dan kemudian mundur pada setiap siklus. Setiap siklus ganjil membuat animasi maju dan setiap siklus genap menampilkan gerakan mundur.
bergantian-mundur - Arah animasi dibalik secara bergantian. Di sini animasi diputar mundur terlebih dahulu dan kemudian maju pada setiap siklus. Setiap siklus ganjil bergerak mundur atau mundur dan setiap siklus genap menampilkan animasi maju.
Sintaksis:
animasi-arah: normal | membalikkan |alternatif | bergantian-mundur
.anim {height: 200px width: 200px background: lightblue position: relative border-radius: 100% animation-name: cssanim animation-durasi: 2s animation-iteration-count: infinite} @keyframes cssanim {0% {left: 0px} 100% {kiri: 100px}}- animasi-waktu-fungsi
Properti ini menentukan kurva kecepatan atau gaya gerakan animasi. Itu ditugaskan untuk membuat perubahan gaya animasi dengan mulus dari satu bentuk ke bentuk lainnya. Jika tidak ada nilai yang ditetapkan, defaultnya adalah kemudahan.Nilai yang mungkin untuk animasi-timing-function adalah:
meredakan - Ini adalah nilai default properti. Di sini animasinya mulai lambat, secara bertahap menjadi cepat di tengah dan kemudian berakhir dengan lambat lagi.
linier - Animasi mempertahankan kecepatan yang sama sepanjang siklus, yaitu dari awal hingga akhir.
kemudahan-masuk - Animasi dimulai dengan lambat.
pemanggilan metode jarak jauh di java
santai - Animasi berakhir dengan lambat.
kemudahan-masuk-keluar - Animasi bergerak perlahan selama awal dan akhir.
kubik-bezier (n, n, n, n) - Fitur lanjutan ini memungkinkan kita membuat fungsi pengaturan waktu khusus dengan menentukan nilai kita sendiri. Nilai yang mungkin berkisar dari 0 hingga 1.
Sintaksis:
animasi-waktu-fungsi: linier | memudahkan | kemudahan-keluar | kemudahan-dalam | kemudahan-masuk-keluar |kubik-bezier (n, n, n, n)
.anim {height: 200px width: 200px background: lightblue position: relative border-radius: 100% animation-name: cssanim animation-length: 2s animation-direction: terbalik} @keyframes cssanim {0% {background: orange left: 0px } 50% {background: kuning kiri: 200px atas: 200px} 100% {background: biru kiri: 100px}}- animasi-isi-mode
Ini adalah properti khusus karena menentukan gaya animasi sebelum atau sesudah animasi dimainkan.Secara default, gaya elemen tidak dipengaruhi oleh animasi sebelum awal atau setelah itu berakhir. Properti ini berguna karena membantu menimpa perilaku default animasi ini.Berikut ini adalah nilai yang mungkin untuk properti mode isian animasi:
tidak ada - Ini adalah nilai default properti, yaitu gaya animasi tidak diterapkan ke elemen, sebelum atau sesudah animasi.
ke depan - Gaya dipertahankan oleh elemen dalam urutan animasi terakhir, yaitu setelah animasi selesai.
ke belakang - Gaya dipertahankan oleh elemen dalam urutan animasi awal, yaitu sebelum animasi dilihat terutama selama penundaan animasi.
kedua - Ini menandakan bahwa animasi akan mengikuti kedua arah yaitu ke depan dan ke belakang
Sintaksis:
animasi-isi-mode: tidak ada | maju | mundur | kedua
.anim {width: 50px height: 50px background: lightblue color: white font-weight: bold position: relative animation-name: cssanim animation-durasi: 5s animation-iteration-count: infinite border-radius: 100%} # anim1 { animasi-waktu-fungsi: kemudahan} # anim2 {animasi-waktu-fungsi: linier} # anim3 {animasi-waktu-fungsi: kemudahan-in} # anim4 {animasi-waktu-fungsi: kemudahan-keluar} # anim5 {animasi- fungsi-waktu: kemudahan-masuk-keluar} @keyframes cssanim {dari {left: 0px} ke {left: 400px}}- animasi-bermain-negara
Properti ini menentukan animasi dalam keadaan bermain atau dijeda. Selain itu, saat animasi dilanjutkan dari jeda, animasi dimulai dari tempat ia pergi.Nilai yang mungkin adalah:
- bermain - Untuk membuat animasi berjalan
- berhenti - Untuk membuat animasi dalam keadaan jeda.
Sintaksis:
animation-play-state: berhenti | bermain
.anim {width: 100px height: 100px background: lightblue position: relative animation-name: cssanim animation-durasi: 3s animation-delay: 2s animation-fill-mode: backwards border-radius: 100%} @keyframes cssanim {0% {top: 0px background-color: orange} 50% {top: 0px background-color: green} 100% {top: 100pxbackground-color: blue}}- animasi
Ini dikenal sebagai properti singkatan animasi. Ini digunakan untuk kode yang lebih bersih. Setelah kita terbiasa dengan semua properti animasi, disarankan agar kita menggunakan singkatan animasi untuk pengkodean lebih cepat dan mendefinisikan semua properti dalam satu baris.
Sintaksis:
animasi: [nama-animasi] | [animasi-durasi] | [animasi-waktu-fungsi] |[animasi-penundaan] | [animasi-iterasi-hitungan] | [arah-animasi] |[mode-isi-animasi] | [animasi-play-state]
Semua efek animasi yang kami tunjukkan di atas menggunakan properti animasi yang berbeda dapat diperoleh dengan menggunakan stenoanimasi Properti.
.anim {height: 200px width: 200px background: lightblue position: relative border-radius: 100% animation-name: cssanim animation-durasi: 2s animation-direction: normal animation-play-state: paused} @keyframes cssanim {0% {background: orange top: 0px} 50% {background: yellow left: 200px top: 200px} 100% {background: blue left: 100px}}Ini menyimpulkan semua properti animasi yang dapat digunakan di CSS. Kita harus mencoba variasi yang berbeda dari properti ini untuk mendapatkan gambaran yang lebih jelas. Saat kita merasa nyaman, properti singkatan animasi bisa sangat membantu untuk menulis kode yang lebih bersih dan lebih cepat. Ini adalah salah satu keterampilan penting yang harus dipelajari di CSS untuk pengembang web. Karena kita cenderung lebih fokus pada objek bergerak daripada objek statis, animasi dapat membantu kita mencapainya dan juga mengembangkan halaman web yang luar biasa.
Lihat kami yang dilengkapi dengan pelatihan langsung yang dipimpin instruktur dan pengalaman proyek kehidupan nyata. Pelatihan ini membuat Anda mahir dalam keterampilan untuk bekerja dengan teknologi web back-end dan front-end. Ini termasuk pelatihan tentang Pengembangan Web, jQuery, Angular, NodeJS, ExpressJS, dan MongoDB.
Ada pertanyaan untuk kami? Harap sebutkan di bagian komentar di blog 'Animasi dalam CSS' dan kami akan menghubungi Anda kembali.