css-keyframe-animatable
v1.0.0
Published
Convert CSS @keyframes like object to Element.animate compatible array
Downloads
3
Readme
css-keyframe-to-array
Convert CSS @keyframes
like object to Element.animate
compatible array
const cssKeyframesToArray = require('css-keyframe-to-array')
const input = {
from: { marginTop: '50px' },
to: { marginTop: '100px' }
}
cssKeyframesToArray(input)
Output
[
{ marginTop: '50px', offset: 0 },
{ marginTop: '100px', offset: 1 }
]
More complex example
const input = {
'0% ': { top: 0, left: 0 },
'30%': { top: '50px', animationTimingFunction: 'ease-out' },
'68%, 72%': { left: '50px' },
'100%': { top: '100px', left: '100%' }
}
cssKeyframesToArray(input)
[
{ top: 0, left: 0, offset: 0 },
{ top: '50px', offset: 0.3 , easing: 'ease-out'},
{ left: '50px', offset: 0.68 },
{ left: '50px', offset: 0.72 },
{ top: '100px', left: '100%', offset: 1 }
]
- Percentage timing is replace to
offset
(between 0.0 ~ 1.0) - Flatten comma separated percentage timing
animationTimingFunction
oranimation-timing-function
is replaced toeasing