CSS 07B: Transition, Transform, dan Animasi Dasar

Gerakan dapat menunjukkan bahwa tombol sedang aktif atau kartu dapat diklik. Gerakan yang baik bersifat singkat dan memiliki tujuan.

1. Demo Transition, Transform, dan Animation

transition menghaluskan perubahan keadaan. transform dapat memindahkan, memperbesar, atau memutar elemen tanpa mengubah alur dokumen. @keyframes membuat rangkaian animasi seperti indikator pemuat.

Hindari transition: all karena browser dapat menganimasikan property yang tidak Anda inginkan. Untuk interaksi sederhana, durasi sekitar 150–300 milidetik biasanya terasa responsif.

2. Menghormati Preferensi Pengguna

Media query prefers-reduced-motion pada contoh mematikan gerakan ketika pengguna meminta pengurangan animasi melalui sistem operasinya.

Kesalahan yang Sering Terjadi

• Menganimasikan terlalu banyak elemen sekaligus.
• Menggunakan durasi beberapa detik untuk interaksi sederhana.
• Membuat animasi berulang tanpa tujuan.
• Menggerakkan konten penting sehingga sulit dibaca.
• Mengabaikan prefers-reduced-motion.

Latihan

Ubah arah gerak kartu dan kecepatan pemuat. Tambahkan rotate(2deg) pada hover, lalu uji apakah gerakannya masih nyaman.

Ringkasan

transition menghaluskan perubahan, transform mengubah tampilan kotak, dan @keyframes membuat animasi. Gunakan gerakan secara singkat, terarah, dan ramah aksesibilitas.