Nurul Imam Studio

Belajar HTML, CSS, JavaScript, PHP & MySQL untuk pemula & tingkat lanjut

Jasa Pembuatan Website Profesional

Cara Mudah Menambahkan Animasi CSS3

Sudah sekian lama tak jumpa hehehe, Kali ini Blog & Note of Nurul Imam akan bermain-main Animasi dengan menggunakan animate.css. Lho, emang CSS bisa buat animasi gitu ? Whooo iya donk, CSS3 memang sudah mendukung efek animasi yang tidak kalah bagusnya dengan flash.

Apa itu animate.css ? Animate.css adalah library animasi CSS3 siap pakai, ada beberapa kategori animasi mulai dari animasi untuk meminta perhatian (seeking attention) sampai animasi masuk dan keluar(in/out). Animate.css yang dibuat oleh Dan Eden ini menggabungkan beberapa fitur dari CSS3 seperti animation (keyframes), transformation, dan transition, semuanya dikemas dalam class-class siap pakai, jadi jika anda ingin menambahkan animasi sederhana, tidak perlu repot lagi membuatnya secara manual, cukup sertakan file animate.css dan tambahkan class animasi yang diinginkan.

Animate.css dapat didownload di daneden.me/animate/. disana anda dapat mendownload seluruh library atau memilih animasi apa saja yang anda butuhkan dengan melakukan “Custom Build”. Andapun dapat melihat contoh animasinya dengan mengklik tipe-tipe animasi yang ada dan perhatikan animasi yang akan dihasilkan.
Kompatibilitas

Saat ini animate.css hanya dapat berjalan dengan baik untuk browser-browser terbaru, seperti Chrome, safari, firefox dan IE10. Mengingat animate.css menggunakan CSS3 untuk menjalankan animasinya.

Penggunaannya sangat mudah, anda tinggal menambahkan class yang telah disediakan oleh animate.css dan element yang anda beri classpun akan bergerak sesuai dengan tipe animasi yang dipilih. Pertama-tama, download library animate.css dari link yang saya sebutkan di atas, lalu sertakan dalam dokumen HTML anda dengan menggunakan tag link.

<link rel="stylesheet" href="animate.css" />

Setelah itu kita tinggal menambahkan class animated dan nama animasi yang disediakan. Contohnya kita ingin membuat animasi bounce dari kiri.

Aku Adalah Aku
<div class="animated bounceInleft">Woeewwwww.... Woeeewwwww.... OK</div>

Dengan demikian div tersebut akan beranimasi seolah-olah memantul masuk dari sebelah kiri. Untuk merubah durasi dari animasi, atau menambahkan delay sebelum animasi dijalankan atau anda ingin agar animasi dijalankan secara terus-menerus anda dapat menambahkan style berikut :

div{
    -browser-animation-duration: 3s; /* animasi akan berjalan selama 2detik */
    -browser-animation-delay:5s; /* animasi akan dijalankan setelah 5detik */
    -browser-animation-iteration-count: infinite; /* akan menjalankan animasi secara terus menerus. */
}

Ingat, kata -browser diatas harus diganti dengan -webkit, -moz, -ms dan -o sesuai dengan apa yang kita butuhkan untuk lintas browser. Untuk daftar nama animasi yang bisa anda gunakan bisa dilihat dilink yang telah saya sebutkan di atas jadi tinggal anda yang berkreasi :)

