css.keyframes

The Plumeria css class method keyframes

Create the @keyframes that define the animation.

Write keyframes and compile

The returned value is an 8-character hash, so you can use it directly in animationName.

TypeScript

import { css } from '@plumeria/core'
 
const fade = css.keyframes({
  from: {
    opacity: 0,
  },
  to: {
    opacity: 1,
  },
});
 
const styles = css.create({
  box: {
    animationName: fade,
    animationDuration: '1s',
  },
});

Edit on GitHub

css.global

css.defineThemeVars

css.keyframes

Write keyframes and compile

On this page