❤
npm
Sign UpSign In

css-keyframe-animatable

1.0.0 • Public • Published

css-keyframe-to-array

Convert CSS @keyframes like object to Element.animate compatible array

npm JavaScript Style Guide Build Status

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 or animation-timing-function is replaced to easing

Related Project

Readme

Keywords

Package Sidebar

Install

npm i css-keyframe-animatable

Repository

github.com/inuscript/css-keyframe-animatable

Homepage

github.com/inuscript/css-keyframe-animatable#readme

Weekly Downloads

1

Version

1.0.0

License

MIT

Last publish

Collaborators

  • inuscript
  • terrierscript
Try on RunKit
Report malware