Experimenting with Animate.css in Perspective

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?

#CSS #Animation #Perspective

You're going to have a much easier time with this in 8.1.22:

Final release is planned for next week.

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?

With the stylesheet resource, you can either:

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