Manage webkit animations dynamically

I am looking for a good way to manage webkit animations without deploying a static CSS declaration. In short, adding keyframe sections, removing them, altering them etc. using Javascript only. I figured I could ask instead of reinventing the wheel.

Is there a simple javascript lib out there that does something like this (not jQuery or an开发者_JS百科ything like that, just a small snippet of functions )?

There has to be a way to do something like this (pseudo code):

function setupAnim(aName) {
 /* becomes: @-webkit-keyframes "aName" */
 var mRule = jsAddCSSRule(aName);
 if (mRule) {
   /* inject CSS properties here */
   mRule.innerHTML = "from {...} to {...}";
 }
}

function removeAnim(aName) {
  var mRule = jsFindCSSRule(aName);
  if (mRule) {
    removeCSSRule(mRule);
  }
}

Any help is welcome!

I found https://github.com/krazyjakee/keyframes.js which allows you to create and overwrite CSS animations. However it (currently) clobbers a single <style> element, which might be inefficient if you are creating a lot of animation rules, because the browser has to re-parse all of them.

In the future, implementations of the CSSOM proposal may let us make more fine-grained changes. https://github.com/NV/CSSOM

Poking around in the browser console, I did find browsers exposing methods for manipulating existing CSS rules, but I did not have a lot of success with them.