Animation

Animate Top

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

<div class="ss-container">
  <h1 class="ss-center ss-anim-top">Animation is Fun!</h1>
</div>

Animate Bottom

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

<div class="ss-container">
  <h1 class="ss-center ss-anim-bottom">Animation is Fun!</h1>
</div>

Animate Left

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

<div class="ss-container">
  <h1 class="ss-center ss-anim-left">Animation is Fun!</h1>
</div>

Animate Right

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

<div class="ss-container">
  <h1 class="ss-center ss-anim-right">Animation is Fun!</h1>
</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">
  ...
</div>

Spin Elements

The ss-spin class spins an element 360 degrees.

<div class="ss-spin">
  ...
</div>

Background Position

The ss-anim-bgpan class animates an element from 0 to 100% in background position.

<div class="ss-anim-bgpan">
  <img src="/bg.jpg" class="ss-image">
</div>

Bounce

<div class="ss-anim-bounce">
  ...
</div>

Input

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

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

Jello

<div class="ss-anim-jello">
  ...
</div>