Cara Menciptakan 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 dapat saja menciptakan animasi yang keren, yuk mari kita bahas bersama.

  

  Diatas yakni teladan dari animasi menggunakan css, ada beberapa hal yang harus diketahui dalam menciptakan animasi, yaitu @keyframes nama animasi, itu yakni kawasan untuk meletakan instruksi animasinya, dan sebuah objek misalkan <div> dengan menambahkan instruksi 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 ( dapat dalam detik ataupun ms ).
• animation-direction: arah animasi, alternate ( dari posisi awal ke selesai kemudian dari selesai 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 berjulukan one.
• from{background: blue;}: posisi awal animasi, background: blue; (background berwarna biru).
• to{background: yellow;}: posisi selesai animasi, background: yellow; (background berwarna kuning).

  Kita juga dapat menampilkan animasi saat 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: instruksi didalamnya akan aktif apabila mouse mengenai objek, itu yang disebut dengan hover, kalau mouse tersebut belum mengenai objek maka instruksi yang aktif hanyalah yang berada dalam div .aaa{}
• Berbeda dengan teladan yang pertama, untuk memilih progress dari animasinya kita dapat menggunakan persentase, saat 0% maka background akan berwarna merah, kemudian pada 50% background akan berwarna biru, dan pada 100% objek akan berubah lebarnya menjadi 100px disertai merotasi 360deg.

  Saya berharap klarifikasi singkat ihwal cara menciptakan animasi dengan css ini dapat menawarkan manfaat untuk kita semua, terimakasih sudah mengunjungi blog saya.

Silahkan untuk berkomentar.

Wassalamu'alaikum wr wb

Share this post