如何在后面的代码中获取 CSS class 属性

Question

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

Answer 1

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
}

Answer 2

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.