A. Pendahuluan
Pada kali ini aku akan share cara membuat efek animasi dengan animate.css. mungkin dari kalian masih binggung dan sulit saat membuat animasi secara manua . Maka dari itu aku akan menjelaskan cara untuk menggunakan animate.css.
B. Latar Belakang
Karena saat membuat animasi secara manual di css akan sulit dilakukan.
C. Maksud dan Tujuan
Agar dapat membuat animasi dengan CSS.
D. Alat & Bahan
- animasi.css. Download Disini
- Text Editor.
- 10 Menit Tergantung inividu
Cara ini ditunukan utnuk kalian yang mungkin agak sedikit malas untuk membuat efek animasi secara manual. maka salah satu alternatif yang mungkin dapat kalian lakukan yaitu menggunakan sebuah library CSS yang bernama Animate.css.
Cara yang paling mudah membuat efek animasi dengan animasi CSS. tapi karena aku tidak akan menjelaskan detail cara tentang pengunaan class pada element lainnya.
Apa sebenarnya itu Animate.css ? . Nah, jika ada dari kalian disini yang belum tau apa itu animate.css. Animate.css adalah library css yang dapat dibuat dan dikembangkan oleh seorang devoloper yang bernama Daniel Eden.
jadi dia mengembangkan animate.css dan membagikannya di github. kegunaan animate.css dapat memudahkan kalian untuk membuat animasi text, animasi gambar, dan animasi lainnya yang mungkina akan kalian buat. Kalian hanya harus menabahkan class nya yang telah disediakan oleh animasi,css.
Cara menggunakan Animate.css berikut tahapan yang harus dilakukan untuk membuat animasi bergerak animasi.css. Pertama kalian download dulu Animate.css di Github link ada diatas. Lalu hubungkan file animate.css tadi dengan file html karena disini aku akan menjelaskan tutorial mengunakan animate.css.
Disini aku sudah menyiapkan beberapa file yang sudah aku buat tadi :
lalu hubungkan file animate.css ke file index.html :
<!DOCTYPE html>Setelah itu langsung saja buat sebuah effect . Coba beberapa effect contoh mengeffect element h1 :
<html>
<head>
<title>Mukti911</title>
<link rel="stylesheet" type="text/css" href="animate.css">
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Mukti911</title>
<link rel="stylesheet" type="text/css" href="animate.css">
</head>
<body>
<h1 class="animated infinite bounce">Mukti911</h1>
</body>
</html>
Nah lalu lihat hasilnnya. Nah penjelasannya tu seperti ini dapat dilihat tag h1 beri class animate. selanjutnya berikan nama class sesuai dengan jenis efek bounce.. dan infinite adalah opsi dari animasi yang terus menerus berulang ulang .
Beikut adalah daftar nama class dari efek animasi yang di animasi.css :
- bounce
- flash
- pulse
- rubberBand
- shake
- 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
- flip = flip
- flipInX
- flipInY
- flipOutX
- flipOutY
- lightSpeedIn
- lightSpeedOut
- rotateIn
- rotateInDownLeft
- rotateInDownRight
- rotateInUpLeft
- rotateInUpRight
- rotateOut
- rotateOutDownLeft
- rotateOutDownRight
- rotateOutUpLeft
- rotateOutUpRight
- slideInUp
- slideInDown
- slideInLeft
- slideInRight
- slideOutUp
- slideOutDown
- slideOutLeft
- slideOutRight
- zoomIn
- zoomInDown
- zoomInLeft
- zoomInRight
- zoomInUp
- zoomOut
- zoomOutDown
- zoomOutLeft
- zoomOutRight
- zoomOutUp
- hinge
- rollIn
- rollOut
- Dapat membuat animasi dengan animate.css
Jdi animasi ini juga bisa digunakan pada gambar dan element element html yang lainya. Jadi tidak hanya untuk h1 saja.
F. Referensi
- -
No comments:
Post a Comment