header
	h2 Scroll until the end 😼
section
	div
	p Scroll a bit back up again to see the animation pause.

* { margin: 0 }

body { font: clamp(.75em, 8vmin, 2em) comic sans ms, cursive }

header, section {
  display: grid;
  place-items: center; 
  height: 100vh
}

section {
  --b: 0;
	background: dimgrey;
  animation: b linear both;
  animation-timeline: view();
  animation-range: entry 100% entry 100%
}

@keyframes b { to { --b: 1 } }

div {
  width: 5em;
  aspect-ratio: 1;
	scale: calc(1 + .25*var(--b));
  background: color-mix(in hsl, hotpink calc(var(--b)*100%), darkorange);
	transition: scale .5s cubic-bezier(.32, 1.75, .68, 1), 
							background-color .65s ease-out;
  animation: rot 2s linear infinite;
	
	@container style(--b: 0) { animation-play-state: paused }
}

@keyframes rot { to { rotate: 1turn } }