Lecția 1, Cele 4 proprietăți transform de memorat

Transforms rulează pe GPU. Nu declanșează niciodată layout. Sunt cea mai ieftină mișcare din browser.

Lecția 2, Easing-ul, secretul mișcării profesioniste

Un easing greșit transformă o animație frumoasă într-una ieftină. Pe astea patru le folosești în 95% din cazuri,

• ease-out (implicit), pentru lucruri care intră. Rapid la început, lent la final. Se simte primitor.

• ease-in, pentru lucruri care ies. Lent la început, rapid la final. Se simte definitiv.

• cubic-bezier(0.32, 0.72, 0, 1), easing-ul 'snap'. UI-urile moderne (Linear, Vercel, Apple) îl folosesc.

• cubic-bezier(0.5, 1.5, 0.5, 1), un bounce jucăuș cu overshoot.

Lecția 3, Keyframes care nu se simt ieftine

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-up { animation: fadeUp 700ms cubic-bezier(0.32, 0.72, 0, 1) both; }
.fade-up.delay-1 { animation-delay: 100ms; }
.fade-up.delay-2 { animation-delay: 200ms; }
.fade-up.delay-3 { animation-delay: 300ms; }

Adaugi în CSS o singură dată. Aplici clasa cu delay-uri în stagger. Ai un reveal de nivel Linear.

Lecția 4, Tranziții Tailwind care nu arată a Tailwind

<button class="
  transition-all duration-300 ease-snap
  hover:-translate-y-0.5
  hover:shadow-lg hover:shadow-accent/30
  active:scale-[0.98]
  rounded-2xl px-6 py-3 bg-accent text-white
">Press me</button>

Trei reguli de reținut pe veci: fă tranziția pe transform și shadow, niciodată pe proprietăți de layout (width, height, padding). Easing snap pentru intrări. O micșorare minusculă la active, pentru senzația tactilă.

Lecția 5, Animații conduse de scroll (acum CSS le face nativ)

În 2024 browserele au livrat animațiile CSS conduse de scroll. Acum poți derula o animație CSS de-a lungul barei de scroll cu zero JavaScript.

.progress {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, #8b5cf6, #06b6d4);
  transform-origin: left;
  animation: progress linear;
  animation-timeline: scroll(root);
}
@keyframes progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }

E o singură regulă. Zero librării. Merge în Chrome și Edge. În rest, degradează elegant.

Lecția 6, Reduced motion, linia de accesibilitate pe care trebuie s-o ții

Unii utilizatori se simt rău din cauza animației. Respectă mereu prefers-reduced-motion.

@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;
  }
}

🎯 Pachet de quest-uri Nivel 1