@hookun/parse-animation-shorthand

!Test

A parser for The animation shorthand CSS property.

Install

``
npm install @hookun/parse-animation-shorthand
`

API

$3

`javascript
import {parse} from '@hookun/parse-animation-shorthand';
const result = parse('3s ease-in SlideIn, .2s .1s ease FadeIn');
const expectedResult = [
{
name: 'SlideIn',
duration: 3000,
delay: 'unset',
timingFunction: 'ease-in',
iterationCount: 'unset',
direction: 'unset',
fillMode: 'unset',
playState: 'unset',
},
{
name: 'FadeIn',
duration: 200,
delay: 100,
timingFunction: 'ease',
iterationCount: 'unset',
direction: 'unset',
fillMode: 'forwards',
playState: 'unset',
},
];
`

$3

`javascript
import {serialize} from '@hookun/parse-animation-shorthand';
const result = serialize({
name: 'SlideIn',
duration: 3000,
delay: 'unset',
timingFunction: 'ease-in',
iterationCount: 'unset',
direction: 'unset',
fillMode: 'unset',
playState: 'unset',
});
const expectedResult = '3s ease-in SlideIn';
`

$3

`typescript
interface CSSAnimation {
name: string
duration: number | Unset
timingFunction: CSSTimingFunction | Unset
delay: number | Unset
iterationCount: number | 'infinite' | Unset
direction: CSSAnimationDirection | Unset
fillMode: CSSAnimationFillMode | Unset
playState: CSSAnimationPlayState | Unset
}

type Unset = 'unset'

type CSSTimingFunction =
| CSSTimingFunctionKeyword
| CSSCubicBezier
| CSSSteps

type CSSTimingFunctionKeyword =
| 'ease'
| 'ease-in'
| 'ease-out'
| 'ease-in-out'
| 'linear'
| 'step-start'
| 'step-end'

interface CSSCubicBezier {
type: 'cubic-bezier'
value: [number, number, number, number]
}

interface CSSSteps {
type: 'steps'
stepCount: number
direction: CSSStepDirection
}

type CSSStepDirection =
| 'jump-start'
| 'jump-end'
| 'jump-none'
| 'jump-both'
| 'start'
| 'end'

type CSSAnimationDirection =
| 'normal'
| 'reverse'
| 'alternate'
| 'alternate-reverse';

type CSSAnimationFillMode =
| 'none'
| 'forwards'
| 'backwards'
| 'both'

type CSSAnimationPlayState =
| 'paused'
| 'running'
``

License

Apache License, Version 2.0