Transisi dan animasi yang terukur membuat perubahan state nyaman diikuti pengguna. Section ini membahas transition dan keyframes, properti yang aman dianimasikan, kaitannya dengan transform untuk performa, serta aksesibilitas gerakan.

# Transition Properties

Pelajari empat properti penyusun transisi CSS beserta shorthand transition dan daftar properti yang dapat dianimasikan.

Buka → # Transition Timing

Kenali kurva timing function bawaan, cubic-bezier(), dan steps() untuk mengatur ritme transisi sesuai konteks.

Buka → # Transform

Geser, putar, perbesar, dan miringkan elemen dengan transform, pahami hasil matrix computed, dan urutan fungsi yang menentukan hasil.

Buka → # Keyframe Animations

Gambarkan perjalanan animasi bertahap dengan @keyframes, mulai dari from/to hingga pemberhentian persen yang lebih kaya.

Buka → # Animation Properties

Kuasai delapan properti longhand animation beserta urutan nilai shorthand dan cara menghentikan serta mengisi animasi.

Buka → # Animation Performance

Pahami alur render browser, pilih properti murah seperti transform dan opacity, dan gunakan will-change secara hemat.

Buka → # Motion Accessibility

Hormati preferensi gerak pengguna dengan prefers-reduced-motion dan kenali @starting-style untuk kemunculan halus.

Buka → # Interaction Feedback

Terapkan pola umpan balik interaksi: tombol hover-active-focus, skeleton loading, toast dengan @starting-style, dan form.

Buka →