makeStyles (animation/keyframes)

Option 1

const useStyles = makeStyles({
  '@keyframes testAnimation': {
    from: { opacity: 0 },
    to: { opacity: 1 },
  },
  root: {
    animation: '$testAnimation 5s infinite',
  },

  '@keyframes testAnimation2': {
    from: { opacity: 1 },
    to: { opacity: 0 },
  },
  foo: {
    animation: '$testAnimation2 5s infinite',
  },
}); 

css

@keyframes css-0 {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes css-1 {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

.root-2 {
  animation: css-0 5s infinite;
}

.foo-3 {
  animation: css-1 5s infinite;
}

style definitations are closest to raw css

$ syntax to reference animation names

Option 2

const useStyles = makeStyles({
  root: {
    animationName: [{
      from: { opacity: 0 },
      to: { opacity: 1 },
    }],
    animationDuration: '5s',
    animationTimingFunction: 'infinite',
  },
  foo: {
    animationName: [{
      from: { opacity: 1 },
      to: { opacity: 0 },
    }],
    animationDuration: '5s',
    animationTimingFunction: 'infinite',
  },
}); 

css

@keyframes css-0 {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes css-1 {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

.root-2 {
  animation: css-0 5s infinite;
  backgroundColor: 'red'
}

.foo-3 {
  animation: css-1 5s infinite;
}

No $ syntax

keyframes definition is different from raw css (less intuitive than option 1)
can't define animation css prop. have to split to anmiationName, animationDuration, animationTimingFunction, etc.

Option 3

const useStyles = makeStyles([
  // keyframes
  {
    testAnimation: {
      from: { opacity: 0 },
      to: { opacity: 1 },
    },
    testAnimation2: {
      from: { opacity: 1 },
      to: { opacity: 0 },
    },
  },
  
  // styles
  {
    root: {
      animation: '$testAnimation 5s infinite',
    },
    foo: {
      animation: '$testAnimation2 5s infinite',
    },
  },
]);

css

@keyframes css-0 {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes css-1 {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

.root-2 {
  animation: css-0 5s infinite;
}

.foo-3 {
  animation: css-1 5s infinite;
}

dedicated prop to define keyframes. can avoid typing @keyframes

$ syntax to reference animation names
keyframes definition is different from raw css (less intuitive than option 1)

Option 4

const useStyles = makeAnimations({
  root: {
    keyframes: [{
      from: { opacity: 0 },
      to: { opacity: 1 },
    }],
    duration: '5s',
    timingFunction: 'infinite',
  },
  foo: {
    keyframes: [{
      from: { opacity: 1 },
      to: { opacity: 0 },
    }],
    duration: '5s',
    timingFunction: 'infinite',
  },
});

css

@keyframes css-0 {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes css-1 {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

.root-2 {
  animation-name: css-0;
  animation-duration: 5s;
  animation-timing-function: infinite;
}

.foo-3 {
  animation-name: css-1;
  animation-duration: 5s;
  animation-timing-function: infinite;
}

No $ syntax

dedicated interface for defining only animation styles

stand alone implementaion apart from makeStyles: cannot mix animation css with other arbitrary css
keyframes definition is quite different from raw css

Option 5

// theme.ts
export const fadeOut = createKeyframes([{
  from: { opacity: 1 },
  to: { opacity: 0 },
}])

// partner's app code if they want...
const userFadeIn = {
  animationName: fadeOut,
  transitionDuration: '5s',
  transitionTimingFunction: 'infinite',
}

// component.ts
import { userFadeIn } from './animations'
const useStyles = makeStyles({
  ...userFadeIn,
})

No $ syntax

more api surface to use/learn, however, less proprietary

registering keyframes at file scope