CSS Animation Lanjutan dengan Claude Code: Cepat, Aksesibel, Teruji

CSS animation harus punya tujuan

Claude Code bisa membuat fade, slide, atau skeleton loader dalam hitungan detik. Bagian yang sulit adalah membuat animasi itu layak masuk production. Animasi yang baik menjelaskan perubahan, tidak mengganggu membaca, tetap cepat, menghormati pengguna yang memilih reduced motion, dan mudah dirawat di dalam design system.

Artikel ini membahas CSS animation lanjutan dari sisi implementasi. Kita akan membedakan transition dan keyframes, memahami kenapa transform dan opacity biasanya lebih aman, mengenali layout thrash, menerapkan prefers-reduced-motion, membuat scroll-linked dan entrance animation, memakai skeleton state secara wajar, menyimpan nilai motion sebagai design token, meminta Claude Code melakukan review kritis, dan memverifikasi hasilnya dengan Playwright.

Definisi singkat: transition adalah perubahan halus antara dua state, misalnya tombol saat hover. Keyframes adalah timeline dengan tahap seperti 0%, 60%, dan 100%. Layout thrash terjadi saat browser berulang kali menghitung ukuran dan posisi elemen. Motion token adalah nilai bernama seperti --motion-duration-fast untuk menjaga duration, easing, dan distance tetap konsisten.

Untuk konteks tambahan, lihat optimasi performance dengan Claude Code, CSS variables dengan Claude Code, dan accessibility dengan Claude Code.

Pilih transition atau keyframes dengan sadar

Gunakan transition untuk perubahan state sederhana: hover, focus, active, selected, expanded, atau disabled. Gunakan keyframes ketika alur di tengah animasi penting: panel masuk, loading loop, notice bertahap, progress membaca, atau reveal saat scroll.

Aturan ini sebaiknya ditulis langsung di prompt Claude Code. Jika hanya meminta “buat lebih animatif”, CSS yang dihasilkan bisa menggerakkan top, left, height, atau margin. Properti seperti itu dapat memicu perhitungan layout ulang dan membuat UI terasa patah-patah. Instruksi yang lebih baik: transition untuk state interaktif, keyframes untuk timeline, dan prioritaskan transform serta opacity.

:root {
  --motion-duration-fast: 160ms;
  --motion-duration-normal: 280ms;
  --motion-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --motion-distance-sm: 12px;
}

.button {
  transition:
    background-color var(--motion-duration-fast) var(--motion-ease-standard),
    transform var(--motion-duration-fast) var(--motion-ease-standard);
}

.button:hover {
  transform: translateY(-2px);
}

.notice {
  opacity: 0;
  transform: translateY(var(--motion-distance-sm));
  animation: notice-enter var(--motion-duration-normal) var(--motion-ease-standard) forwards;
}

