Section ini membahas transitions dan animations sebagai bagian dari Course CSS. Ikuti chapter di dalamnya secara berurutan karena setiap chapter dibangun di atas pemahaman chapter sebelumnya. Gunakan demo interaktif pada setiap halaman untuk melihat langsung efek kode yang sedang dibahas.
Pahami cara transition menganimasikan perubahan dua keadaan dan tentukan properti mana yang bergerak halus.
Buka → # Transition DurationAtur lama gerakan dengan transition-duration: satuan s dan ms, panduan durasi per situasi, dan durasi berbeda untuk tiap properti.
Buka → # Transition Timing FunctionKenali kurva percepatan transition: lima kata kunci bawaan, cubic-bezier kustom termasuk efek pegas, dan kapan masing-masing dipilih.
Buka → # Transition DelayTunda awal transisi dengan transition-delay, dari delay negatif yang memulai dari tengah hingga pola staggered murni CSS.
Buka → # Shorthand TransitionRangkai property, duration, timing-function, dan delay menjadi satu deklarasi transition beserta aturan pembacaan dan resepnya.
Buka → # Transform: Translate, Rotate, ScaleGeser, putar, dan perbesar elemen dengan translate, rotate, dan scale — tiga fungsi inti transform yang menjadi bahan animasi termurah di CSS.
Buka → # Transform OriginAtur titik poros rotasi dan skala dengan transform-origin, dari nilai bawaan tengah elemen hingga efek engsel pada tepi.
Buka → # @keyframesDefinisikan titik-titik perhentian animasi sendiri dengan @keyframes dan jalankan lewat animation, di luar batas dua keadaan transition.
Buka → # Animation PropertiesKendalikan animasi sampai ke detail: pengulangan, arah bolak-balik, penahan keadaan akhir, hingga jeda lewat delapan properti animation.
Buka → # Efek Hover dan FocusRangkai transition, transform, dan animation menjadi empat resep hover dan fokus yang siap dipakai, lengkap dengan pedoman performa animasi.
Buka → # prefers-reduced-motionHormati preferensi pengguna dengan prefers-reduced-motion: pola global, penyaringan gerakan yang terarah, dan prinsip gerakan sebagai pelengkap.
Buka →