Cara Menggunakan Slide In Animasi CSS
Selamat datang kembali di tips dan trik Source Code Aplikasi yang sebentar lagi kita bahas mengenai Cara Menggunakan Slide In Animasi CSS.
Di kesempatan kali ini saya akan membahas mengenai apa itu animasi slide in, dan pun akan memberikan studi case bagi kita praktekkan agar teman – teman tahu yang di hasilkan dari slide in animasi. Di latihan kali ini kita akan menggunakan slide in animasi yang mana kita akan merancang sebuah text kemudian kita akan memberikan guna slide in kemudian di tampilan 25% text akan membesar dan akan melanjutkan slide di titik 0% text akan kembali seperti semula atau bawaan dari tag html nya. Mungkin ini jarang digunakan tetapi sekiranya teman – teman ingin memberikan sentuhan sedikit animasi di situs nya khususnya bagi kalian yang awam dengan Javascript dan Jquery. Dengan pengetahuan html dan css saja bukan alasan bagi mengurangi kreatifitas atau ide kalian selaku pengembangan skill kalian. Tetapi saya sarankan teman – teman pun mesti pelan – pelan belajar mengenai Javascript dan Jquery karena pada perkembangan fitur Javascript dan Jquery amat banyak di gunakan bagi mendukung tampilan situs.
Seperti lazim siapkan text editornya dan copy script html nya di bawah ini
<html>
<head>
<title>Cara Menggunakan Slide In Animasi CSS </title>
</head>
<body>
<h1>Slide In Animasi</h1>
</body>
</html>
Kemudian save terlebih dahulu dengan nama slide.html, berikutnya kita implementasikan Cara Menggunakan Slide In Animasi CSS dan berikan guna slide nya dengan menggunakan @keyframes yang di pada nya saya berikan guna from dan to. Teman – teman ketikkan persis seperti gambar di bawah ini
Seperti teman – teman lihat di gambar di atas ini yang saya berikan kotak warna merah berfungsi bagi menjalankan slide ini, dimana guna form mempunyai margin-left:100%; artinya text akan di margin-left dan text akan hilang di bagian monitor sebelah kanan, kemudian akan di slide ke guna to yang mempunyai margin-left:0%; artinya text akan menempati posisi awalnya karenanya hasil slide nya dari arah kanan kekiri, kemudian di tampilan 75% saya berikan font-size:500%; artinya font akan membesar 5 kali lipat dari font normal nyadan berikutnya di titik 0% text akan resize seperti semula sesuai tag html nya.
Bila telah di tambahkan di gambar di atas ini, langkah berikutnya kita berikan kecepatannya
Nah dapat kalian lihat di gambar di atas ini, saya berikan durasi sebanyak 2s(2 detik), kemudian kita panggil nama slode in nya. Karenanya sekiranya berhasil tampilan akan slide dari kanan kekiri dan hingga ke titik 75% text akan besar kemudian text akan kembali seperti semula di titik 0%. Teman – teman save dan jalankan di browser nya karenanya akan tahu hasilnya atau dapat jiga klik link ini bagi lebih jelasnya.
Bagaimana,,?? Betul-betul gampang bukan,,??
Bagus, demikian di tips dan trik kali ini mengenai Cara Menggunakan Slide In Animasi CSS kita jumpa kembali di tips dan trik yang akan datang. Semoga bermanfaat, Terima Kasih dan Hingga Jumpa. 🙂
Sumber https://kursuswebsite.org
