Artikel ini menunjukkan proses penambahan animasi dan transisi multi-langkah.
Bagaimana Cara Menggunakan Animasi dan Transisi Multi-Langkah?
Untuk membuat animasi multi-langkah, serangkaian keyframe dibuat. Ini menentukan rangkaian perubahan yang akan diterapkan ke elemen HTML yang dipilih. Setiap keyframe mewakili status animasi yang berbeda, dan browser dengan mulus mentransisikan elemen di antara status ini. Saat transisi, tentukan perubahan halus properti CSS selama durasi yang ditentukan oleh interaksi pengguna atau perubahan status.
Mari kita telusuri contoh praktis untuk pemahaman yang lebih baik:
Contoh 1: Menerapkan Multi-Step Animation
Dalam contoh ini, animasi multi langkah akan diterapkan ke elemen HTML yang dipilih. Kunjungi demonstrasi di bawah ini:
< gaya >
.animationExample {
lebar: 130px;
tinggi: 130px;
background-color: hijau hutan;
posisi: relatif;
animasi: moveAnimate 4s ease-in-out infinite;
}
< / gaya >
< tubuh >
< div kelas = 'contoh animasi' >< / div >
< / tubuh >
Dalam cuplikan kode di atas:
- Pertama, kelas bernama “ contoh animasi ” dipilih di dalam “
” tag. - Selanjutnya nilai “ 130px ” ditugaskan ke “ tinggi ' Dan ' lebar ” properti.
- Selain itu, tetapkan “ hutan hijau ' Dan ' relatif ” sebagai nilai untuk “ warna latar belakang ' Dan ' posisi ” properti untuk meningkatkan visualisasi.
- Setelah itu, gunakan “ animasi ” properti dan atur sama dengan “ moveAnimate 4s easy-in-out tanpa batas ” untuk menerapkan animasi.
- Nilainya terdiri dari empat bagian, yang pertama adalah animasi nama kustom, yang kedua adalah durasi waktu penyelesaian, yang ketiga adalah jenis animasi dan yang keempat adalah batasan berapa kali animasi ini akan diterapkan.
- Terakhir, buat elemen HTML dan beri tanda “ contoh animasi ” kelas untuk itu.
Sekarang, gunakan ' keyframe ” aturan untuk menentukan kebiasaan “ moveAnimate ” animasi:
@ moveAnimate keyframes {0 % {
kiri: 0 ;
background-color: biru;
}
lima puluh % {
kiri: 200px;
background-color: hijau hutan;
mengubah: memutar ( 180 derajat ) ;
}
100 % {
kiri: 0 ;
background-color: biru;
}
}
Di blok kode di atas:
- Pertama, “ @keyframe ” blok dibuat bersama dengan nama animasi khusus yang akan ditentukan.
- Selanjutnya, buat blok bernama “ 0% ” yang menerapkan gaya CSS di awal animasi. Dan gunakan ' warna latar belakang ' Dan ' kiri ” properti CSS.
- Sekarang, buat blok bernama dan “ lima puluh% ” untuk bergaya di tengah animasi. Ini memberikan nilai-nilai “ 200px ”, “ hutan hijau ' Dan ' putar (180 derajat) ” ke properti 'left', 'background-color' dan 'transform'. Ini memungkinkan elemen yang dipilih untuk memutar 200px kiri.
Setelah kompilasi blok kode di atas:
Output menunjukkan animasi multi-langkah telah diterapkan ke elemen HTML yang dipilih.
Contoh 2: Menerapkan Transisi Multi-Langkah
Untuk menerapkan transisi multilangkah, pemilih CSS dapat digunakan bersama dengan “ transisi ' Properti. Kunjungi kode di bawah ini:
.memudar {
opasitas: 1;
transisi: opacity 1s;
}
.fade: arahkan {
opasitas: 0;
}
<
/ gaya>
<
tubuh>
< P kelas = 'memudar' > Arahkan kursor ke saya untuk melihat transisi. < / P >
< / tubuh >
Penjelasan dari kode diatas :
- Pertama, kebiasaan “ memudar ” kelas dipilih dan nilai 1 diberikan ke “ kegelapan ' Properti. Juga, tetapkan nilai “ opasitas 1s ' ke ' transisi ” Properti CSS. Ini mengatur atau menghapus opacity dalam durasi waktu ' 1 detik ”.
- Selanjutnya, “ :arahkan ” pemilih ditugaskan ke “ memudar ' kelas. Di dalamnya, nilai “ 0 ” diatur ke properti opacity.
- Pada akhirnya, elemen HTML dibuat di dalam “
' tag, dan kelas ' memudar ” melekat padanya.
Setelah akhir fase kompilasi, halaman web muncul seperti ini:
GIF menampilkan bahwa transisi pudar khusus telah diterapkan ke elemen HTML yang dipilih.
Kesimpulan
Animasi dan transisi multi-langkah menghidupkan halaman web HTML dengan menambahkan gerakan dan efek visual. Untuk animasi, “ keyframe ” digunakan bersama dengan persentase durasi seperti “ 0% ' adalah awal, ' lima puluh% ' adalah pertengahan, dan ' 100% ” adalah akhir dari durasi animasi. Untuk transisi, pemilih CSS dapat digunakan bersama dengan “ transisi ' kelas. Artikel ini telah mendemonstrasikan proses penggunaan animasi dan transisi multi-langkah.