On this page

keyframes

@keyframes can be 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)'
    },
  },
});

Uses

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

Something.tsx

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