#animation

Chrome APIsintermediate

CSS @starting-style for entry animations with no JS

.toast {
  display: none;
  opacity: 0;
  translate: 0 12px;
  transition: opacity 0.2s ease, translate 0.2s ease, display 0.2s allow-discrete;

@starting-style supplies the missing before-state so a CSS transition can animate an element's first render — no class-added-next-frame trick, no library.

Chrome APIsintermediate

The View Transitions API for animated state changes

export const swapView = (activeEl: HTMLElement, render: () => void) => {
  if (!document.startViewTransition) {
    render();
    return;
  }

document.startViewTransition animates a DOM update with a browser-computed crossfade or morph — no keyframes, no FLIP technique, no library.