Cara Menggunakan Fungsi Fadein Pada CSS
Tahukah kalian kalau guna FadeIn itu pun dapat di terapkan di css loh, umumnya guna – guna seperti fadeIn, fadeout, fade-out-left di terapkan kebanyakan di Jquery atau javascript. Nah di kesempatan kali ini saya akan memberikan tips dan trik bagaimana Cara Menggunakan Guna Fadein Di CSS.
Dimana sebuah content akan di style oleh fadein yaitu dengan bantuan @keyframes. Dimana didalam @keyframes kita gunakan selaku penghubung antara style class yang akan di fadein kemudian akan dipanggil animation-name lalu di dalamnya diberikan guna fadein. Di latihan kali ini saya akan fade in image dan tampilan image akan di fadein dengan menggunakan opacity. Pertama-tama – tama siapkan terlebih dahulu image dan text editornya, lalu copy script html nya di bawah ini
<!doctype html>
<html>
<head>
<title>Cara Menggunakan Guna Fadein Di CSS</title>
</head>
<body>
<div class=container>
<div id=animated-example class=animated fadeIn></div>
</div>
</body>
</html>
Pastekan di text editornya, langkah berikutnya tambahkan style css nya
<style>
.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;
}
</style>
Bila telah, save dengan nama index.html dan jalankan di browser nya. Karenanya hasil sementara seperti gambar di bawah ini
Langkah berikutnya kita akan implementasikan Cara Menggunakan Guna Fadein Di CSS, kita akan memberikan @keyframes. Teman – teman ketikkan script seperti gambar di bawah ini
Kemudian tambahkan pun script seperti gambar di bawah ini
Bila telah save dan refresh di browser nya, karenanya tampilannya akan smoth terlihat ada animate opacity nya karena di @keyframes berisi opacity di mulai dari 0 hingga 1 artinya yang akan muncul di browser ialah yang pertama-tama tampil opacity 0 dan akan tampil gambar aslinya opacity 1. Dan di bantu oleh beberapa guna yang kita letakkan di class=”animated” yaitu
Mempunyai durasi 10s(detik), kemudian ditampilkan di class fade in
Bagaimana, gampang sekali bukan. Seperti menggunakan Jquery atau Javascript, css pun dapat kita berikan guna fade in dan terlihat lebih menarik. Bagi studi case kali ini saya menggunakan gambar, mungkin bagi lain kali teman – teman dapat praktekkan pun dengan text.
Bagus, sekianlah dulu di artikel kali ini mengenai Cara Menggunakan Guna Fade in Di CSS kita berjumpa kembali di artikel berikutnya. Semoga menjadi tambahan pengetahuan bagi belajar css nya, agar lebih mamahami seluruh guna – guna yang terdapat di css. Teman – teman pun boleh eksperimen dari latihan kali ini, mungkin ditambahkan lagi css nya agar terlihat lebih bagus.
Terimakasih dan Hingga Jumpa, Semoga bermanfaat 🙂
Sumber https://kursuswebsite.org