@keyframes notice-enter {
  from {
    opacity: 0;
    transform: translateY(var(--motion-distance-sm));
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

Tombol memakai transition karena merespons state langsung. Notice memakai keyframes karena punya entrance yang dirancang. Untuk referensi resmi, cek MDN CSS animations dan transform.

Performance dimulai dari transform dan opacity

Browser membuat frame melalui layout, paint, dan compositing. Layout menghitung ukuran dan posisi, paint menggambar piksel, compositing menggabungkan layer. transform dan opacity sering bisa diproses di tahap compositing, sehingga biasanya lebih mulus.

Sebaliknya, width, height, margin, top, dan left dapat memengaruhi elemen lain. Jika JavaScript juga membaca ukuran lalu menulis style berulang kali, layout thrash muncul. Pada komponen React, class animasi harus tetap sederhana dan mudah dites.

import type { ReactNode } from "react";
import "./motion.css";

type AnimatedPanelProps = {
  children: ReactNode;
  isOpen: boolean;
};

export function AnimatedPanel({ children, isOpen }: AnimatedPanelProps) {
  return (
    <section
      className={isOpen ? "panel panel-enter" : "panel"}
      aria-hidden={!isOpen}
    >
      {children}
    </section>
  );
}

.panel {
  opacity: 0;
  transform: translateY(12px) scale(0.98);
  pointer-events: none;
}

.panel-enter {
  animation: panel-enter 220ms cubic-bezier(0.2, 0, 0, 1) forwards;
  pointer-events: auto;
}

@keyframes panel-enter {
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

Hati-hati dengan will-change. Properti itu bisa membantu jika dipakai sebentar sebelum animasi, tetapi boros memori jika ditempel di banyak elemen terus-menerus. Panduan web.dev tentang animation performance menjelaskan kenapa pilihan properti lebih penting daripada trik tambahan.

Use case yang realistis

Use case pertama adalah entrance animation untuk daftar kartu, pricing panel, atau modul dashboard. Muncul singkat bisa mengarahkan perhatian. Stagger panjang pada semua kartu hanya menunda pembacaan. Konten tetap harus terlihat jika animasi tidak berjalan.

Use case kedua adalah feedback terkait scroll, seperti progress bar membaca atau section reveal. animation-timeline berguna, tetapi perlu fallback. Jika browser belum mendukung, halaman tetap harus bisa dibaca.

.scroll-progress {
  position: fixed;
  inset: 0 auto auto 0;
  z-index: 20;
  width: 100%;
  height: 3px;
  transform-origin: left;
  transform: scaleX(0);
  background: var(--color-accent, #2563eb);
}

@supports (animation-timeline: scroll()) {
  .scroll-progress {
    animation: progress-grow linear both;
    animation-timeline: scroll();
  }
}

@keyframes progress-grow {
  to {
    transform: scaleX(1);
  }
}

.reveal {
  opacity: 1;
  transform: none;
}

@supports (animation-timeline: view()) {
  .reveal {
    opacity: 0;
    transform: translateY(16px);
    animation: reveal-up 1ms linear both;
    animation-timeline: view();
    animation-range: entry 10% cover 30%;
  }
}

@keyframes reveal-up {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

Use case ketiga adalah skeleton dan loading state. Skeleton mengurangi rasa kosong saat data dimuat, tetapi shimmer yang kuat dan lama membuat pengguna lelah. Untuk proses panjang, tambahkan teks status, retry, atau cancel.

Use case keempat adalah feedback operasional di SaaS: tersimpan, filter diterapkan, item dipindah, atau panel error dibuka. Animasi pendek sudah cukup. Untuk layar kerja yang dipakai berulang-ulang, stabilitas lebih penting daripada efek besar.

Hormati reduced motion dan tahu kapan tidak perlu animasi

prefers-reduced-motion membaca preferensi pengguna untuk mengurangi gerakan. Ini bagian penting dari accessibility. Beberapa pengguna bisa merasa tidak nyaman, pusing, atau sulit fokus dengan motion yang kuat. Referensi resmi MDN untuk prefers-reduced-motion adalah dasar yang baik.

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }

  .scroll-progress {
    animation: none;
    transform: scaleX(1);
  }

  .skeleton {
    animation: none;
    background-image: none;
  }
}

Ada tempat yang sebaiknya tidak dianimasikan: konfirmasi pembayaran, teks legal, error form yang kritis, konten bacaan panjang, tabel data padat, dan menu yang dibuka berkali-kali setiap hari. Pada area itu, kejelasan langsung lebih bernilai.

Jadikan Claude Code reviewer, bukan dekorator

Jangan hanya meminta “tambahkan animasi”. Minta Claude Code memeriksa risiko. Prompt ini bisa langsung dipakai:

Review and improve the CSS animation implementation for this UI.

Requirements:
- Use transition for simple hover/focus/open states.
- Use keyframes only when intermediate timing matters.
- Animate transform and opacity first; avoid top, left, width, height, and margin animations.
- Add design tokens for duration, easing, and distance.
- Respect prefers-reduced-motion.
- Keep content visible when scroll-linked animation is unsupported.
- Do not animate critical form errors, payment confirmation, or long reading content.

Return:
1. Risky selectors and why they are risky.
2. A corrected CSS/React implementation.
3. Manual and Playwright checks to verify overflow and reduced motion.

Dengan prompt seperti ini, Claude Code lebih mudah menemukan layout thrash, loop tanpa akhir, will-change berlebihan, fallback yang hilang, dan preferensi motion yang diabaikan.

Verifikasi dengan Playwright

Bug animasi sering berupa masalah visual. Tambahkan checks untuk overflow horizontal, visibilitas konten, dan perilaku reduced motion.

import { expect, test } from "@playwright/test";

test("animated page has no horizontal overflow", async ({ page }) => {
  await page.goto("/animation-demo");
  const overflow = await page.evaluate(() => {
    return document.documentElement.scrollWidth > window.innerWidth;
  });
  expect(overflow).toBe(false);
});

test("reduced motion keeps content visible", async ({ browser }) => {
  const context = await browser.newContext({ reducedMotion: "reduce" });
  const page = await context.newPage();
  await page.goto("/animation-demo");

  await expect(page.locator(".reveal").first()).toBeVisible();
  await expect(page.locator(".skeleton").first()).toHaveCSS("animation-name", "none");

  await context.close();
});

Untuk UI berisiko tinggi, tambahkan screenshot comparison di desktop dan mobile. Test tidak menggantikan penilaian desain, tetapi dapat menangkap konten tersembunyi, horizontal scroll, dan reduced motion yang tidak dihormati.

Ringkasan dan langkah berikutnya

CSS animation production dimulai dari tujuan. Gunakan transition untuk state sederhana, keyframes untuk timeline, transform dan opacity untuk motion yang lebih mulus, token untuk konsistensi, reduced motion untuk accessibility, dan Playwright untuk guardrail visual. Claude Code bekerja paling baik saat batasan ini ditulis jelas.

Langkah berikutnya: pilih satu daftar kartu atau section CTA yang sudah ada, lalu terapkan token, entrance animation, aturan reduced motion, dan Playwright checks dari artikel ini. Untuk review implementasi yang lebih terstruktur, lihat training dan konsultasi.

Catatan verifikasi langsung: saat motion dibatasi ke transform dan opacity, tidak ada horizontal overflow. Di Playwright dengan reduced motion, konten .reveal tetap terlihat dan skeleton tidak lagi beranimasi. Shimmer panjang terasa membuat loading lebih lambat pada layar operasional, sehingga placeholder statis sering lebih tepat.