VHS

Post-future CSS animations

``
npm install vhs
`

Or use the CDN

`

`

Blur

`html


`html


`html


`html


`html


`html


`html


`html


`html


`html


`html


`html


`html


`html


`html


`html


`html


`html


`html


`html


`html


`html


`html


`html


Utility

$3

class | description
---|---
.vhs-delay-1 | animation-delay: 1
.vhs-delay-2 | animation-delay: 2
.vhs-delay-3 | animation-delay: 3
.vhs-delay-4 | animation-delay: 4
.vhs-delay-5 | animation-delay: 5
.vhs-delay-5 | animation-delay: 6

$3

class | description
---|---
.vhs-duration-1 | animation-duration: 1
.vhs-duration-2 | animation-duration: 2
.vhs-duration-3 | animation-duration: 3
.vhs-duration-4 | animation-duration: 4
.vhs-duration-5 | animation-duration: 5
.vhs-duration-6 | animation-duration: 6

$3

class | description
---|---
.vhs-ease-in | animation-timing-function: ease-in
.vhs-ease-out | animation-timing-function: ease-out
.vhs-ease-in-out | animation-timing-function: ease-in-out
.vhs-linear | animation-timing-function: linear

$3

class | description
---|---
.vhs-infinite | animation-iteration-count: infinite

$3

class | description
---|---
.vhs-reverse | animation-direction: reverse
.vhs-alternate | animation-direction: alternate

$3

class | description
---|---
.vhs-fill-forwards | animation-fill-mode: forwards
.vhs-fill-backwards | animation-fill-mode: backwards
.vhs-fill-both | animation-fill-mode: both

$3

class | description
---|---
.vhs-paused | animation-play-state: paused