Hello
Is it possible to change style class animation properties like “Duration” by tag binding or scripting?
Specially with different key frame value.
For example instead of hard code opacity value, at @ 100% keyframe in style class sheet I can change it depend on a tag.
No, this isn’t possible. Your style classes are emitted onto the page as a single static stylesheet on initial page load - reloading them dynamically would be a huge performance hit. I do think we need a better way to support dynamic CSS, but it most likely won’t be at the root style class level like this.
What a bout these two methods:
method 1:
1- right clicking on object
2 - select custom css3 option
3 - it open a black page to write user custom css3
The page can reference parameters or tag by {{ }} in css3 code
for example:
@keyframes mymove {
from {top: 0px;}
to {top: {{myTag}};}
}
or
Method 2:
Add a object in in props -> style with reserved “keyframes” key word
keyframes: ‘mymove’
from:
top: 0px
to:
top: 200px
or
keyframes: “mymove { from {top: 0px;} to {top: 200px;}}”
pass setting as JSON string to it then perspective parse it.
It is game changer for us to create superb HMI.
I believe ignition should not make every thing easy for user, the web concept is easy enough for every body. By letting user use directly css3 by himself, both performance and creativity increase and developer team free to make option in platform. Like promise drawing tools.
2 Likes
Hmm, the special handling for keyframes sub-property in styles is interesting…I’ll file a ticket to review that, good thought! 
just leave all css3 details to us to handle (integrator)
1 Like
isn't it a bigger performance hit if he has to make style classes for every option and load the right style class dynamically based on the tagvalue
No, because it’s actually loading the style classes in the first place that’s “slow”. Changing which style class applies to an element is easy, and something web browsers are well optimized for.
i have tried in the custom css for linking the tag
Example like
:root{
--top:{{system.tag.read("tagpath").value}};
}
it is not working and can you share some snaps for the deep understanding
I'm not sure where you got that syntax from, not from this thread, but that certainly won't work. CSS knows nothing about ignition functions.
If you want to do something like this, then you need to bind the tag to a component's style prop to change it, eg to props.style.marginTop
i want to assign the mentioned "top" in the style class but this top is in the ::after so i could not call it in the style class
can you please tell me how can in call the top in the ::after in the style class
I'm 99% sure you can't, but maybe @victordcq knows better than me?
You cant dynamically change styles, except with js. But you shouldnt do this