Sabtu, 27 Juni 2015

Cara Membuat Animasi Dengan CSS


Cara Membuat Animasi Dengan CSS

Assalamu'alaikum wr wb

  CSS merupakan salah satu cara untuk memperindah tampilan website kita, dengan css kita bisa saja membuat animasi yang keren, yuk mari kita bahas bersama.
  


  Diatas adalah contoh dari animasi menggunakan css, ada beberapa hal yang harus diketahui dalam membuat animasi, yaitu @keyframes nama animasi, itu adalah tempat untuk meletakan kode animasinya, dan sebuah objek misalkan <div> dengan menambahkan kode css animation-name: nama animasi; animation-duration: 3s; . Maka objek <div> tersebut akan menjalankan animasi dari @keyframes nama animasi dengan durasi 3s. contoh:



  Kode untuk animasi css yang diatas:
<style>
    div .aa{
        animation-name: one;
        animation-duration: 5s;
        animation-direction: alternate;
        animation-iteration-count: infinite;
        width: 60px;
        height: 60px;
    }
    @keyframes one{
        from{background: blue;}
        to{background: yellow;}
    }
</style>
<div class="aa">
</div>

  Penjelasan:

  • animation-name: nama animasi.
  • animation-duration: durasi animasi, 5 detik ( bisa dalam detik ataupun ms ).
  • animation-direction: arah animasi, alternate ( dari posisi awal ke akhir lalu dari akhir ke awal, dari biru ke kuning, dari kuning ke biru ).
  • animation-interation-count: berapa banyak animasi ditampilkan, infinite ( terus menerus ).
  • width: lebar objek, 60px.
  • height: tinggi objek, 60px.
  • @keyframes one: isi dari animasi yang bernama one.
  • from{background: blue;}: posisi awal animasi, background: blue; (background berwarna biru).
  • to{background: yellow;}: posisi akhir animasi, background: yellow; (background berwarna kuning).

  Kita juga bisa menampilkan animasi ketika mouse mengenai objek, coba arahkan mouse pada objek dibawah ini, maka objek tersebut akan berubah.



  Kode untuk animasi css diatas:

<style>
    div .aaa{
        background: black;
        width: 60px;
        height: 60px;
    }
    div .aaa:hover{
        animation-name: two;
        animation-duration: 1s;
        animation-direction: alternate;
        animation-iteration-count: infinite;
    }
    @keyframes two{
        0%{background: red;}
        50%{background: blue;}
        100%{width: 100px;transform: rotate(360deg);}
    }
</style>
<div class="aaa">
</div>

  Penjelasan:

  • div .aaa:hover: kode didalamnya akan aktif apabila mouse mengenai objek, itu yang disebut dengan hover, jika mouse tersebut belum mengenai objek maka kode yang aktif hanyalah yang berada dalam div .aaa{}
  • Berbeda dengan contoh yang pertama, untuk menentukan progress dari animasinya kita bisa memakai persentase, ketika 0% maka background akan berwarna merah, lalu pada 50% background akan berwarna biru, dan pada 100% objek akan berubah lebarnya menjadi 100px disertai merotasi 360deg.


  Saya berharap penjelasan singkat tentang cara membuat animasi dengan css ini bisa memberikan manfaat untuk kita semua, terimakasih sudah mengunjungi blog saya.

Silahkan untuk berkomentar.

Wassalamu'alaikum wr wb

Orang biasa yang senang belajar. Senang ngoprek dan menulis sesuatu yang berbau teknologi, desain grafis, dan hal random lainnya.

Give us your opinion

Silakan Berkomentar