Supporting Keyframes/Animation

[aniknafs]

Feature Request

Problem description

This is just a request for supporting keyframes on Stardust.

Proposed solution

Keyframe animations currently not being supported in Stardust. Since Fela is used, renderKeyframe from Fela could be potentially used to process keyframes passed to any components.

[levithomason]

Agreed. We currently have patterns in the Provider for rendering fonts and static styles. The same pattern needs to be applied to keyframes. This would also include adding keyframes to the theme interface.

[mnajdova]

Currently the keyframes can be used even inside the styles in the following manner:

const keyframe = props => ({
  from: {
    transform: "rotate(0deg)",
  },
  to: {
    transform: "rotate(360deg)",
  },
})
const IconExampleWIthKeyframe = () => (
    <Icon name="chess rook" circular styles={({theme}) => ({animation: `${theme.renderer.renderKeyframe(keyframe as any, {})} 1s infinite`})} />
)

Not sure if this is sufficient, but until we provide some different API, this is how they can be used.

[aniknafs]

Great.. didn't know renderKeyframe is being exported.. although it looks a bit verbose and kinda buried in the theme..

[alinais]

#414