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:
<a class="grow" href="#">Grow this link</a>
<a class="pulse" href="#">Pulse this link</a>
<a class="float" href="#">Float this link</a>
<a class="outline-outward" href="#">Outline outward this link</a>
<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.