Creating CSS at rules (@rules) on the fly in Javascript

Question

I'm creating CSS animations on the fly, so I need to insert a CSS timing function into my document. As in:

@-webkit-keyframes slide 
{
    from {
    -webkit-transform: translateX(-100px) translateY(-100px);
    -webkit-animation-timing-function: ease-in;
    }

    33% {
    -webkit-transform: translateX(-100px) translateY(-50px);
    -webkit-animation-timing-function: linear;
    }

    66% {
    -webkit-transform: translateX(-50px) translateY(0px);
    -webkit-animation-timing-function: linear;
    }


    to {
    -webkit-transform: translateX(0px) translateY(0px);
    -webkit-animation-timing-function: ease-out;
    }
}

Any idea how to pull this off (the insertion) using Javascript? I can add regular classes without any trouble, but this seems to be a special case.

Jason Kester · Accepted Answer · 2011-02-14 13:41:01Z

3

Actually, it's no different from adding any other style rule to a stylesheet:

var selector = "@-webkit-keyframes slide";
var rule = "{   from {  -webkit-transform: translateX(-100px) translateY(-100px);   -webkit-animation-timing-function: ease-in; }   33% {   -webkit-transform: translateX(-100px) translateY(-50px);    -webkit-animation-timing-function: linear;  }   66% {   -webkit-transform: translateX(-50px) translateY(0px);   -webkit-animation-timing-function: linear;  }   to {    -webkit-transform: translateX(0px) translateY(0px); -webkit-animation-timing-function: ease-out;    }       }";

document.styleSheets[0].insertRule(selector + rule, 0);

Note that the above DOM manipulation is WebKit (and FireFox) specific. You'd need to add some logic to s/insertRule/addRule for IE.

answered Feb 14, 2011 at 13:41

Jason Kester

6,0519 gold badges38 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Yi Jiang Over a year ago

If you're going to do stylesheet injection like this, then why not just do the animation using JavaScript?

Jason Kester Over a year ago

Try both side by side, and you'll have your answer. CSS animation in webkit (especially on iOS) is quite a thing to behold. It's orders of magnitude smoother to the eye, which makes sense considering that it takes advantage of hardware acceleration to do its thing.

Collectives™ on Stack Overflow

Creating CSS at rules (@rules) on the fly in Javascript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related