- 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(`CSSKeyframesRule`) 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(`CSSKeyframesRule`) 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>