Scoped @keyframes helper

[rtsao]

There should probably be a scoped keyframe animation helper, for example:

var scopeStyles = require('scope-styles');
var scopeKeyframes = require('scoped-styles/keyframes');

var scopedAnimations = scopedKeyframes({
  foo: {
    from: {
      width: 0
    },
    to: {
      width: '100px'
    }
  }
});

scopedAnimations;
// {foo: 'foo_a4yeR'}

scopeStyles.getCss(scopedAnimations);
/*
@keyframes foo_a4yeR {
  from: {
    width: 0
  },
  to: {
    width: 100px
  }
}
*/

var scoped = scopeStyles({
  bar: {
    'animationName': scopedAnimations.foo
  }
});

Alternatively, this could be integrated into the main scopeStyles function:

var scopeStyles = require('scope-styles');

var scopedAnimations = scopeStyles({
  '@keyframes foo': {
    from: {
      width: 0
    },
    to: {
      width: '100px'
    }
  }
});

I might prefer the explicitness of the former approach, but the latter would be easier to support in the browserify transform/plugin.