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?
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.