Try โ€‚โ€‰HackMD

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

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More โ†’
style definitations are closest to raw css

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More โ†’
$ 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; }

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More โ†’
No $ syntax

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More โ†’
keyframes definition is different from raw css (less intuitive than option 1)
Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More โ†’
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; }

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More โ†’
dedicated prop to define keyframes. can avoid typing @keyframes

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More โ†’
$ syntax to reference animation names
Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More โ†’
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; }

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More โ†’
No $ syntax

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More โ†’
Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More โ†’
dedicated interface for defining only animation styles

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More โ†’
stand alone implementaion apart from makeStyles: cannot mix animation css with other arbitrary css
Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More โ†’
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, })

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More โ†’
No $ syntax

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More โ†’
Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More โ†’
more api surface to use/learn, however, less proprietary

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More โ†’
registering keyframes at file scope