Animasi dalam sebuah website sangatlah penting untuk membuat content website lebih interaktif, terlebih lagi animasi yang digunakan sangat berguna bagi user. Misalnya didalam website ada slider, pop up gambar dan juga animasi – animasi lainnya sebagai pendukung tampilan website, selain itu juga terlihat lebih atraktif sehingga membuat user berpikir website yang ia kunjungi sangatlah bagus dan membuat user betah berkunjung di halaman website kita. Pada kesempatan kali ini saya akan memberikan tips bagaimana Cara Membuat Animasi Dengan animation-duration CSS, di latihan kali ini kita akan membuat sebuah animasi sederhana dengan animation-duration CSS. Kita akan memanggil image panah yang nanti kita akan gunakan, biasanya ini berguna untuk memberitahukan kepada user bahwa jika di klik maka akan di tampilkan halaman berikutnya pada studi case ini saya akan memberikan animasi panah yang mengarah pada tombol dan tombol akan mengeksekusinya ke halaman lainnya. Berikut ini adalah screen shoot yang nanti kita akan buat
Seperti yang teman – teman lihat pada gambar di atas ini, icon panah akan melakukan animasi top to bottom secara berulang untuk memberitahukan kepada user untuk melakukan pendaftaran free trial. Cukup menarik bukan, oke mari kita langsung saja implementasikan Cara Membuat Animasi Dengan animation-duration CSS. Seperti biasa siapkan text editornya terlebih dahulu dan copy script html nya di bawah ini
<!DOCTYPE html> <html> <head> </head> <body> <div class="content"> <img src="panah.png"> <p><a href="http://www.dumetschool.com">Daftar Disini Untuk Free Trial</a></p> </div> </form> </body> </html>
Kemudian tambahkan script css nya di bawah ini
<style>
*{padding: 0;margin: 0}
.content{
width: 500px;
margin: auto;
}
img {
width: 50px;
height: 50px;
position: relative;
}
a{
display: inline-block;
background-color: orange;
padding: 10px;
position:relative;
top: 20px;
text-decoration: none;
color: white;
border-radius: 5px;
font-family: calibri;
font-weight: bold;
font-size: 20px
}
</style>
Jika sudah, save dan save dengan nama index.html kemudian jalankan pada browser nya, maka hasil sementara seperti gambar di bawah ini
Langkah berikutnya kita tambahkan animasi css dengan animation-duration dan kita hubungkan dengan @keyframes, tambahkan seperti gambar di bawah ini
Jika sudah ditambahkan save dan refresh pada browser nya, maka animasi dengan css telah berhasil di buat, gambar panah akan melakukan animasi top to bottom secara berulang ke arah tombol sebanyak 20px dari top yang dijalankan oleh @keyframes kemudian kecepatan di berikan animation-duration sebanyak 2s (2 detik).
Bagaimana, mudah sekali bukan.
Cukup sekian dulu pada artikel kali ini tentang Cara Membuat Animasi Dengan animation-duration CSS, kita berjumpa kembali pada artikel berikutnya. Semoga bermanfaat, terimakasih dan sampai jumpa 🙂