Animasi CSS

Menyiapkan HTML

Buat sebuah elemen HTML yang akan dianimasikan. Misalnya, kita akan membuat animasi pada sebuah <div> dengan ID "animasi-div".

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div id="animasi-div"></div>
</body>
</html>

Menyiapkan CSS

Buat file CSS terpisah atau tambahkan dalam tag <style> pada file HTML Anda. Berikut ini contoh CSS untuk animasi elemen tersebut:

#animasi-div {
    width: 100px;
    height: 100px;
    background-color: #3498db;
    position: relative;
    animation-name: animasi-saya;
    animation-duration: 2s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

@keyframes animasi-saya {
    0% {
        transform: scale(1);
        background-color: #3498db;
    }
    50% {
        transform: scale(1.2);
        background-color: #e74c3c;
    }
    100% {
        transform: scale(1);
        background-color: #3498db;
    }
}

Menjalankan Animasi

Dalam CSS di atas, kita menggunakan @keyframes untuk mendefinisikan animasi dengan nama "animasi-saya". Kemudian, kita menerapkan animasi ini pada elemen dengan ID "animasi-div". Animasi ini akan berlangsung selama 2 detik, mengubah skala elemen dan warna latar belakangnya.

Anda bisa menyesuaikan nilai-nilai seperti animation-duration, animation-timing-function, dan animation-iteration-count sesuai dengan preferensi Anda.

Sekarang, ketika Anda membuka halaman HTML Anda, elemen dengan ID "animasi-div" akan memiliki animasi yang telah Anda definisikan. Selamat mencoba!

PREVIOUS
NEXT