Üç alət: CSS, Web Animations API, GSAP

Brauzerdə animasiya üçün üç əsas yol var.

  • CSS (transition, @keyframes) - hover, açılış və sadə effektlər. Kod azdır, brauzer özü optimallaşdırır.
  • Web Animations API (element.animate()) - CSS-in imkanları, amma JS-dən idarə olunur: pause(), reverse(), finished.
  • GSAP - mürəkkəb ardıcıllıqlar, timeline, ScrollTrigger, dəqiq idarəetmə, brauzerlər arası eyni davranış.

Çox vaxt GSAP lazım olmur. Düymənin hover effekti üçün CSS kifayətdir; kitabxananı yalnız ardıcıllıq və scroll səhnəsi lazım olanda əlavə edin.

AlətGüclü tərəfMəhdudiyyət
CSSSadə, kodsuz, brauzer optimallaşdırırMürəkkəb ardıcıllıq və idarəetmə çətindir
animate()JS idarəsi, finished, reverseTimeline və scroll səhnəsi yoxdur
GSAPtimeline, ScrollTrigger, stagger, dəqiqlikƏlavə asılılıq, bundle ölçüsü

CSS animasiyaları

transition iki vəziyyət arasındakı keçiddir (məsələn, hover). @keyframes isə çoxaddımlı animasiyanı təsvir edir və animation ilə qoşulur. Aşağıdakı kodun sonunda prefers-reduced-motion bloku var: onu bütün layihədə bir dəfə yazmaq faydalıdır.

css
.card {
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.card:hover {
  transform: translateY(-4px);
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}
.hero {
  animation: fade-up 0.6s ease-out both;
}

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

💡 animation xassəsində both dəyəri başlamazdan əvvəl ilk, bitəndən sonra son kadrı saxlayır.

Web Animations API

element.animate(keyframes, options) CSS animasiyası kimi işləyir, amma Animation obyekti qaytarır. Onunla animasiyanı dayandırmaq, sürətini dəyişmək, geri oynatmaq və bitməsini finished promise-i ilə gözləmək olar.

javascript
const box = document.querySelector('.box');