TriFrost

TriFrost 0.17.0 - Slipstream

|peterver

News

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. 💃🕺

Loved the read? Share it with others