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'

const fadeIn = css.keyframes({
  from: {
    opacity: 0,
  },
  to: {
    opacity: 1,
  },
});

const styles = css.create({
  box: {
    animationName: fadeIn,
    animationDuration: '1s',
    animationTimingFunction: 'ease-in-out',
  },
});

CSS

@keyframes kf-xa1rkjwc {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.box_d54cmr {
  animation-name: kf-xa1rkjwc;
  animation-duration: 1s;
  animation-timing-function: 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