keyframes

export type keyframes = (rule: Keyframes) => string;
export const keyframes: keyframes;

The keyframes() method generates a unique animation variable name (a unique hash that is inlined during build time) that can be used 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; }

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

Usage

On this page