all files / lib/utils/ build-keyframe.js

100% Statements 4/4
100% Branches 0/0
100% Functions 3/3
100% Lines 4/4
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42                                  11×                                          
import buildDeclarations from './build-declarations'
 
/**
 * Build the steps of a keyframe.
 * @param {Object} steps - CSS declarations.
 * @returns {string} valid css keuframe steps.
 * @example
 * // returns 'from{transform:rotate(0deg);}to{transform:rotate(3600deg);}'
 * buildKeyframeSteps({
 *   from: {
 *     transform: 'rotate(0deg)'
 *   },
 *   to: {
 *     transform: 'rotate(360deg)'
 *   }
 * })
 */
export const buildKeyframeSteps = steps =>
  Object.keys(steps)
    .map(step => `${step}{${buildDeclarations(steps[step])}}`)
    .join('')
 
/**
 * Build a keyframes rule.
 * @param {string} animationName - the name of the animation to be created.
 * @param {Object} steps - Steps of the keyframes animation.
 * @returns {string} formated keyframes rule.
 * @example
 * // returns '@keyframes rotate{from{opacity:0;}to{opacity:1;}}'
 * buildKeyframe('rotate', {
 *   from: {
 *     opacity: 0
 *   },
 *   to: {
 *     opacity: 1
 *   }
 * })
 */
export default (animationName, steps) => {
  return `@keyframes ${animationName}{${buildKeyframeSteps(steps)}}`
}