Performanță în Animații CSS: Secretele celor 60 FPS

1. Ciclul Critic de Randare (Critical Rendering Path)

Pentru a afișa orice element pe ecran, motoarele moderne de navigare (Chromium, Gecko, WebKit) parcurg succesiv trei etape fundamentale:

1. Layout (Reflow): Browserul calculează geometria exactă (poziția și dimensiunile în pixeli) a fiecărui element din arborele DOM. Această operațiune se execută pe firul principal al procesorului (CPU) și este extrem de costisitoare.
2. Paint (Repaint): Browserul umple pixelii cu text, culori, imagini, borduri și umbre pe straturi bitmap separate.
3. Composite (Compunere): Straturile desenate anterior sunt trimise către procesorul grafic (GPU), care le suprapune și le randează pe monitor.

2. Regula Supremă: Animați doar Transform și Opacity

Proprietățile CSS nu sunt create egale în fața performanței:

3. Cum rescrii o animație slabă într-una accelerată hardware

Să presupunem că vrei să creezi un efect de ridicare a unui card la hover:

Greșit (provoacă Reflow la fiecare cadru):

/* Evita aceasta abordare! */
.card {
  position: relative;
  top: 0;
  transition: top .2s ease;
}
.card:hover {
  top: -8px; /* Forteaza recalcularea intregului layout din jur! */
}

Corect (procesat exclusiv pe GPU):

/* Abordare recomandata de standardele moderne */
.card {
  transition: transform .2s cubic-bezier(.25, .8, .25, 1);
}
.card:hover {
  transform: translate3d(0, -8px, 0); /* Zero reflow! */
}

4. Proprietatea will-change: Când ajută și când dăunează?

Proprietatea will-change: transform; anunță browserul din timp că un element urmează să fie animat, astfel încât acesta să îi aloce un strat compozit dedicat pe GPU înainte de declanșarea interacțiunii.

5. Accesibilitate: Respectarea utilizatorilor sensibili la mișcare

Unii utilizatori suferă de tulburări vestibulare pentru care animațiile rapide pot provoca stări de amețeală. CSS3 oferă o modalitate elegantă de a respecta setările sistemului de operare:

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