How do I run this piece for css code through javascript

Question

Thanks for taking out the time to look into this and any help in this regard is appreciated.

I have the following piece of code.

.middle_n.expand.remove
{
 animation: contractm 0.3s forwards;
 transform-origin: 0 75px;
 height:200%;
 animation-delay: 1.3s;
}

@keyframes contractm 
{
 0%{}
 100%{transform:translate(147.8%,100%) rotate(-16.75deg);}
}

I wish to pass a dynamic value to rotate in contractm through javascript. How do I do that. Can multi step animation run through javascript?

Thanks again.

Possible duplicate of How to dynamically create '@-Keyframe' CSS animations? — Mukyuu
– Mukyuu, Commented Mar 18, 2019 at 3:08

Nana Sun · Accepted Answer · 2019-03-18 03:27:55Z

In my opinion, if you want to control your animation rather than just let it animate, my recommendation is that you can use js to control the style of your element. Because animation is to complete a series of animation.

And there is a really powerful css called css variable, you can take more details on https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties.

const rotate=document.getElementById("rotate")
let r=0
rotate.addEventListener("click",()=>{
  r += 10
  rotate.style.setProperty("--rotate", r+"deg");
})

#rotate{
  --rotate:0deg;
  background:pink;
  width:100px;
  height:100px;
  transform:rotate(var(--rotate));
  transition:transform 1s;
}

<p>click the square and then it will rotate.</p>
<div id="rotate"></div>

Of course, if you want a series of animations, you can check it on https://developer.mozilla.org/en-US/docs/Web/CSS/animation. It's easy to set steps in animation.

Collectives™ on Stack Overflow

How do I run this piece for css code through javascript

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related