Crafting UI

.element {
  animation: progress linear both;
  animation-timeline: scroll(root);
}

.element {
  animation: progress linear both;
  animation-timeline: scroll(); /* nearest */
}

.element {
  animation: reveal linear both;
  animation-timeline: view();
  animation-range: entry 0% exit 100%;
}

h1 {
  animation: ;
  animation-timeline: ;
  animation-range: ;
}

.box-1 {
  view-transition-name: box-1;
}

.box-2 {
  view-transition-name: box-2;
}

.box {
  view-transition-name: match-element;
}

.box {
  view-transition-name: match-element;
}

btn.addEventListener("click", () => {
  document.startViewTransition(() => grid.classList.toggle("col-count"));
});

.box {
  view-transition-name: match-element;
}

btn.addEventListener("click", () => {
  if (document.startViewTransition) {
    document.startViewTransition(() => grid.classList.toggle("col-count"));
  } else {
    grid.classList.toggle("col-count");
  }
});

.box {
  view-transition-name: match-element;
  view-transition-class: boxes;
}

::view-transition-new(boxes) {
  animation: scale-in .5s both;
}

::view-transition-old(boxes) {
  animation: scale-in .5s both reverse;
}

@view-transition {
  navigation: auto;
}

<span>⚓️ Anker</span>

<div>
  <h2>Heading</h2>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe.</p>
</div>

[popover] {
  position-area: top;
}

button {
  position: fixed;
}