keyshond
CSS in JS friendly animation helper support Element.animate() object and CSS @keyframes
Install
$ npm install keyshond
Usage
// or commonjs// const animate = require('keyshond').animate const output =
Output:
'animationName': '0%': 'opacity': 05 'transform': 'scale(0.5)' '100%': 'opacity': 1 'transform': 'scale(1)' 'animationTimingFunction': 'linear' 'animationDirection': 'alternate' 'animationDuration': '500ms' 'animationIterationCount': 'infinite'
Documents
Example
aphrodite (most easily)
with const style = StyleSheet const AnimateItem = { return <div className=>Hello</div>}
free-style
with const Style = FreeStyleconst props = const STYLE = Style Style const AnimateItem = { return <div className=STYLE>Hello</div>}
Radium
with const style = item: let Item = ReactItem = const AnimateItem = { return <StyleRoot><Item/></StyleRoot>}
jss
with jss const animationName ...animationEffects = const ruleName = `my-jss-animation`// If you register multiple animation, you need change ruleName like `my-jss-animation-{$unique}` const style = `@keyframes ` : animationName item: Objectconst classes = jss const AnimateItem = { return <div className=STYLE>Hello</div>}
Reference
Naming
@keyframes
+ keeshond
Related project
- keyframe-transpose
- keysond internal library for convert
Element.animate
like keyframe Object
- keysond internal library for convert
- css-keyframe-animatable
- keysond internal library for convert CSS
@keyfrmaes
like Object
- keysond internal library for convert CSS