Handling CSS keyframes/animations
- Dominant language
- JavaScript
- Stars
- 284
- Forks
- 17
- PR merge metrics
- No merged PRs in 30d
Description
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:
``` js
var anim = RCSS.registerKeyframes({
'0%': { top: 0 },
'100%': { top: '100px'; }
});
var cssClass = RCSS.registerClass({
animationName: anim,
animationDuration: '1s'
});
React.renderComponent(
document.body);
```
We could also maybe infer the percent character so we could use `{ 0: { top: 0 }, 100: { top: '100px' } }`.
Contributor guide
No contributing guide indexed for this repository
Research direction
Start by reading the existing RCSS.registerClass implementation, since the issue proposes matching its name-generation behavior. Determine how CSS keyframes and animationName values are represented, then define completion as a registerKeyframes API that produces usable keyframe names and supports the shown animation example; no test file is mentioned.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100