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