Handling CSS keyframes/animations

conradz commented 9 years ago

Is there any way to handle the CSS animations @keyframes? The keyframes name is another case where CSS makes use of global names, which would be nice to get rid of.

Maybe we could add a RCSS.registerKeyframes method which would generate the keyframes name similar to how registerClass works currently. Example:

var anim = RCSS.registerKeyframes({
  '0%': { top: 0 },
  '100%': { top: '100px'; }
});

var cssClass = RCSS.registerClass({
  animationName: anim,
  animationDuration: '1s'
});

React.renderComponent(
  <div className={cssClass}>Test</div>,
  document.body);

We could also maybe infer the percent character so we could use { 0: { top: 0 }, 100: { top: '100px' } }.

totty90 commented 9 years ago

+1

bitplanets commented 9 years ago

+1 would be really useful

chenglou / RCSS

Handling CSS keyframes/animations #45