It took me a little bit to figure out but it’s actually pretty simple.
I just recently downloaded the 8.0.14 nightly (b2020051802) which has the theme updates so the css file structure is a little different. But same concept applies to earlier versions.
Basically I created a new css file, lets call it “MyCSS.css” and placed it in the IA perspective themes folder
C:\Program Files\Inductive Automation\Ignition\data\modules\com.inductiveautomation.perspective\themes
I put my @keyframes into the new MyCSS.css file.
Since I’m using the ‘light’ theme I made a copy of the existing light.css file and called it MyLight.css. Inside the MyLight.css file I added the line @import "./MyCSS.css"; so that the contents of MyLight now looks like this
@import "./MyCSS.css";
@import "./light/index.css";
Now you just need to tell perspective to use the theme “MyLight”. Change the theme sesseion prop to ‘MyLight’ theme.
Now, since your theme is MyLight it will import the new MyCSS.css file which contains your @keyframes
Now, to run your animation you just need to add a value called ‘animation’ to the object and set the animate to the name of your @keyframe function.
I’ve been playing around with creating a new style class and applying it to objects so I can generate the pseudo elements and animate those. Applying a style class to an object, like a label, generates a unique class name that can be referenced for additional css coding. Seems to be working good so far.
Side note - make sure you backup your css files. When I updated to 8.0.14 all of my css files were removed. Luckily I had backup copies and it wasn’t a big deal but I thought I’d share. I’m hoping that it just did it because of the significant theme changes. Hopefully going forward it will retain new files in the folder. If not I’ll throw out a request.
Hope this helps…