Animation

.btn {
  transition:
    background-color 150ms ease-out,
    scale 100ms ease-out;
}
.btn:hover { background-color: var(--brand-hover); }
.btn:active { scale: 0.97; }

<style>
  .btn { padding: 10px 16px; border: 0; border-radius: 6px;
    font: inherit; color: var(--bg);
    background-color: var(--graph-0);
    transition:
      background-color 150ms ease-out,
      translate 200ms ease-out,
      scale 100ms ease-out; }
  .btn:hover { background-color: var(--graph-3);
    translate: 0 -3px; }
  .btn:active { scale: 0.97; }
</style>
<button class="btn">Hover, then press</button>

.toast {
  opacity: 1;
  translate: 0 0;
  transition:
    opacity 200ms ease-out,
    translate 200ms ease-out;
 
  @starting-style {
    opacity: 0;
    translate: 0 1rem;
  }
}

<style>
  .zone { height: 96px; padding: 10px; border-radius: 6px;
    border: 1px dashed var(--muted); }
  .toast { display: none; width: fit-content;
    margin-top: 8px; padding: 8px 12px; border-radius: 6px;
    background: var(--graph-2); color: var(--bg);
    opacity: 0; translate: 0 12px;
    transition: opacity 250ms ease-out,
      translate 250ms ease-out,
      display 250ms allow-discrete; }
  .zone:hover .toast {
    display: block; opacity: 1; translate: 0 0;
    @starting-style { opacity: 0; translate: 0 12px; }
  }
</style>
<div class="zone">Hover here: display goes from none to block
  <div class="toast">Saved</div>
</div>

:root { interpolate-size: allow-keywords; }  /* Chromium */
 
details::details-content {
  block-size: 0;
  overflow: clip;
  transition:
    block-size 250ms ease-out,
    content-visibility 250ms allow-discrete;
}
details[open]::details-content { block-size: auto; }

.collapse { display: grid; grid-template-rows: 0fr; }
.collapse.open { grid-template-rows: 1fr; }
.collapse > .inner { overflow: hidden; }
.collapse { transition: grid-template-rows 250ms ease-out; }

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
@keyframes slide-in {
  from { translate: -100% 0; }   /* "to" = current style */
}
 
.skeleton { animation: pulse 1.5s ease-in-out infinite; }
.drawer { animation: slide-in 300ms cubic-bezier(.2,0,0,1); }

<style>
  @keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
  }
  @keyframes spin { to { rotate: 1turn; } }
 
  .row { display: flex; gap: 14px; align-items: center; }
  .spinner { flex: none; width: 32px; height: 32px;
    border-radius: 50%; border: 4px solid var(--chip);
    border-top-color: var(--graph-0);
    animation: spin 0.8s linear infinite; }
  .lines { flex: 1; display: grid; gap: 8px; }
  .lines i { height: 12px; border-radius: 6px;
    background: var(--chip);
    animation: pulse 1.5s ease-in-out infinite; }
  .lines i:last-child { width: 60%; }
</style>
<div class="row">
  <div class="spinner"></div>
  <div class="lines"><i></i><i></i><i></i></div>
</div>

<style>
  .lane { container-type: inline-size; position: relative;
    height: 26px; margin-bottom: 6px; padding-left: 80px;
    border-radius: 4px; background: var(--chip);
    font: 11px/26px monospace; text-indent: -72px; }
  .lane i { position: absolute; top: 3px; left: 80px;
    width: 20px; height: 20px; border-radius: 4px;
    background: var(--graph-0); }
  @media (prefers-reduced-motion: no-preference) {
    .lane i { animation: go 1.6s var(--e) infinite
      alternate; }
  }
  /* stop 30px short of the end to leave room to overshoot */
  @keyframes go { to { translate: calc(100cqi - 50px); } }
</style>
<div class="lane" style="--e: linear">linear<i></i></div>
<div class="lane" style="--e: ease">ease<i></i></div>
<div class="lane" style="--e: ease-in">ease-in<i></i></div>
<div class="lane" style="--e: ease-out">ease-out<i></i></div>
<div class="lane" style="--e: cubic-bezier(.34,1.56,.64,1)">
  back-out<i></i></div>

:root {
  /* spring: damping ratio 0.6, settles in about 700ms */
  --ease-spring: linear(
    0, 0.145, 0.436, 0.721, 0.93, 1.048, 1.092, 1.089,
    1.065, 1.036, 1.013, 0.999, 0.992, 0.991, 0.993,
    0.996, 1
  );
  --ease-out: cubic-bezier(0.2, 0, 0, 1);
  --ease-in: cubic-bezier(0.3, 0, 1, 1);
}
.sheet { transition: translate 700ms var(--ease-spring); }

