easing is everything

use different CSS timing functions per axis for motion paths 👨‍🍳

.p {
animation: x .8s var(--x-time), y .8s var(--y-time);
animation-composition: accumulate; 👈
}
@​keyframes x { to { translate: var(--x) 0 }
@​keyframes y { to { translate: 0 var(--y) }

#CSS sibling-index() and sibling-count()
available Chrome Canary with experiments enabled!

easily stagger effects like:
`transition-delay: calc(sibling-index() * .1s);`

more info and a Codepen to fork
⤷ nerdy.dev/sibling-index

want 3D perspective in your view transitions?

nerdy.dev/view-transit...

<table> highlighting with CSS :has() 💡

td:has(~ td:hover), /* previous sibling cells */
table:has(td:nth-of-type(3):hover) /* column cells */
tr:not(:first-of-type):has(~ tr:hover)
td:nth-of-type(3) {
background: var(--highlighted);
}