Kalau transisi itu buat perubahan dari satu state ke state lain, animasi dengan @keyframes ini bisa bikin gerakan yang lebih kompleks dengan banyak step.

Jadi Sutradara Animasi di Web: Menguasai @keyframes CSS!

Udah bisa bikin efek perubahan halus pake transisi CSS? Keren! Transisi itu cocok banget buat perubahan style dari satu state ke state lain (misalnya, dari kondisi normal ke kondisi :hover). Tapi, gimana kalau kamu pengen bikin animasi yang lebih kompleks, yang punya beberapa tahapan atau "adegan" di tengah-tengahnya, atau yang bisa ngulang-ngulang terus tanpa perlu interaksi pengguna?

Nah, buat kebutuhan kayak gitu, CSS punya senjata yang lebih canggih: Animasi CSS menggunakan aturan @keyframes dan properti animation-*. Dengan ini, kamu bisa jadi kayak sutradara yang ngatur alur cerita animasi elemenmu, frame per frame!

Apa Itu @keyframes?

Aturan @keyframes dipake buat ngedefinisiin tahapan-tahapan (atau "key frames") dari sebuah animasi. Kamu nentuin gimana style sebuah elemen berubah di titik-titik waktu tertentu selama animasi berlangsung.

• Sintaks Dasar @keyframes:

  @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;
      }
  }

  • @keyframes: Keyword buat memulai definisi animasi.
  • nama-animasi-kamu: Kamu bebas ngasih nama buat animasimu (tanpa spasi, pake tanda hubung kalau multi-kata, misal goyang-goyang, muncul-dari-bawah). Nama ini yang nanti bakal kamu panggil di properti animation-name.
  • from (atau 0%): Nentuin style di awal animasi.
  • to (atau 100%): Nentuin style di akhir animasi.
  • Persentase (0% - 100%): Kamu bisa nambahin sebanyak mungkin "keyframe" di antara from dan to pake persentase buat ngontrol style di titik-titik waktu spesifik selama animasi. Misalnya, 25%, 50%, 75%.

Contoh Definisi @keyframes Sederhana:

@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;
    }
}

Menerapkan Animasi ke Elemen dengan Properti animation-*

Setelah kamu ngedefinisiin @keyframes-nya, kamu perlu "masang" animasi itu ke elemen HTML yang kamu mau pake berbagai properti animation-*.

1. 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;

2. 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).

3. 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;

4. 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).

5. 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;

6. 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).

7. 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).

8. 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;

Contoh Penerapan Properti animation-*:

.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;
    }
}

Di contoh ini, .kotak-bergerak bakal animasi geser, berubah ukuran, berubah warna, dan memudar secara bolak-balik terus-terusan.

Shorthand animation: Nulis Semuanya Jadi Satu Baris!

Sama kayak transition, ada juga properti shorthand animation buat nulis semua properti animation-* jadi satu baris. Ini cara yang paling sering dipake.

• Sintaks Umum (urutan disarankan, tapi fleksibel untuk beberapa): animation: name duration timing-function delay iteration-count direction fill-mode play-state;
• Minimal yang wajib ada: animation-name dan animation-duration. Sisanya opsional dan bakal pake nilai default.

Contoh Penggunaan Shorthand animation:

.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);
    }
}

Kapan Pake Transisi vs. Kapan Pake Animasi Keyframes?

• Transisi CSS (transition):

  • Cocok buat perubahan style yang simpel dari satu state awal ke satu state akhir.
  • Biasanya dipicu sama interaksi pengguna (kayak :hover, :focus).
  • Lebih gampang disetup buat efek-efek kecil.

• Animasi CSS (@keyframes & animation):

  • Cocok buat animasi yang lebih kompleks dengan banyak tahapan (keyframe).
  • Bisa ngulang-ngulang otomatis (infinite) tanpa perlu pemicu.
  • Ngasih kontrol yang lebih detail atas alur waktu dan properti animasi.
  • Bisa punya beberapa animasi berbeda di satu elemen.

Seringkali, kamu bisa ngombinasiin keduanya atau milih salah satu tergantung kebutuhan efek yang mau kamu capai.

Animasi CSS dengan @keyframes ini bener-bener ngebuka pintu buat kreativitas tanpa batas di web! Kamu bisa bikin loading spinner, efek teks yang ngetik sendiri, karakter yang bergerak, dan macem-macem lagi cuma pake CSS.

Kuncinya adalah ngertiin gimana cara ngedefinisiin @keyframes dan gimana cara ngontrolnya pake berbagai properti animation-*. Jangan takut buat eksperimen dan liat contoh-contoh animasi keren di web buat dapet inspirasi!