Quick & Easy Animations

Quick & Easy Animation Classes

Apply any of the CSS classes below to animate like the example.
  • Fade In From Left:
    fade-in-left
  • Fade In From Right:
    fade-in-right
  • Fade In From Top:
    fade-in-up
  • Fade In From Bottom:
    fade-in-down
  • Bounce In From Left:
    bounce-in-left
  • Bounce In From Right:
    bounce-in-right
  • Bounce In From Bottom:
    bounce-in-down
  • Bounce In From Top:
    bounce-in-up
  • Grow Left (Gain Width)
    grow-left
  • Grow Right (Gain Width)
    grow-right
  • Grow Up (Gain Height)
    grow-up
  • Grow down (Gain Height)
    grow-down
  • Rubber Band Effect
    rubber-band
  • Skew in Clockwise:
    skew-in-right
  • Skew in Counter-Clockwise:
    skew-in-left
  • Flip Left
    flip-left
  • Flip Right:
    flip-right
  • Flip Up:
    flip-up
  • Flip Down
    flip-down
  • Move In From Left
    move-in-left
  • Move In From Right
    move-in-right
  • Move In From Top
    move-in-up
  • Move In From Bottom
    move-in-down
  • Swing Forward:
    swing-forward
  • Swing Sideways:
    swing-side
  • Zoom In:
    zoom-in
  • Shake:
    shake
  • Blur In (Gain focus)
    blur-in
  • Change from B&W to colour
    colour-gain

Additional Controls

Apply any of the CSS classes in conjuction with animate class above for additional controls.
  • Speed Control
    speed-xxx Replace 'xxx' with the speed in ms. 1000 = 1 second
  • Delay Control
    delay-xxx Replace 'xxx' with the delay in ms. 1000 = 1 second

Easy Animation Controls

checked>