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:
<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.
it’s not working for me
Can you explain what you did so far? If so we can try and figure out why it is not working for you.
i followed the instructions.. not working i am using asp.net