Tahukah kalian kalau fungsi FadeIn itu juga bisa di terapkan pada css loh, umumnya fungsi – fungsi seperti fadeIn, fadeout, fade-out-left di terapkan kebanyakan pada Jquery atau javascript. Nah pada kesempatan kali ini saya akan memberikan tips dan trik bagaimana Cara Menggunakan Fungsi Fadein Pada CSS.
Dimana sebuah content akan di style oleh fadein yaitu dengan bantuan @keyframes. Dimana didalam @keyframes kita gunakan sebagai penghubung antara style class yang akan di fadein kemudian akan dipanggil animation-name lalu di dalamnya diberikan fungsi fadein. Pada latihan kali ini saya akan fade in image dan tampilan image akan di fadein dengan menggunakan opacity. Pertama – tama siapkan terlebih dahulu image dan text editornya, lalu copy script html nya di bawah ini
Cara Menggunakan Fungsi Fadein Pada CSS
Pastekan pada text editornya, langkah berikutnya tambahkan style css nya
.container{
width: 700px;
margin:auto;
}
.animated {
background: url[logo.png] no-repeat;
background-position: left top;
padding-top:95px;
margin:60px;
animation-duration: 10s;
animation-fill-mode: both;
height: 100px;
}
Jika sudah, save dengan nama index.html dan jalankan pada browser nya. Maka hasil sementara seperti gambar di bawah ini
Langkah berikutnya kita akan implementasikan Cara Menggunakan Fungsi Fadein Pada CSS, kita akan memberikan @keyframes. Teman – teman ketikkan script seperti gambar di bawah ini
Kemudian tambahkan juga script seperti gambar di bawah ini
Jika sudah save dan refresh pada browser nya, maka tampilannya akan smoth terlihat ada animate opacity nya karena di @keyframes berisi opacity di mulai dari 0 sampai 1 artinya yang akan muncul pada browser adalah yang pertama tampil opacity 0 dan akan tampil gambar aslinya opacity 1. Dan di bantu oleh beberapa fungsi yang kita letakkan pada class=”animated” yaitu
Memiliki durasi 10s[detik], kemudian ditampilkan pada class fade in
Bagaimana, mudah sekali bukan. Seperti menggunakan Jquery atau Javascript, css juga bisa kita berikan fungsi fade in dan terlihat lebih menarik. Untuk studi case kali ini saya menggunakan gambar, mungkin untuk lain kali teman – teman bisa praktekkan juga dengan text.
Baik, sekian dulu pada artikel kali ini tentang Cara Menggunakan Fungsi Fade in Pada CSS kita berjumpa kembali pada artikel berikutnya. Semoga menjadi tambahan wawasan untuk belajar css nya, agar lebih mamahami semua fungsi – fungsi yang ada pada css. Teman – teman juga boleh eksperimen dari latihan kali ini, mungkin ditambahkan lagi css nya agar terlihat lebih bagus.
Terimakasih dan Sampai Jumpa, Semoga bermanfaat 🙂