motion/dist/targets/react/utils/keyframes.es.js

The Motion library for the web

import { isTransform, transformAlias, asTransformCssVar, transformPropertyDefinitions, buildTransformTemplate } from '../../dom/utils/transforms.es.js';

function convertKeyframesToStyles(keyframes) {
    const initialKeyframes = {};
    const transformKeys = [];
    for (let key in keyframes) {
        const value = keyframes[key];
        if (isTransform(key)) {
            if (transformAlias[key])
                key = transformAlias[key];
            transformKeys.push(key);
            key = asTransformCssVar(key);
        }
        let initialKeyframe = Array.isArray(value) ? value[0] : value;
        /**
         * If this is a number and we have a default value type, convert the number
         * to this type.
         */
        const definition = transformPropertyDefinitions.get(key);
        if (definition) {
            initialKeyframe =
                typeof value === "number" ? definition.toDefaultUnit(value) : value;
        }
        initialKeyframes[key] = initialKeyframe;
    }
    if (transformKeys.length) {
        initialKeyframes.transform = buildTransformTemplate(transformKeys);
    }
    return initialKeyframes;
}

export { convertKeyframesToStyles };