Post-Future CSS Animations
HTML CSS JavaScript
Latest commit 6e41e51 May 21, 2015 @jxnblk Merge pull request #1 from davidmcooper/patch-1
Fixed minor documentation error
Permalink
Failed to load latest commit information.
css Add blur Apr 12, 2015
docs Add blur Apr 12, 2015
lib Add blur Apr 12, 2015
scripts Add s3 script Mar 29, 2015
.gitignore Add s3 script Mar 29, 2015
README.md Add blur Apr 12, 2015
bower.json Add bower Mar 24, 2015
index.css Add blur Apr 12, 2015
index.html Fixed minor documentation error May 19, 2015
package.json 0.2.0 Apr 12, 2015

README.md

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