Keyframer

Keyframer

Source:
Make the CSS Keyframes the keyframes object.

Methods

(static) getKeyframesObject(name) → {IObject<any>}

Source:
Make the CSS Keyframes the keyframes deep object.
Name Type Description
name string | IObject<string> The name of the keyframes(`CSSKeyframes​Rule`) in the stylesheet(`CSSStyleSheet`).
Example
// @keyframes keyframes {
//     0% {
//         opacity: 1;
//         transform: translate(0px, 0px) rotate(0deg);
//     }
//     50% {
//         opacity: 0;
//         transform: translate(50px, 0px) rotate(0deg);
//     }
//     100% {
//         opacity: 1;
//         transform: translate(100px, 0px) rotate(50deg);
//     }
// }

import { getKeyframesObject } from "keyframer";

const obj = getKeyframesObject("keyframes");
// {
//     "0%": {
//         opacity: 1,
//         transform: { translate: "0px,0px", rotate: "0deg" },
//     }
//     "50%": {
//         opacity: 0,
//         transform: { translate: "50px,0px", rotate: "0deg" },
//     },
//     "100%": {
//         opacity: 1,
//         transform: { translate: "100px,0px", rotate: "50deg" },
//     },
// }
Returns:
the keyframes deep object
Type
IObject<any>

(static) getKeyframes(name) → {IObject<string>}

Source:
Make the CSS Keyframes the keyframes object.
Name Type Description
name string The name of the keyframes(`CSSKeyframes​Rule`) in the stylesheet(`CSSStyleSheet`).
Example
// @keyframes keyframes {
//     0% {
//         opacity: 1;
//         transform: translate(0px, 0px) rotate(0deg);
//     }
//     50% {
//         opacity: 0;
//         transform: translate(50px, 0px) rotate(0deg);
//     }
//     100% {
//         opacity: 1;
//         transform: translate(100px, 0px) rotate(50deg);
//     }
// }

import { getKeyframes } from "keyframer";

// {
//     "0%": "opacity: 1; transform: translate(0px, 0px) rotate(0deg)",
//     "50%": "opacity: 0; transform: translate(50px, 0px) rotate(0deg)",
//     "100%": "opacity: 1; transform: translate(100px, 0px) rotate(50deg)",
// }
const obj = getKeyframes("keyframes");
Returns:
the keyframes object
Type
IObject<string>