CSS - Advance style sheet referencing SVG elements

Hi all,

New to Ignition and new to CSS. I am trying to create some custom "animations" on an SVG. The objective is have a shape (in this instance for testing I'm using a rectangle) fill with a gradient.
I have embed an SVG rectangle with 2 stop points, and I can bind to these points to adjust the offset value between 0 and 1 to play with the gradient.
I am trying to come up with a to "transition" the fill so it does it smooths from a white box to full box with the gradient.

On mouse click and hold, i wanted to transition the offset value from 0.0 to 1.0. Not sure the best way to do this. My first thought was to use CSS on the advance style sheet, but I cant figure out how to reference the offset value or if this is even possible. If i could i could potentially do something with keyframes, not sure how many i would need to use to get a smooth looking transition.

This should show you one way to do it, although doing it on mouse click may be difficult. I would recommend you place the animation in a unique style, and use the clicks event to apply the style dynamically.