hackur/vhs

Post-Future CSS Animations

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