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 eating up my CPU big time.

I can rotate with CSS animation but I need to create a class which will dynamically describe where to stop the animation. Something like

@-webkit-keyframes spinIt {     100% {         -webkit-transform: rotate(A_DYNAMIC_VALUE);     } } @-moz-keyframes spinIt {     100% {         -webkit-transform: rotate(A_DYNAMIC_VALUE);     } } 

Here is one reference

http://jsfiddle.net/bVkwH/8/

Thanks in Advance

Answer 1

You can insert stylesheet rules dynamically to override previous styles in the head. This helps avoid adding yet another library for a single task.

var style = document.createElement('style'); style.type = 'text/css'; var keyFrames = '\ @-webkit-keyframes spinIt {\     100% {\         -webkit-transform: rotate(A_DYNAMIC_VALUE);\     }\ }\ @-moz-keyframes spinIt {\     100% {\         -webkit-transform: rotate(A_DYNAMIC_VALUE);\     }\ }'; style.innerHTML = keyFrames.replace(/A_DYNAMIC_VALUE/g, "180deg"); document.getElementsByTagName('head')[0].appendChild(style);