Cara Mudah Membuat Efek Animasi Dengan Animate CSS Show
Cara Mudah Membuat Efek Animasi Dengan Animate CSS – Sesuai dengan judul tutorial kali ini. kita akan belajar bagaimana sih cara mudah untuk membuat animasi pada teks, gambar, dan elemen lain. yaitu cara mudah nya kita bisa menggunakan animate css. Tutorial ini di tujukan untuk teman-teman yang mungkin agak sedikit malas untuk membuat efek animasi secara manual. maka salah satu alternatif yang bisa kita lakukan untuk membuat animasi yang memiliki efek yaitu dengan menggunakan sebuah library CSS yang bernama Animate.css. BACA JUGA : Tutorial dasar CSS untuk pemula Cara Mudah Membuat Efek Animasi Dengan Animate CSSDi asumsikan untuk teman-teman yang membaca tutorial ini agar paham terlebih dahulu HTML dan CSS Dasar. karena tidak akan di jelaskan secara detail lagi tentang penggunaan class pada element HTML dan cara menghubungkan file CSS ke HTML. karena sudah kita bahas pada tutorial HTML dan CSS Dasar sebelumnya. Next .. Apa itu Animate.CSS ?Nah, jika ada teman-teman di sini yang belum tau apa itu animate.css. animate css adalah sebuah library css yang sudah di buat dan kembangkan oleh seseorang developer bule yang bernama Daniel Eden. nih selengkapnya tentang pak daniel eden. jadi beliau mengembangkan animate css dan membagikannya di github. adapun kegunaan dari animate css ini adalah untuk memudahkan kita untuk membuat animasi text, animasi gambar, dan element lainnya yang kita mau.Cara Mudah Membuat Efek Animasi Dengan Animate CSS. hanya dengan menambahkan nama class nya saja. dan nama class-class nya pun sudah di sediakan untuk tergantung kepada kita sendiri mau menggunakan efek animasi yang bagaimana. karena ada banyak sekali contoh efek animasi yang di sediakan di sini. Teman-teman bisa melihat demo nya di sini https://daneden.github.io/animate.css/. Ini bukanlah sebuah library animasi css yang baru ya, hanya saja kita yang terlambat untuk menuliskan tutorialnya. hehe. maklum saja lah karena banyak kesibukan lain yang harus di selesaikan. Saya rasa teman-teman sudah paham tentang asal usul dan kegunaan dari animate.css ini ya. kita lanjut ke cara pemasangan dan penggunaan nya. Cara membuat animasi dengan menggunakan Animate.CSSBerikut tahapan yang harus di lakukan untuk membuat animasi bergerak animate.css. Pertama sekali yang harus di lakukan adalah : Download library animate.cssTeman-teman bisa download langsung di sini https://daneden.github.io/animate.css/. Hubungkan file animate.css dengan file HTMLTahap kedua kita tinggal menghubungkan file animate css dengan file html atau php kita. karena di sini hanya contoh, maka saya akan menggunakan file html saja. di sini saya sudah mendownload animate.css dan membuat sebuah file html dengan nama animasi.html  Cara Mudah Membuat Efek Animasi Dengan Animate CSS selanjutnya hubungkan file animate.css ke file html kita. 1 2 3 4 5 6 7 8 9 10 11 12 13 <!DOCTYPE html> <html> <head> <title>Membuat animasi dengan animate css</title>
<!-- menghubungkan file animate css --> <link rel="stylesheet" type="text/css" href="animate.css">
</head> <body>
</body> </html> instalasi animate.css selesai. selanjutnya. Mulai membuat animasi dengan animate.cssTiba saat nya kita mencoba. kita akan coba dulu membuat animasi nya dengan efek bounce. atau seperti pantulan bola. kita tes pada element h1. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <!DOCTYPE html> <html> <head> <title>Membuat animasi dengan animate css</title>
<!-- menghubungkan file animate css --> <link rel="stylesheet" type="text/css" href="animate.css">
</head> <body>
<!-- efek bounce animate.css --> <h1 class="animated infinite bounce">WWW.MALASNGODING.COM</h1> </body> </html> oke ayo kita lihat hasilnya :
nah. animasinya pun sudah muncul. seperti yang bisa teman-teman lihat pada penamaan class di element h1 di atas. pertama sekali berikan class “animated“. selanjutnya berikan nama class sesuai dengan jenis efek animasi yang kita inginkan. seperti contoh di atas adalah efek “bounce“. dan “infinite” hanyalah opsi jika ingin membuat animasinya terus menerus berulang-ulang, maka berikan nama class infinite seperti contoh di atas. jika efeknya hanya ingin kita tampilkan sekali saja maka jangan gunakan class infinite. Daftar efek animasi yang ada pada animate.cssBerikut ini adalah daftar nama class yang bisa teman-teman untuk membuat efek animasi yang berbeda-beda.
Nama-nama class di atas bisa teman-teman gunakan untuk membuat animasi efek yang berbeda-beda. dari mulai membuat efek pantulan seperti contoh pertama tadi sampai dengan efek zoom, bergetar, light, dan banyak lagi yg lainnya. Contoh lain : 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 <!DOCTYPE html> <html> <head> <title>Membuat animasi dengan animate css</title>
<!-- menghubungkan file animate css --> <link rel="stylesheet" type="text/css" href="animate.css">
</head> <body> <h1 class="animated infinite bounce">WWW.MALASNGODING.COM</h1> <h1 class="animated infinite wobble">WWW.MALASNGODING.COM</h1> <h1 class="animated infinite jello">WWW.MALASNGODING.COM</h1> <h1 class="animated bounceInUp">WWW.MALASNGODING.COM</h1> <h1 class="animated infinite shake">WWW.MALASNGODING.COM</h1>
</body> </html> See the Pen Cara membuat animasi dengan animate.css by Malas Ngoding (@malasngoding) on CodePen.0 Cara Mudah Membuat Efek Animasi Dengan Animate CSS oh iya, animasi ini bisa di gunakan pada gambar dan element html yg lainnya. jadi tidak hanya untuk text saja. silahkan teman-teman eksperimen sendiri. Sekian dulu tutorial cara membuat animasi dengan css ini. mudah-mudahan dapat bermanfaat, khususnya untuk saya sendiri dan orang banyak.
Incoming search terms:
Diki Alfarabi Hadi Coding enthusiast. Someone who love learn something new. especially about web programming and web design. happy to share about knowledge and learn from other.
Tags: Animasi Dengan Animate CSS, animasi elemen html css3, animasi gambar css3, animasi tulisan teks css3, animate css, bermain dengan efek css3, Cara Mudah Membuat Efek, cara mudah membuat efek animasi pada web, css3 efek animasi, css3 tutorial, library css animasi, membuat animasi dengan css3 Tutorial CSS Dasar
Tutorial CSS3 Dasar
Produk
Tutorial Terbaru
Toko KamiSOCIALMalas Ngoding TUTORIAL MENARIK LAINNYAMembuat Bentuk Segitiga Dengan CSS – Selamat datang kembali di tutorial css di malasngoding.com. beberapa waktu lalu ada beberapa teman-teman pembaca tutorial di malasngoding.com yang ... Diki Alfarabi Hadi Membuat Lingkaran Dengan CSS Membuat Lingkaran Dengan CSS – Pada tutorial ini kita akan belajar membuat lingkaran atau nembuat bulat dengan menggunakan CSS. Memang mungkin ... Diki Alfarabi Hadi Membuat Template Web Responsive Dengan HTML dan CSS – Pada tutorial ini kita akan membuat sebuah template web sederhana responsive dengan menggunakan HTML dan CSS. ... Diki Alfarabi Hadi
|
Cara menggunakan pulse css codepen
Pos Terkait
Copyright © 2024 kemunculan Inc.
