Scroll-driven

Reveal on enter

…

animation-timeline: view() koppelt die Animation an die Sichtbarkeit des Elements im Scrollport. animation-range definiert wann sie beginnt und endet.

Erstes Element

Zweites Element

Drittes Element

Viertes Element

Fünftes Element

Sechstes Element

@keyframes reveal{ from{opacity:0;transform:translateY(40px)} to{opacity:1;transform:translateY(0)} }

.item{
  animation: reveal 1ms linear both;   /* 1ms wegen Firefox-Quirk */
  animation-timeline: view();
  animation-range: entry 10% cover 40%;
}

Fallstrick: view() misst die Layout-Box — nicht das Transform. Wer das Element per translate versetzt, ändert nichts an der Range.