VHS
Post-future CSS animations
npm install vhs
Or use the CDN
<link rel="stylesheet" href="http://d2v52k3cl9vedd.cloudfront.net/vhs/0.1.0/vhs.min.css">
Blur
<div class="center p2">
<div class="h2 bold vhs-blur js-demo">.vhs-blur</div>
</div>
Blur Reverse
<div class="center p2">
<div class="h2 bold vhs-blur vhs-reverse js-demo">.vhs-blur</div>
</div>
Flicker
<div class="center p2">
<div class="h2 bold vhs-flicker js-demo">.vhs-flicker</div>
</div>
Flicker Reverse
<div class="h2 bold center p2">
<div class="vhs-flicker vhs-reverse js-demo">.vhs-flicker.vhs-reverse</div>
</div>
Zoom
<div class="h2 bold center p2">
<div class="vhs-zoom js-demo">.vhs-zoom</div>
</div>
Zoom Reverse
<div class="h2 bold center p2">
<div class="vhs-zoom vhs-reverse js-demo">.vhs-zoom .vhs-reverse</div>
</div>
Fade
<div class="h2 bold center p2">
<div class="vhs-fade js-demo">.vhs-fade</div>
</div>
Fade Reverse
<div class="h2 bold center p2">
<div class="vhs-fade vhs-reverse js-demo">.vhs-fade .vhs-reverse</div>
</div>
Pulsate Effect
<div class="h2 bold center p2">
<div class="vhs-fade vhs-duration-6 vhs-infinite vhs-alternate js-demo">.vhs-fade .vhs-duration-6 .vhs-infinite .vhs-alternate</div>
</div>
Pop
<div class="h2 bold center p2">
<div class="vhs-pop js-demo">.vhs-pop</div>
</div>
Pop Reverse
<div class="h2 bold center p2">
<div class="vhs-pop vhs-reverse js-demo">.vhs-pop .vhs-reverse</div>
</div>
Highlight
<div class="h2 bold center p2">
<div class="vhs-highlight js-demo">.vhs-highlight</div>
</div>
Highlight Text
<div class="h2 bold center p2">
<div class="vhs-highlight-text js-demo">.vhs-highlight-text</div>
</div>
Flash
<div class="h2 bold center p2">
<div class="vhs-flash js-demo">.vhs-flash</div>
</div>
<div class="h2 bold center p2">
<div class="vhs-flash vhs-duration-2 js-demo">.vhs-flash .vhs-duration-2</div>
<div class="vhs-flash vhs-duration-3 js-demo">.vhs-flash .vhs-duration-3</div>
<div class="vhs-flash vhs-duration-4 js-demo">.vhs-flash .vhs-duration-4</div>
<div class="vhs-flash vhs-duration-5 js-demo">.vhs-flash .vhs-duration-5</div>
<div class="vhs-flash vhs-duration-6 js-demo">.vhs-flash vhs-duration-6</div>
</div>
Left
<div class="h2 bold center p2">
<div class="vhs-left js-demo">.vhs-left</div>
</div>
Left Reverse
<div class="h2 bold center p2">
<div class="vhs-left vhs-reverse js-demo">.vhs-left .vhs-reverse</div>
</div>
Right
<div class="h2 bold center p2">
<div class="vhs-right js-demo">.vhs-right</div>
</div>
Right Reverse
<div class="h2 bold center p2">
<div class="vhs-right vhs-reverse js-demo">.vhs-right .vhs-reverse</div>
</div>
Top
<div class="h2 bold center p2">
<div class="vhs-top js-demo">.vhs-top</div>
</div>
Top Reverse
<div class="h2 bold center p2">
<div class="vhs-top vhs-reverse js-demo">.vhs-top .vhs-reverse</div>
</div>
Bottom
<div class="h2 bold center p2">
<div class="vhs-bottom js-demo">.vhs-bottom</div>
</div>
Bottom Reverse
<div class="h2 bold center p2">
<div class="vhs-bottom vhs-reverse js-demo">.vhs-bottom .vhs-reverse</div>
</div>
Highlight Pop
<div class="h2 bold center p2">
<div class="vhs-highlight-pop js-demo">.vhs-highlight-pop</div>
</div>
Utility
Delay
| 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 |
Duration
| 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 |
Timing Function
| 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 |
Iteration Count
| class | description |
|---|
| .vhs-infinite | animation-iteration-count: infinite |
Direction
| class | description |
|---|
| .vhs-reverse | animation-direction: reverse |
| .vhs-alternate | animation-direction: alternate |
Fill Mode
| class | description |
|---|
| .vhs-fill-forwards | animation-fill-mode: forwards |
| .vhs-fill-backwards | animation-fill-mode: backwards |
| .vhs-fill-both | animation-fill-mode: both |
Play State
| class | description |
|---|
| .vhs-paused | animation-play-state: paused |