Animate Css

animate.css is a bunch of cool, fun, and cross-browser animations for you to use in your projects. Great for emphasis, home pages and sliders.

How To

  1. Step 1: Include Animate.css in Logi Info ApplicationInclude Animate.css in Logi Info Application
Example

Animate Css

Options

Add the class .animated to the element you want to animate. You may also want to include the class .infinite for an infinite loop.

Attention Seekers
  • .bounce
  • .flash
  • .headShake
  • .jello
  • .pulse
  • .rubberBand
  • .shake
  • .swing
  • .tada
  • .wobble
Bouncing Entrances
  • .bounceIn
  • .bounceInDown
  • .bounceInLeft
  • .bounceInRight
  • .bounceInUp
Bouncing Exits
  • .bounceOut
  • .bounceOutDown
  • .bounceOutLeft
  • .bounceOutRight
  • .bounceOutUp
Fading Entrances
  • .fadeIn
  • .fadeInDown
  • .fadeInDownBig
  • .fadeInLeft
  • .fadeInLeftBig
  • .fadeInRight
  • .fadeInRightBig
  • .fadeInUp
  • .fadeInUpBig
Fading Exits
  • .fadeOut
  • .fadeOutDown
  • .fadeOutDownBig
  • .fadeOutLeft
  • .fadeOutLeftBig
  • .fadeOutRight
  • .fadeOutRightBig
  • .fadeOutUp
  • .fadeOutUpBig
Flippers
  • .flipInX
  • .flipInY
  • .flipOutX
  • .flipOutY
Lightspeed
  • .lightSpeedIn
  • .lightSpeedOut
Rotating Entrances
  • .rotateIn
  • .rotateInDownLeft
  • .rotateInDownRight
  • .rotateInUpLeft
  • .rotateInUpRight
Rotating Exits
  • .rotateOut
  • .rotateOutDownLeft
  • .rotateOutDownRight
  • .rotateOutUpLeft
  • .rotateOutUpRight
Sliding Entrances
  • .slideInDown
  • .slideInLeft
  • .slideInRight
  • .slideInUp
Sliding Exits
  • .slideOutDown
  • .slideOutLeft
  • .slideOutRight
  • .slideOutUp
Specials
  • .hinge
  • .rollIn
  • .rollOut
Zoom Entrances
  • .zoomIn
  • .zoomInDown
  • .zoomInLeft
  • .zoomInRight
  • .zoomInUp
Zoom Exits
  • .zoomOut
  • .zoomOutDown
  • .zoomOutLeft
  • .zoomOutRight
  • .zoomOutUp 
<Label Caption="Animate Css" Class="animated infinite bounce" HtmlTag="P" />
<Label Caption="Animate Css" Class="animated infinite bounce" HtmlTag="P" />