`animation-timeline (animații legate de scroll: scroll() și view())` în CSS

Tranziții și Animații Chrome 115, Safari 26 (Firefox: 159, în beta în octombrie 2026)

Leagă progresul unei animații de derularea paginii sau de vizibilitatea unui element, fără JavaScript.

Sintaxă CSS

.bara-progres {
  animation: crestere linear both;
  animation-timeline: scroll(root block);
}

.card {
  animation: aparitie linear both;
  animation-timeline: view();
  animation-range: entry 0% cover 30%;
}

Ce face `animation-timeline (animații legate de scroll: scroll() și view())`

În mod normal o animație avansează în timp (secunde). Cu animation-timeline, progresul ei urmează o cronologie de derulare: scroll() merge de la 0% la 100% pe măsură ce derulezi un container, iar view() urmărește cât de mult a intrat un element în zona vizibilă.

animation-range alege porțiunea din cronologie în care rulează animația, de exemplu entry 0% cover 30%: animația începe când elementul intră pe ecran și se termină când a acoperit 30% din parcurs. Poți da și nume cronologiilor cu scroll-timeline sau view-timeline și le poți folosi pe alte elemente.

Scrie animation-timeline după scurtătura animation: scurtătura o resetează la valoarea implicită. Suport: Chrome 115 și Safari 26; Firefox o aduce în versiunea 159 (în beta la sfârșitul lui octombrie 2026). Folosește @supports (animation-timeline: scroll()) ca pagina să arate bine și fără efect.

Valori uzuale

Valoare	Descriere
`scroll(scroller axă)`	Cronologie după derularea unui container: nearest (implicit), root sau self; axa block, inline, x sau y.
`view(axă inset)`	Cronologie după vizibilitatea elementului în containerul care se derulează.
`animation-range`	Intervalul activ: entry, exit, cover, contain, urmate de procente.
`scroll-timeline: --nume axă`	Dă un nume derulării unui container, pentru a fi folosită de alte elemente.
`view-timeline: --nume axă`	Dă un nume cronologiei de vizibilitate a unui element.

Exemple

Exemplul 1: Bară de progres a lecturii unui articol

Bara de sus se umple pe măsură ce cititorul derulează pagina.

@keyframes crestere {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
.progres-lectura {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: #2563eb;
  transform-origin: left;
  transform: scaleX(0);
}
@supports (animation-timeline: scroll()) {
  .progres-lectura {
    animation: crestere linear both;
    animation-timeline: scroll(root block);
  }
}

Efect vizual în browser

La începutul articolului bara albastră de 4 px din partea de sus nu se vede; la jumătatea paginii acoperă jumătate din lățime, iar la final ocupă tot ecranul. În browserele fără suport, bara rămâne ascunsă.

Exemplul 2: Carduri de produs care apar la intrarea pe ecran

Fiecare card are propria cronologie view(), deci apare când ajunge el în zona vizibilă.

@keyframes aparitie {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}
@supports (animation-timeline: view()) {
  .card-produs {
    animation: aparitie linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 30%;
  }
}