@keyframes grow { from { scale: 0 1; } }
 
.progress {
  position: fixed;
  inset: 0 0 auto;
  block-size: 4px;
  transform-origin: left;
  background: var(--brand);
  animation: grow linear both;   /* shorthand first */
  animation-timeline: scroll(root);
}

<style>
  @keyframes grow { from { scale: 0 1; } to { scale: 1; } }
 
  .box { height: 146px; overflow-y: auto;
    border: 1px solid var(--muted); border-radius: 4px; }
  .bar { position: sticky; top: 0; height: 6px;
    background: var(--graph-0); transform-origin: left;
    scale: 0 1; }
  @supports (animation-timeline: scroll()) {
    .bar { animation: grow linear both;
      animation-timeline: scroll(); }
  }
  .text { height: 520px; padding: 12px; }
</style>
<div class="box">
  <div class="bar"></div>
  <div class="text">Scroll this box: the bar tracks it.</div>
</div>

::view-transition
└─ ::view-transition-group(name)       size and position morph
   └─ ::view-transition-image-pair(name)
      ├─ ::view-transition-old(name)   snapshot, fades out
      └─ ::view-transition-new(name)   live, fades in

.card { view-transition-name: var(--vt, none); }
::view-transition-group(*) {
  animation-duration: 300ms;
  animation-timing-function: cubic-bezier(0.2, 0, 0, 1);
}
::view-transition { pointer-events: none; }
 
/* cross-document */
@view-transition { navigation: auto; types: slide; }

declare const el: HTMLElement;
 
const anim = el.animate(
  [{ opacity: 0, translate: "0 8px" }, { opacity: 1 }],
  { duration: 200, easing: "ease-out", fill: "backwards" },
);
await anim.finished;
anim.reverse();                     // play it backwards
el.getAnimations().forEach((a) => a.cancel());

"use client";
import { AnimatePresence, motion } from "motion/react";
 
type ToastProps = { open: boolean; text: string };
 
export function Toast(props: ToastProps) {
  return (
    <AnimatePresence>
      {props.open && (
        <motion.div
          key="toast"
          role="status"
          initial={{ opacity: 0, y: 16 }}
          animate={{ opacity: 1, y: 0 }}
          exit={{ opacity: 0, y: 8 }}
          transition={{ type: "spring", bounce: 0.2,
            visualDuration: 0.3 }}
        >
          {props.text}
        </motion.div>
      )}
    </AnimatePresence>
  );
}

import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
 
gsap.registerPlugin(ScrollTrigger);
 
const mm = gsap.matchMedia();
mm.add("(prefers-reduced-motion: no-preference)", () => {
  gsap.from(".feature", {
    y: 40,
    opacity: 0,
    stagger: 0.08,
    ease: "power2.out",
    scrollTrigger: {
      trigger: ".features",
      start: "top 75%",
    },
  });
});

<svg viewBox="0 0 24 24" class="check">
  <path pathLength="1" d="M4 12l5 5L20 6" />
</svg>

.check path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 300ms ease-out;
}
.done .check path { stroke-dashoffset: 0; }

/* opt in: motion only when reduce isn't requested */
@media (prefers-reduced-motion: no-preference) {
  .hero { animation: float 6s ease-in-out infinite; }
  html { scroll-behavior: smooth; }
}

const query = "(prefers-reduced-motion: reduce)";
const reduce = matchMedia(query);
export const prefersReduced = (): boolean => reduce.matches;
reduce.addEventListener("change", (e) => {
  document.documentElement.dataset.motion = e.matches
    ? "reduce"
    : "full";
});

.enter {
  transition:
    opacity 250ms cubic-bezier(0.2, 0, 0, 1),
    translate 250ms cubic-bezier(0.2, 0, 0, 1);
 
  @starting-style {
    opacity: 0;
    translate: 0 0.75rem;
  }
}
/* stagger: set --i inline, or use sibling-index() */
.list > .enter {
  transition-delay: calc(var(--i, 0) * 40ms);
}

<style>
  .enter {
    transition:
      opacity 250ms cubic-bezier(0.2, 0, 0, 1),
      translate 250ms cubic-bezier(0.2, 0, 0, 1);
    @starting-style { opacity: 0; translate: 0 0.75rem; }
  }
  .list > .enter {
    transition-delay: calc(var(--i, 0) * 40ms);
  }
 
  .list { height: 146px; padding: 8px; border-radius: 6px;
    border: 1px dashed var(--muted); }
  .list > .enter { display: none; margin-top: 6px;
    padding: 4px 8px; border-radius: 4px;
    background: var(--chip); }
  .list:hover > .enter { display: block; }