48 Comments

  1. Mizz AizaReply

    tentu menarik tampilan menggunakan animasi ini ya..

    • Nurul ImamReply

      Lumayan lah tambah sedikit bergerak :D

  2. RirinReply

    wah keren mas animasi nya. Jadi pengen nyoba juga nih pakai css3 :)

    • Nurul ImamReply

      Hayu cobain mbak, banyak banget lho variasinya

  3. Anthonie EkaReply

    wah bisa juga ternyata yah menggunakan animasi seperti ini, jadi lebih menarik nih tampilannya, makasih sharingnya mas :)

    • Nurul ImamReply

      Yah sama-sama

  4. AanReply

    bedanya bikin animasi pake ccs3 sama jquery apaan sih mas??
    apa lebih ringan gitu…

    • Nurul ImamReply

      Klo CSS3 ya make CSS animasinya, klo jQuery make JavaScript yang handle animasinya

      • Nurul ImamReply

        Oia, klo pake CSS3 lebih cepet loadnya dibanding jQuery sama Flash

  5. Devy IndriyaniReply

    seperti transisi effect ya mas,,mantaf..!!

  6. Wahidiyah JakartaReply

    misalnya.. setelah di ‘boune’ seperti itu lalu bisa di klik mas yah..?!?! wahhh keren banget!!!

    • Nurul ImamReply

      Bisa, tinggal ditambahkan link saja :)

  7. bang bahoReply

    dengan adanya animasi sperti ini menambah desain web atau blogg yaa mas
    tahnks mas, makin sering kesini makin paham ni :)

    • Nurul ImamReply

      Iya, lebih mempercantik desain website. Animasi juga membuat web jadi lebih hidup :)

  8. baho-punyaReply

    thank u mas Nurul, semakin dalam nih pengetahuan css saya:)
    animasi ini keren :)

    • Nurul ImamReply

      Iya sama-sama, semoga makin betah yah :)

  9. Azis WhiteReply

    Emang jago bener ente coding..salut ane

    • Nurul ImamReply

      Saya masih belajar kok ;)

  10. JuraganTekno.comReply

    wahhh kaya nya bang imam udah mulai jago bahasa pemograman nih, ajarin dong bang :D

    • Nurul ImamReply

      Masih belajar kok, silahkan baca saja artikel di web ini
      Nanti saya juga update, bookmark saja web saya :)

  11. RirinReply

    udah lama nggak nongol nih admin nya hehehe :D

    • Nurul ImamReply

      Kemana aja yah :D

  12. Fahri's ArticlesReply

    Wah, manis nih ditambah animasi-animasi seperti ini sob, hehehe… Thanks ilmunya ya…

    • Nurul ImamReply

      Iya lebih manis terasa lebih hidup websitenya

  13. Aldi Rahman UntoroReply

    wow, keren websitenya

    • Nurul ImamReply

      Terimakasih ;)

  14. redo kusumaReply

    keren mas,,, o ya blognya keren juga,mmm pake apa bikinnya mas,,, saya juga pengen yang kayak gini,wordpress ya mas?

    • Nurul ImamReply

      Iya mas, pake WordPress biasa aja kok

  15. andikaReply

    mas bisa bantu saya gak, saya kesulitan membuat tugas akhir skpsi saya dalam mebuat web, mohon bantuanya mas

    • Nurul ImamReply

      Silahkan kirim email saja atau SMS ke nomor saya ada si kontak

  16. hadinugReply

    mantap om, ini ada resource 50+ animasi dengan css, live, run code dan tutorial nya
    hadinug.net/post/1398707179/animasi-dengan-css-try-and-run-.html

    • Nurul ImamReply

      Sippp, saya lihat yah :)

  17. Edyn LaskarReply

    Lagi belajar neh,, kebetulan nemu websitenya kang Nurul Imam jadi semua problem sebagian telah bisa di atasi,,, :)

    • Nurul ImamReply

      Syukurlah bisa membantu :)

  18. Mandha NeophyteReply

    waw, kren mas animasinya,,

    • Nurul ImamReply

      Iya keren yah :D

  19. KHRISRAF ABEDNEGO SIReply

    kamu belajar nya di mana ???

    • Nurul ImamReply

      Belajar disini :D

  20. IcahbanjarmasinReply

    Terima Kasih nih Kang Nurul atas tipsnya ya..hahhahayyy

    • Nurul ImamReply

      Iya sama-sama :)

  21. audio hajiReply

    ok sip gan, sangat bermanfaat

    • Nurul ImamReply

      Sipppp…

  22. zfxxxReply

    mau nanya nih.. kalo animasi akan dijalankan saat kita scroll kebawah…
    mohon pencerahanya gan :D

    • Nurul ImamReply

      Pake jQuery mas, lazy load gitu kan ?

  23. kagomeReply

    mas saya pemula ni, sekalian dong minta link buat download cssnya :-D

    arigatao

  24. Halina SafitriReply

    gan mau bertanya, css3 itu pake notepad kah?

  25. samaliReply

    Menarik tampilan animasi…

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>