# 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;
}

:+1: style definitations are closest to raw css

:-1: `$` 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;
}

:+1: No `$` syntax

:-1: keyframes definition is different from raw css (less intuitive than option 1)
:-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;
}

:+1: dedicated prop to define keyframes. can avoid typing `@keyframes`

:-1: `$` syntax to reference animation names
:-1: 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;
}

:+1: No `$` syntax

:+1: :-1: dedicated interface for defining only animation styles

:-1: stand alone implementaion apart from `makeStyles`: cannot mix animation css with other arbitrary css
:-1: 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,
})

:+1: No `$` syntax

:-1: :+1: more api surface to use/learn, however, less proprietary

:-1: registering keyframes at file scope