How to get a CSS class property in code behind-CodePudding

I’ve a css value that I need to call from code behind. Can someone help me with that?

.shape .bar .progress { position: absolute}

.shape .pro { animation: left 4s}

@keyframes left {100%{ transform: rotate(180deg);}}

I can call the .shape.pro by shape1.attributes.add(“class”, “pro”)

Now, I want to call @keyframes so that I can change the rotate value in code behind.. how to do that?

Thanks

CodePudding user response：

You're not supposed to access a @keyframe property.

If you just want to change your angle from 0 to 180, you don't even need keyframe.

Just :

.shape .pro { 
  transform: rotate(180deg)
}

Then for transition effect, add this to your .shape class :

.shape {
  transform: rotate(0);
  transition: transform 4s
}

CodePudding user response：

Yes you can change something in the keyframes from Javascript if you use CSS variables rather than a specific value.

So in your CSS you write:

@keyframes left {100%{ transform: rotate(var(--degrees));}}

And in your Javascript you can set the variable to whatver you want: For example:

element.style.setProperty('--degrees', n   'deg');

where element is whichever element has that animation and n is the number of degrees.