# Experimenting with Animate.css in Perspective **URL:** \ **Category:** Ignition\ **Tags:** perspective\ **Created:** [October 28, 2022, 2:13pm UTC](https://forum.inductiveautomation.com/t/experimenting-with-animate-css-in-perspective/65813 "2022-10-28T14:13:48Z")\ **Posts on this page:** 4\ **Page:** 1
**Author:** ![tcrucet](https://avatars.discourse-cdn.com/v4/letter/t/76d3ee/32.png) [@tcrucet](https://forum.inductiveautomation.com/u/tcrucet)\ **Post date:** [October 28, 2022, 2:13pm UTC](https://forum.inductiveautomation.com/t/experimenting-with-animate-css-in-perspective/65813/1 "2022-10-28T14:13:48Z")
I've been playing with the Animate.css theme, following this tutorial: [Using Animate.css and custom CSS in Perspective - YouTube](https://www.youtube.com/watch?v=PRiJdjYrowk). 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 ---
**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\ **Post date:** [October 28, 2022, 3:43pm UTC](https://forum.inductiveautomation.com/t/experimenting-with-animate-css-in-perspective/65813/2 "2022-10-28T15:43:01Z")
You're going to have a much easier time with this in 8.1.22: > [@New Stylesheet resource](https://forum.inductiveautomation.com/t/new-stylesheet-resource/64787): > > Starting with the 10/4/2022 Nightly (8.1.22) build, users will be able to modify a new styling resource: stylesheet.css This new resource is considered an advanced feature and will not be in place by default. To place the resource, expand the Perspective node of the Project Browser, right-click the Styles node, and select "Enable Advanced Stylesheet". [EnableStylesheet] Once in place, the stylesheet allows for inserting CSS just as you would in any normal CSS file. The rules defined in this r… Final release is planned for next week. ---
**Author:** ![tcrucet](https://avatars.discourse-cdn.com/v4/letter/t/76d3ee/32.png) [@tcrucet](https://forum.inductiveautomation.com/u/tcrucet)\ **Post date:** [October 28, 2022, 6:04pm UTC](https://forum.inductiveautomation.com/t/experimenting-with-animate-css-in-perspective/65813/3 "2022-10-28T18:04:12Z")
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? ---
**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\ **Post date:** [October 28, 2022, 9:13pm UTC](https://forum.inductiveautomation.com/t/experimenting-with-animate-css-in-perspective/65813/4 "2022-10-28T21:13:04Z")
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.