Dengan dirilisnya CSS3, kini Anda dapat membuat animasi CSS asli untuk menganimasikan elemen HTML Anda
Salah satu animasi yang bisa Anda buat dengan CSS adalah animasi fade-in, di mana elemen perlahan akan diubah dari tidak terlihat menjadi terlihat
Berikut kode untuk CSS fade-in animation. Saya akan menjelaskan kode di bawah ini
.fade-in:hover { animation-name: FadeIn; animation-duration: 3s; transition-timing-function: linear; } @keyframes FadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @-moz-keyframes FadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes FadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @-o-keyframes FadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @-ms-keyframes FadeIn { 0% { opacity: 0; } 100% { opacity: 1; } }
Pertama, aturan CSS diterapkan ke kelas semu fade-in:hover sehingga animasi akan berjalan saat pengguna mengarahkan kursor ke elemen dengan kelas
Animasi yang ingin kita buat adalah animasi fade-in, dan dapat dibuat dengan mentransisikan opacity elemen secara perlahan dari 0 ke 1
Animasi di CSS dibuat menggunakan aturan @keyframes, jadi kami memasukkan aturan di dalam @keyframes sebagai berikut
- 0% {opacity:0;} Saat animasi dimulai pada 0%, setel opacity ke nol
- <div class="fade-in" style="background-color: aqua; border-radius: 5px; padding: 10px" > <h1>Hover on me and see the animation</h1> </div> 0 Saat animasi berakhir pada <div class="fade-in" style="background-color: aqua; border-radius: 5px; padding: 10px" > <h1>Hover on me and see the animation</h1> </div> 1, atur opacity menjadi satu
Aturan di atas sudah cukup untuk membuat animasi fade-in. Awalan di depan aturan keyframe di atas juga ditambahkan untuk mendukung browser lama
Selanjutnya, aturan @keyframes diterapkan ke kelas <div class="fade-in" style="background-color: aqua; border-radius: 5px; padding: 10px" > <h1>Hover on me and see the animation</h1> </div> 4 dengan menggunakan properti <div class="fade-in" style="background-color: aqua; border-radius: 5px; padding: 10px" > <h1>Hover on me and see the animation</h1> </div> 5
Properti <div class="fade-in" style="background-color: aqua; border-radius: 5px; padding: 10px" > <h1>Hover on me and see the animation</h1> </div> 5 menentukan nama aturan CSS @keyframes yang ingin Anda terapkan ke elemen. T
Properti <div class="fade-in" style="background-color: aqua; border-radius: 5px; padding: 10px" > <h1>Hover on me and see the animation</h1> </div> 8 menentukan durasi animasi dalam hitungan detik. Pada contoh di atas, diperlukan waktu 3 detik agar animasi beralih dari 0% ke <div class="fade-in" style="background-color: aqua; border-radius: 5px; padding: 10px" > <h1>Hover on me and see the animation</h1> </div> 1
Properti terakhir fade-in:hover_1 adalah untuk mengontrol kecepatan percepatan efek animasi. Nilai fade-in:hover2 berarti animasi akan dilakukan dengan kecepatan konstan
Anda dapat memasukkan nilai lain di fade-in:hover_1 seperti
- fade-in:hover_4 - animasi akan dipercepat menjelang pertengahan transisi lalu melambat lagi
- fade-in:hover_5 - animasi dimulai perlahan dan kemudian dipercepat
- fade-in:hover_5 - animasi dimulai dengan cepat dan kemudian melambat hingga akhir
- fade-in:hover_7 - seperti kemudahan tetapi dengan nilai presisi yang berbeda
Tetapi jika Anda tidak memiliki preferensi apapun, maka fade-in:hover2 akan menjadi pilihan yang baik karena animasi akan memiliki kecepatan transisi yang konstan
Anda dapat menambahkan kelas <div class="fade-in" style="background-color: aqua; border-radius: 5px; padding: 10px" > <h1>Hover on me and see the animation</h1> </div> 4 ke elemen HTML apa pun, termasuk teks, daftar, tabel, dan gambar
Mari kita uji animasi yang telah kita buat di atas dalam elemen 00. Saya akan menambahkan warna latar belakang dan bantalan untuk membuat elemen lebih besar