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

You could create a new stylesheet with the animation you want in it. For Example:

function addAnimation(keyframe){
     var ss=document.createElement('style');
     ss.innerText=keyframe;
     document.head.appendChild(ss);
}

This would create a new stylesheet with your animation.
This method has only been tested in Chrome.