Easy CSS3 Animation with Hover.css

CSS3 allows you to add animation to elements such as links. In a previous post about the OSTraining redesign, we showed how CSS3 enabled us to add a small bounce animation to some buttons on our site.

In this tutorial, we’ll introduce you to Hover.css, a library by Ian Lunn that makes it really easy to animate hover elements on your site.

Step 1: Download hover.css

• Go to the Github repository and click the Download zip button

• Decompress the zip file.
• Find this folder: /hover-master/css/hover.css
• Upload the file hover.css file to your website.

Step 2: Load hover.css

Inside any HTML file, add the following code just before the closing head tag:

<link href="path/to/hover.css" rel="stylesheet" media="all">

Step 3: animation effects

Hover.css includes a long list of animation effects including 2D transformations, border transitions, shadow and glow transitions, speech bubbles and curls.

Let’s see how to use a few of them by adding a specific class to the <a> tag:

Class grow

<a class="grow" href="#">Grow this link</a>

Class pulse

<a class="pulse" href="#">Pulse this link</a>

Class float

<a class="float" href="#">Float this link</a>

Class outline-outward

<a class="outline-outward" href="#">Outline outward this link</a>

Class float-shadow

<a class="float-shadow" href="#">Float shadow this link</a>

You can see live examples of these animations by clicking this demo below:

The full list of animation effects is available here.