Tutorial Membuat Animasi Menggunakan CSS - KODE IT

Halo teman-teman Kode IT kali ini kita akan membuat tutorial membuat animasi dengan css. Apa maksudnya? Maksudnya adalah kita akan memberikan animasi kepada sebuah elemen pada html. Masih bingung? sekarang coba lihat logo KODE IT dibawah ini

Nah gimana? menarik bukan? mau lagi? lihat contohnya dibawah ini

                    






Bagus gak? pasti bagus lah :v bagaimana caranya? simak tutorialnya dibawah ini :

1. Pertama buka dashboard blog teman-teman
2. Kemudian pilih Tata Letak

     3. Tambahkan widget HTML/Javascript

     4. Kemudian klik icon pensil untuk mengedit, Jika sudah maka tampilannya akan seperti ini

    5. Setelah itu tekan pada kotak "Konten" dan pastekan code dibawah ini
     
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css" />

    6. Setelah selesai dipaste Kemudian klik tombol simpan

    7. Nah sekarang pergi ke Menu Postingan

    8. Buat Entri Baru kemudian pilih HTML

     9. Sekarang coba paste code dibawah

<img class="animated infinite bounce" src="url gambar" />

Note: 
- Class="animated" wajib ada karena itu parentnya
- Animasi ini bisa dilakukan pada element lainya yang penting ada nama class dari salah satu animasi tersebut

     10. Nama class yang tersedia adalah

bounce	flash	pulse	rubberBand
shake	headShake	swing	tada
wobble	jello	bounceIn	bounceInDown
bounceInLeft	bounceInRight	bounceInUp	bounceOut
bounceOutDown	bounceOutLeft	bounceOutRight	bounceOutUp
fadeIn	fadeInDown	fadeInDownBig	fadeInLeft
fadeInLeftBig	fadeInRight	fadeInRightBig	fadeInUp
fadeInUpBig	fadeOut	fadeOutDown	fadeOutDownBig
fadeOutLeft	fadeOutLeftBig	fadeOutRight	fadeOutRightBig
fadeOutUp	fadeOutUpBig	flipInX	flipInY
flipOutX	flipOutY	lightSpeedIn	lightSpeedOut
rotateIn	rotateInDownLeft	rotateInDownRight	rotateInUpLeft
rotateInUpRight	rotateOut	rotateOutDownLeft	rotateOutDownRight
rotateOutUpLeft	rotateOutUpRight	hinge	jackInTheBox
rollIn	rollOut	zoomIn	zoomInDown
zoomInLeft	zoomInRight	zoomInUp	zoomOut
zoomOutDown	zoomOutLeft	zoomOutRight	zoomOutUp
slideInDown	slideInLeft	slideInRight	slideInUp
slideOutDown	slideOutLeft	slideOutRight	slideOutUp
heartBeat

     Untuk lebih lengkapnya silahkan kunjungi web aslinya https://daneden.github.io/animate.css/
11. Jika sudah selesai simpan kemudian klik tombol "Pratinjau" untuk melihhat hasilnya

12. Kalau sudah bergerak dan... sekarang terserah teman-teman mau diapain
13. Selesai

Terima kasih buat teman-teman yang udah baca dari awal sampai akhir. semoga tutorial ini bermanfaat. Jangan lupa tinggalkan komentarnya agar kami bisa berkembang menjadi yang lebih baik lagi. Untuk tutorial css selanjutnya ditunggu aja ya :)

Share this post