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 * as 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-x34h9adh {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.xhc714s1:not(#\#) { animation-name: kf-x34h9adh; }
.xdm4omap:not(#\#) { animation-duration: 1s; }
.xvct32ng:not(#\#) { 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