Jxnblk

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

.vhs-blur
<div class="center p2">
  <div class="h2 bold vhs-blur js-demo">.vhs-blur</div>
</div>

Blur Reverse

.vhs-blur
<div class="center p2">
  <div class="h2 bold vhs-blur vhs-reverse js-demo">.vhs-blur</div>
</div>

Flicker

.vhs-flicker
<div class="center p2">
  <div class="h2 bold vhs-flicker js-demo">.vhs-flicker</div>
</div>

Flicker Reverse

.vhs-flicker.vhs-reverse
<div class="h2 bold center p2">
  <div class="vhs-flicker vhs-reverse js-demo">.vhs-flicker.vhs-reverse</div>
</div>

Zoom

.vhs-zoom
<div class="h2 bold center p2">
  <div class="vhs-zoom js-demo">.vhs-zoom</div>
</div>

Zoom Reverse

.vhs-zoom .vhs-reverse
<div class="h2 bold center p2">
  <div class="vhs-zoom vhs-reverse js-demo">.vhs-zoom .vhs-reverse</div>
</div>

Fade

.vhs-fade
<div class="h2 bold center p2">
  <div class="vhs-fade js-demo">.vhs-fade</div>
</div>

Fade Reverse

.vhs-fade .vhs-reverse
<div class="h2 bold center p2">
  <div class="vhs-fade vhs-reverse js-demo">.vhs-fade .vhs-reverse</div>
</div>

Pulsate Effect

.vhs-fade .vhs-duration-6 .vhs-infinite .vhs-alternate
<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

.vhs-pop
<div class="h2 bold center p2">
  <div class="vhs-pop js-demo">.vhs-pop</div>
</div>

Pop Reverse

.vhs-pop .vhs-reverse
<div class="h2 bold center p2">
  <div class="vhs-pop vhs-reverse js-demo">.vhs-pop .vhs-reverse</div>
</div>

Highlight

.vhs-highlight
<div class="h2 bold center p2">
  <div class="vhs-highlight js-demo">.vhs-highlight</div>
</div>

Highlight Text

.vhs-highlight-text
<div class="h2 bold center p2">
  <div class="vhs-highlight-text js-demo">.vhs-highlight-text</div>
</div>

Flash

.vhs-flash
<div class="h2 bold center p2">
  <div class="vhs-flash js-demo">.vhs-flash</div>
</div>
.vhs-flash .vhs-duration-2
.vhs-flash .vhs-duration-3
.vhs-flash .vhs-duration-4
.vhs-flash .vhs-duration-5
.vhs-flash vhs-duration-6
<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

.vhs-left
<div class="h2 bold center p2">
  <div class="vhs-left js-demo">.vhs-left</div>
</div>

Left Reverse

.vhs-left .vhs-reverse
<div class="h2 bold center p2">
  <div class="vhs-left vhs-reverse js-demo">.vhs-left .vhs-reverse</div>
</div>
.vhs-right
<div class="h2 bold center p2">
  <div class="vhs-right js-demo">.vhs-right</div>
</div>

Right Reverse

.vhs-right .vhs-reverse
<div class="h2 bold center p2">
  <div class="vhs-right vhs-reverse js-demo">.vhs-right .vhs-reverse</div>
</div>

Top

.vhs-top
<div class="h2 bold center p2">
  <div class="vhs-top js-demo">.vhs-top</div>
</div>

Top Reverse

.vhs-top .vhs-reverse
<div class="h2 bold center p2">
  <div class="vhs-top vhs-reverse js-demo">.vhs-top .vhs-reverse</div>
</div>

Bottom

.vhs-bottom
<div class="h2 bold center p2">
  <div class="vhs-bottom js-demo">.vhs-bottom</div>
</div>

Bottom Reverse

.vhs-bottom .vhs-reverse
<div class="h2 bold center p2">
  <div class="vhs-bottom vhs-reverse js-demo">.vhs-bottom .vhs-reverse</div>
</div>

Highlight Pop

.vhs-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-6 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