如何将其转换为JSS?

Question

我是JSS的新手，想知道下面的CSS如何转换成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

我想我已经找到了一个答案:他们没有等效的@-webkit-keyframes，因为他们已经在animation的每个版本中编译了它。意义:

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

编译成

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

或者如果你像我一样使用mozilla:

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