How to dynamically create '@-Keyframe' CSS animations?

Question

I have a requirement to rotate a div and stop at a particular position ( The value will be received from the server).

I tried native JS to rotate and stop but it is

Answer 1

Let me share an updated (2019) answer to this.

Yes, it's possible without Javascript using CSS Variables (supported by all modern browsers).

--lightScaleStart: 0.8;

.light {
    animation: grow 2s alternate infinite ease-in-out;
}

.light.yellow {
    --lightScaleEnd: 1.1;
}

.light.red {
    --lightScaleEnd: 1.2;
}

@keyframes grow {
  from {
    transform: scale(var(--lightScaleStart));
  }
  to {
    transform: scale(var(--lightScaleEnd));
  }
}

See demo on Codepen Dynamic CSS Animations with CSS Variables

Edit: Here's a CSS Tricks article about it too.