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);

Advertisements

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

Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s