How does this convert into JSS?

Question

I'm new to JSS and was wondering how the CSS below converts into JSS

.spinnerContainer {

  animation: spin 1s ease-in-out infinite;
  -webkit-animation: spin 1s ease-in-out infinite;
  @keyframes spin {
    to {
      -webkit-transform: rotate(360deg);
    }
  }
  @-webkit-keyframes spin {
    to {
      -webkit-transform: rotate(360deg);
    }
  }

}

Answer 1

I think i've found an answer: they don't have an equivalent to @-webkit-keyframes because they compile it in every version of animation already. Meaning this:

export const spinnerStyles = createUseStyles({
  spinnerContainer: {
    // other styles
    animation: '$spin 1s ease-in-out infinite',
  },
  '@keyframes spin': {
    to: {
      '-webkit-transform': 'rotate(360deg)'
    }
  }
});

compiles into

.spinnerStyles {
  animation: spin 1s ease-in-out infinite;
}

@-webkit-keyframes spin {
  to {
    -webkit-transform: rotate(360deg);
  }
}

or if you're on mozilla like i am:

.spinnerStyles {
  animation: spin 1s ease-in-out infinite;
}

@-moz-keyframes spin {
  to {
    -webkit-transform: rotate(360deg);
  }
}