Keyframes IDs are scoped by default in jss 10.0.0+
TL;DR: If you’re using version 10.0.0 or higher of the jss library on the UI project, you now need to add $ in front of the keyframes animation name for it to work. Otherwise, it just won’t work at all!
animation: “$slideAnimation 1s infinite”
After recently upgrading jss library on a project I noticed that the keyframes animation completely stopped working. There were no errors anywhere apart from the warning “<animation name> is not defined” in the browser Dev Tools.
There’s almost no documentation on this as all the tutorials you find online for implementing CSS keyframes animations doesn’t use this syntax. The change log for jss 10.0.0 library only says “[jss] Keyframe IDs are now scoped by default.” The only place where it specifically says to add $ in front of the keyframes animation name in jss 10.0.0+ is this GitHub issue post.
After adding $ in front of the keyframes animation name, the slide animation is detected by the browser successfully and is working again on the UI.
