Keterangan
Gambar datang atau menyebabkan datang secara bertahap ke dalam atau keluar dari tampilan, atau bergabung ke bidikan lain
Sintaksis
@keyframes fadeIn { 0% {opacity: 0;} 100% {opacity: 1;} }Parameter
Transform - Transform berlaku untuk transformasi 2d dan 3d ke elemen
Opacity - Opacity berlaku untuk elemen untuk membuat tembus cahaya
Contoh
Reload page _Keluaran
Ini akan menghasilkan hasil berikut -
Jika Anda pernah menggunakan perangkat lunak pengeditan video — apakah itu Windows Movie Maker atau Adobe Premiere Pro — kemungkinan besar Anda sudah familiar dengan transisi video fade-in dan fade-out. Mereka sangat efektif untuk menciptakan nuansa yang bagus dan halus, dan tidak ada alasan mengapa Anda tidak dapat memilikinya di gudang senjata Anda saat Anda memprogram aplikasi web.
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 perlahan mentransisikan opacity elemen 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, dibutuhkan waktu 3 detik untuk 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:hover_2 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 - suka kemudahan tetapi dengan nilai presisi yang berbeda
Tetapi jika Anda tidak memiliki preferensi, 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