Animasi CSS (Keyframes) | Belajar CSS Dasar: Mempercantik Web | Mahir.dev | Mahir.dev Academy

Animasi CSS (Keyframes) | Belajar CSS Dasar: Mempercantik Web | Mahir.dev | Mahir.dev Academy

@keyframes

css

@keyframes nama-animasi-kamu {
    /* Tahapan animasi didefinisikan di sini */
    from { /* atau 0% */
        properti: nilai-awal;
    }
    
    /* Kamu bisa nambahin persentase di tengah-tengah */
    50% { 
        properti: nilai-tengah;
    }
 
    to { /* atau 100% */
        properti: nilai-akhir;
    }
}

css

@keyframes ubah-warna-background {
    from { background-color: red; } /* Mulai dari merah */
    50% { background-color: yellow; } /* Di tengah jadi kuning */
    to { background-color: blue; }   /* Berakhir jadi biru */
}
 
@keyframes geser-dan-memudar {
    0% {
        transform: translateX(0);
        opacity: 1;
    }
    100% {
        transform: translateX(200px);
        opacity: 0;
    }
}

animation-name:
- Nentuin nama @keyframes yang mau dipake buat elemen ini.
- Nilainya harus persis sama kayak nama yang kamu kasih di @keyframes.
- Contoh: animation-name: ubah-warna-background;
animation-duration:
- Nentuin berapa lama satu siklus animasi itu berlangsung, dari 0% sampe 100%.
- Nilainya pake satuan waktu (s atau ms). Ini wajib diset kalau mau animasinya jalan!
- Contoh: animation-duration: 3s; (animasi berlangsung 3 detik).
animation-timing-function:
- Sama kayak transition-timing-function, ini nentuin kurva percepatan animasi.
- Nilai umum: ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier(...).
- Contoh: animation-timing-function: linear;
animation-delay:
- Nentuin waktu tunda (delay) sebelum animasi dimulai.
- Nilainya pake satuan waktu (s atau ms).
- Contoh: animation-delay: 1s; (animasi baru mulai 1 detik setelah halaman load atau pemicu lain).
animation-iteration-count:
- Nentuin berapa kali animasi bakal diulang.
- Nilainya bisa:
  - Angka (misal, 3 buat ngulang 3 kali).
  - infinite (buat animasi ngulang terus-terusan tanpa henti).
- Defaultnya 1 (jalan sekali aja).
- Contoh: animation-iteration-count: infinite;
animation-direction:
- Nentuin apakah animasi harus jalan bolak-balik atau cuma maju aja pas diulang.
- Nilai umum:
  - normal (default): Animasi jalan dari 0% ke 100% tiap iterasi.
  - reverse: Animasi jalan dari 100% ke 0% tiap iterasi.
  - alternate: Animasi jalan maju di iterasi ganjil (0% ke 100%), terus mundur di iterasi genap (100% ke 0%).
  - alternate-reverse: Kebalikan alternate. Mundur dulu, baru maju.
- Contoh: animation-direction: alternate; (cocok buat efek goyang-goyang atau pulse).
animation-fill-mode:
- Nentuin style apa yang dipake elemen pas animasi lagi gak jalan (sebelum delay atau setelah selesai).
- Nilai umum:
  - none (default): Elemen gak nerapin style dari animasi pas lagi gak jalan. Dia bakal pake style normalnya.
  - forwards: Setelah animasi selesai, elemen bakal tetep nahan style dari keyframe terakhir (100% atau to).
  - backwards: Sebelum animasi mulai (selama animation-delay), elemen bakal langsung nerapin style dari keyframe pertama (0% atau from).
  - both: Gabungan forwards dan backwards.
- Contoh: animation-fill-mode: forwards; (biar elemen gak balik ke style awal setelah animasi selesai).
animation-play-state:
- Nentuin apakah animasi lagi jalan (running - default) atau lagi di-pause (paused).
- Biasanya diubah pake JavaScript buat ngontrol animasi (misal, tombol pause/play).
- Contoh: animation-play-state: paused;

css

.kotak-bergerak {
    width: 100px;
    height: 100px;
    background-color: tomato;
    position: relative; /* Biar bisa digeser pake transform */
 
    animation-name: geser-dan-memudar; /* Panggil @keyframes yg udah dibuat */
    animation-duration: 4s;
    animation-timing-function: ease-in-out;
    animation-delay: 0.5s;
    animation-iteration-count: infinite; /* Ulang terus */
    animation-direction: alternate; /* Bolak-balik */
    animation-fill-mode: both; 
}
 
/* Pastikan @keyframes geser-dan-memudar sudah didefinisikan: */
@keyframes geser-dan-memudar {
    0% {
        transform: translateX(0) scale(1);
        opacity: 1;
        background-color: tomato;
    }
    50% {
        transform: translateX(100px) scale(1.2);
        opacity: 0.5;
        background-color: gold;
    }
    100% {
        transform: translateX(0) scale(1); /* Balik lagi ke posisi & ukuran awal */
        opacity: 1;
        background-color: mediumseagreen;
    }
}

css

.spinner-berputar {
    width: 50px;
    height: 50px;
    border: 5px solid lightgray;
    border-top-color: dodgerblue; /* Bikin satu sisi beda warna buat efek putaran */
    border-radius: 50%;
 
    /* Shorthand: nama, durasi, timing-function, iteration-count */
    animation: putaran 0.8s linear infinite;
}
 
@keyframes putaran {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
 
.pesan-muncul {
    opacity: 0; /* Awalnya transparan */
    transform: translateY(20px); /* Awalnya agak ke bawah */
 
    /* Animasi bernama 'muncul', durasi 0.5s, gaya ease-out, */
    /* delay 0.2s, jalan sekali, nahan style akhir, jalan otomatis */
    animation: muncul 0.5s ease-out 0.2s 1 forwards running;
}
 
@keyframes muncul {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}