Animasi CSS dengan @keyframes

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.

26 November 2019

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat