chenglou / chenglou/RCSS

Handling CSS keyframes/animations

Open
#45 2 comments 0 reactions 0 assignees View on GitHub
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(

Test
,
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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.