Animation

Animate Top

The ss-anim-top class slides in an element from the top (from -300px to 0).

<div class="ss-anim-top">
  Animate Top
</div>

Animate Bottom

The ss-anim-bottom class slides in an element from the bottom (from -300px to 0).

<div class="ss-anim-bottom">
  Animate Bottom
</div>

Animate Left

The ss-anim-left class slides in an element from left (-300px to 0).

<div class="ss-anim-left">
  Animate Left
</div>

Animate Right

The ss-anim-right class slides in an element from the right (-300px to 0).

<div class="ss-anim-right">
    Animate Right
</div>

Zoom in Elements

The ss-anim-zoom class animates an element from 0 to 100% in size.

Zoom in an element with the ss-anim-zoom class.

<div class="ss-anim-zoom">
    Animate Zoom
</div>

Spin Elements

The ss-spin class spins an element 360 degrees.

<p class="ss-bold">
  Auto spin: <i class="fa fa-refresh ss-spin"></i>
</p>
<p class="ss-bold">
  Hover spin: <i class="fa fa-refresh ss-hvr-anim-spin"></i>
</p>

Kenburns

<div class="ss-anim-kenburns">
  Animate Kenburns
</div>

Input

The ss-anim-input class transforms the width of an input field to 100% when it gets focus.

<input type="search" class="ss-input ss-w-3 ss-anim-input" />

Jello

<div class="ss-anim-jello">
  Animate Jello
</div>