This patch introduces first-class animation support into the TriFrost styling engine. You can now define, register, and reuse @keyframes using the same ergonomic API as css() — with full support for SSR, media queries, deduplication, and cross-engine reuse via LRU.
Added
- feat: New
css.keyframes()API to define named keyframe animations:
const bounce = css.keyframes({
'0%': { transform: 'scale(1)' },
'50%': { transform: 'scale(1.1)' },
'100%': { transform: 'scale(1)' },
});
const cls = css({
animation: `${bounce} 2s infinite ease-in-out`,
});- feat:
css.keyframes(..., {inject: false})returns a name without injecting — ideal for hydration reuse or SSR pipelines. - feat: Works within responsive blocks:
css({
[css.media.desktop]: {
animation: `${css.keyframes({ ... })} 4s ease`,
}
});With css.keyframes(), TriFrost brings motion into the mix — elegantly, efficiently, and on cue. No drama, just drama-free animations. 💃🕺