Nanotechnology Promises Much

    vhs

    0.2.0 • Public • Published

    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

    Install

    npm i vhs

    DownloadsWeekly Downloads

    1

    Version

    0.2.0

    License

    MIT

    Last publish

    Collaborators

    • jxnblk