On this page

Keyframes

Input

@keyframes is defined in cssx.global.

global.ts

cssx.global({
  '@keyframes fade': {
    from: {
      opacity: 0,
    },
    to: {
      opacity: 1,
    },
  },
  '@keyframes move': {
    '0%': {
      transform: 'translate(0px)'
    },
    '100%': {
      transform: 'translate(100px)'
    },
  },
});

Output

css

@keyframes fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
 
@keyframes move {
  0% {
    transform: translate(0px);
  }
  100% {
    transform: translate(100px);
  }
}

Uses

The created animation can be used with cssx.create, cssx.set, etc.

style.css.ts

const css = cssx.create({
  box: {
    padding: '20px',
    animation: 'move 2s'
  },
  heading: {
    fontSize: 24,
    animation: 'fade 3s infinite'
  }
});