keyframes

Define CSS animations in JavaScript with full type safety.
The keyframes() method generates a unique animation name (an 8-character hash) that can be used directly in styles.

📽️ Example

TypeScript

import { css } from '@plumeria/core'
 
// Define animation using keyframes
const fadeIn = css.keyframes({
  from: {
    opacity: 0,
  },
  to: {
    opacity: 1,
  },
});
 
const styles = css.create({
  box: {
    animationName: fadeIn,
    animationDuration: '1s',
    animationTimingFunction: 'ease-in-out',
  },
});

Advanced usage

You can also trigger animations on hover or using other pseudo selectors:

const styles = css.create({
  card: {
    transition: 'transform 0.3s ease',
    ':hover': {
      animationName: fadeIn,
      animationDuration: '0.5s',
    },
  },
});

keyframes

📽️ Example

Advanced usage

On this page