Animasi CSS dengan @keyframes

26/11/2019    Risman Hakim    54     Website

Animasi CSS dengan @keyframes - Dengan adanya animasi pada CSS membuat kita bisa dengan mudah dalam mengatur dan membuat suatu pergerakan atau perubahan elemen. Ada banyak penggunaan animasi CSS salah satu yang akan saya bahas kali ini adalah @keyframes, @keyframes merupakan aturan dari animasi CSS untuk melakukan suatu pergerakan atau perubahan elemen. Dengan begitu kalian bisa dengan mudah membuat animasi sederhana dengan hanya menggunakan CSS saja.

Saya akan praktekan @keyframes pada elemen div, dimana akan ada perubahan atau animasi ukuran pada elemen div nya. Silahkan kalian bisa ketikan sintaknya berikut ini.

<head>
    <meta charset="UTF-8">
    <title>Animasi CSS dengan @keyframes</title>
    <style>
        div {
          width: 10px;
          height: 50px;
          background-color: red;
          animation-name: ukuran;
          animation-duration: 5s;
        }
        @keyframes ukuran {
          from {width: 10px;}
          to {width: 500px;}
        }
    </style>
</head>
<body>
    <div></div>
</body>

Dari sintak diatas telah ditentukan nama animasi pada properti animation-name yaitu ukuran untuk selanjutnya nama ukuran akan dipanggil pada selector @keyframes untuk melakukan perubahan ukuran dari dan sampai. Dimana akan terjadi perubahan ukuran dari 10px sampai dengan ukuran 500px, kemudian ditambahkan dengan durasi animasi sebanyak 5s.

Baiklah, cukup sekian pembahasan mengenai Animasi CSS dengan @keyframes semoga dengan pembahasan dan contoh diatas bermanfaat buat kalian, selamat mencoba dan sampai jumpa pada pembahasan selanjutnya.

HTML CSS

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More