</style>
<div class="list">Hover to insert the items
  <div class="enter" style="--i: 0">One</div>
  <div class="enter" style="--i: 1">Two</div>
  <div class="enter" style="--i: 2">Three</div>
</div>

dialog {
  opacity: 0;
  scale: 0.96;
  transition:
    opacity 200ms ease-out,
    scale 200ms ease-out,
    overlay 200ms allow-discrete,
    display 200ms allow-discrete;
}
dialog[open] { opacity: 1; scale: 1; }
@starting-style {
  dialog[open] { opacity: 0; scale: 0.96; }
}
 
dialog::backdrop {
  background: oklch(0% 0 0 / 0);
  transition:
    background 200ms,
    overlay 200ms allow-discrete,
    display 200ms allow-discrete;
}
dialog[open]::backdrop { background: oklch(0% 0 0 / 40%); }
@starting-style {
  dialog[open]::backdrop { background: oklch(0% 0 0 / 0); }
}

@keyframes progress {
  from { scale: 0 1; }
  to { scale: 1 1; }
}
 
.read-progress {
  position: fixed;
  inset: 0 0 auto;
  z-index: 10;
  block-size: 3px;
  background: var(--brand);
  transform-origin: 0 50%;
  animation: progress linear both;
  animation-timeline: scroll(root block);
}
@supports not (animation-timeline: scroll()) {
  .read-progress { display: none; }
}

@keyframes reveal {
  from { opacity: 0; translate: 0 2rem; }
}
 
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .reveal {
      animation: reveal linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 30%;
    }
  }
}

import { ViewTransition } from "react";
import Link from "next/link";
 
const slide = {
  "nav-forward": "slide-left",
  "nav-back": "slide-right",
  default: "none",
};
 
export default function Page() {
  return (
    <ViewTransition
      enter={slide}
      exit={slide}
      default="none"
    >
      <Link
        href="/posts/1"
        transitionTypes={["nav-forward"]}
      >
        First post
      </Link>
    </ViewTransition>
  );
}

export async function withTransition(
  update: () => void | Promise<void>,
  types: string[] = [],
): Promise<void> {
  const q = "(prefers-reduced-motion: reduce)";
  const unsupported = !("startViewTransition" in document);
  if (unsupported || matchMedia(q).matches) {
    await update();
    return;
  }
  const vt = document.startViewTransition({ update, types });
  await vt.finished;
}

:root {
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}
@supports (transition-timing-function: linear(0, 1)) {
  :root {
    --spring: linear(0, 0.145, 0.436, 0.721, 0.93, 1.048,
      1.092, 1.089, 1.065, 1.036, 1.013, 0.999, 0.992,
      0.991, 0.993, 0.996, 1);
  }
}
.switch-thumb { transition: translate 700ms var(--spring); }

<style>
  :root {
    --spring: linear(0, 0.145, 0.436, 0.721, 0.93, 1.048,
      1.092, 1.089, 1.065, 1.036, 1.013, 0.999, 0.992,
      0.991, 0.993, 0.996, 1);
  }
  .track { width: 240px; height: 28px; padding: 2px;
    margin-bottom: 10px; border-radius: 14px;
    background: var(--chip); }
  .thumb { width: 24px; height: 24px; border-radius: 50%;
    background: var(--graph-3);
    transition: translate 700ms var(--spring); }
  .plain .thumb { background: var(--muted);
    transition-timing-function: ease-out; }
  body:hover .thumb { translate: 212px 0; }
</style>
<div class="track"><div class="thumb"></div></div>
<div class="track plain"><div class="thumb"></div></div>

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

export function flip(
  items: HTMLElement[],
  mutate: () => void,
): void {
  const first = new Map(
    items.map((el) => [el, el.getBoundingClientRect()]),
  );
  mutate();                                     // Last
  for (const el of items) {
    const a = first.get(el);
    if (!a || !el.isConnected) continue;
    const b = el.getBoundingClientRect();
    const dx = a.left - b.left;                 // Invert
    const dy = a.top - b.top;
    if (dx === 0 && dy === 0) continue;
    el.animate(                                 // Play
      [
        { translate: `${dx}px ${dy}px` },
        { translate: "0 0" },
      ],
      { duration: 300, easing: "cubic-bezier(.2,0,0,1)" },
    );
  }
}