Animate.css

Animate.css is a free css animation library. It currently only supports basic fade in/out animations, but I work on more in the Future :)

Installation

Embedding local animate.css

<link rel="stylesheet" type="text/css" href="path/to/animate.min.css">

Embedding from GitHub

<link rel="stylesheet" type="text/css" href="https://raw.githubusercontent.com/SenOSDev/animate.css/master/animate.min.css">

Usage

Every animated element needs the .animation class

Additional you need to set the speed of the animation:

• Slow animations (5 seconds) need the .animation-slow class
• Medium animations (3 seconds) need the .animation-medium class
• Fast animations (2 seconds) need the .animation-fast class

Add the following class to specify the animation type:

• .animation-fadeIn-right: Fade in from right
• .animation-fadeIn-left: Fade in from left
• .animation-fadeIn-top: Fade in from top
• .animation-fadeIn-bottom: Fade in from bottom
• .animation-fadeOut-right: Fade out from right
• .animation-fadeOut-left: Fade out from left
• .animation-fadeOut-top: Fade out from top
• .animation-fadeOut-bottom: Fade out from bottom