I've been playing with the Animate.css theme, following this tutorial: Using Animate.css and custom CSS in Perspective - YouTube. I've been able to get some of the animations working by prepending "psc-" to a style class declaration. So if I put "animated bounce" in the style class for a label, it will bounce one time and show up in the HTML as psc-animated psc-bounce. But there are these other options in the _base.css file, such as ".animated.psc-infinite," ".animated.repeat-1," ".animated.faster." I'm thinking these are css variables and I'm not sure how to invoke them from the props style classes of a component in designer. If I could then the animation wouldn't just happen once at page load, but could repeat X number of times, or forever, etc.. Does anyone know how to do this?
Where will the added CSS info live? My understanding was you needed to create a theme folder and add an import to the index.css of light. Do you need to prepend class names with -psc?
Write an arbitrary CSS rule with an appropriate selector to target your component(s). This may or may not be what you want, because it will affect all instances of a particular component (subject to your selector, of course).
Write an arbitrary style class and apply it on your components. To be used in conjunction with the styles declaration on a component, you must prefix with the .psc- selector when defining your rules, yes.
The stylesheet resource is "just" a project resource - it's part of project imports and exports and participates in inheritance, unlike themes, which are global across the entire gateway. It's a middle-ground between standard Style Class editing and full custom theming.