Selamat datang kembali pada tips dan trik Dumet School yang sebentar lagi kita bahas tentang Cara Menggunakan Slide In Animasi CSS.
Pada kesempatan kali ini saya akan membahas tentang apa itu animasi slide in, dan juga akan memberikan studi case untuk 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 membuat sebuah text kemudian kita akan memberikan fungsi slide in kemudian pada tampilan 25% text akan membesar dan akan melanjutkan slide pada titik 0% text akan kembali seperti semula atau bawaan dari tag html nya. Mungkin ini jarang digunakan tetapi jika teman – teman ingin memberikan sentuhan sedikit animasi pada website nya khususnya untuk kalian yang awam dengan Javascript dan Jquery. Dengan pengetahuan html dan css saja bukan alasan untuk mengurangi kreatifitas atau ide kalian sebagai pengembangan skill kalian. Tapi saya sarankan teman – teman juga harus pelan – pelan belajar tentang Javascript dan Jquery karena dalam perkembangan fitur Javascript dan Jquery sangat banyak di gunakan untuk mendukung tampilan website.
Seperti biasa 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, selanjutnya kita implementasikan Cara Menggunakan Slide In Animasi CSS dan berikan fungsi slide nya dengan menggunakan @keyframes yang di dalam nya saya berikan fungsi from dan to. Teman – teman ketikkan persis seperti gambar di bawah ini
Seperti teman – teman lihat pada gambar di atas ini yang saya berikan kotak warna merah berfungsi untuk menjalankan slide ini, dimana fungsi form memiliki margin-left:100%; artinya text akan di margin-left dan text akan hilang di bagian monitor sebelah kanan, kemudian akan di slide ke fungsi to yang memiliki margin-left:0%; artinya text akan menempati posisi awalnya maka hasil slide nya dari arah kanan kekiri, kemudian pada tampilan 75% saya berikan font-size:500%; artinya font akan membesar 5 kali lipat dari font normal nyadan selanjutnya pada titik 0% text akan resize seperti semula sesuai tag html nya.
Jika sudah di tambahkan pada gambar di atas ini, langkah selanjutnya kita berikan kecepatannya
Nah bisa kalian lihat pada gambar di atas ini, saya berikan durasi sebanyak 2s(2 detik), kemudian kita panggil nama slode in nya. Maka jika berhasil tampilan akan slide dari kanan kekiri dan sampai ke titik 75% text akan besar kemudian text akan kembali seperti semula pada titik 0%. Teman – teman save dan jalankan pada browser nya maka akan tahu hasilnya atau bisa jiga klik link ini untuk lebih jelasnya.
Bagaimana,,?? Sangat mudah bukan,,??
Baik, sekian pada tips dan trik kali ini tentang Cara Menggunakan Slide In Animasi CSS kita jumpa kembali pada tips dan trik yang akan datang. Semoga bermanfaat, Terima Kasih dan Sampai Jumpa. 
The post Cara Menggunakan Slide In Animasi CSS appeared first on Kursus Website Terbaik.