CSS Lifesaver #1 – Insert @-webkit-keyframes animation into stylesheets dynamically is not easy…

CSS Lifesaver #1 – Insert @-webkit-keyframes animation into stylesheets dynamically is not easy…

Okay, I may be a complete fool to believe this should work, but it cost me approx. half of last night: Dynamically creating CSS keyframe animations. (Hint: I finally did it after finding the above genius jsfiddle!)

Note to my future me: Don’t try creating @-webkit-keyframe animations like this, it won’t work (whysoever):

var leRule = ‚\
@-webkit-keyframes ‚pulsebig { \
0% { -webkit-transform: scale(1); } \
50% { -webkit-transform: scale(‚1.5‘); } \
100% { -webkit-transform: scale(1); } } \
‚;

jQuery(‚html > head‘).append(jQuery(style));

Instead: insertRule() function on a stylesheet is your friend…

var leSheet = document.styleSheets[0]
var leResult = leSheet.insertRule(leRule, leSheet.cssRules.length);