CSS View Timeline is a modern CSS feature that allows you to drive animations based on an element's visibility within its scroll container. Instead of using time (seconds), the animation progress is tied directly to the scroll position. It uses animation-timeline: view() and animation-range to control when the animation starts and ends as the element enters, covers, or exits the viewport.

As of 2024, Chrome 115+ and Edge 115+ fully support animation-timeline: view(). Firefox and Safari are still implementing it. For cross-browser compatibility, use a JavaScript fallback with Intersection Observer. This playground uses JS to simulate the effect so it works in all modern browsers while showing you the correct CSS syntax.

These are the four range types for view-timeline:
entry — The element is entering the viewport (0% = top edge touches bottom of viewport, 100% = fully inside).
exit — The element is leaving the viewport (0% = top edge at top of viewport, 100% = bottom edge leaves).
cover — The element covers the viewport (0% = fully covers, 100% = just contained within).
contain — The element is contained within the viewport (0% = just contained, 100% = top edge at top of viewport).

animation-timeline: view() tracks each element's individual position relative to the viewport, while scroll-timeline tracks the scroll position of a container as a whole. You can use them together by naming a scroll-timeline with scroll-timeline-name and referencing it. View-timeline is perfect for per-element entrance/exit animations without any JavaScript.