Pulsating Animation CSS Links

This tutorial will show you how to make a pulsating links without using script.aculo.us or other JS animation libraries. This is only a small thing that CSS can achieve but for other animations like Slide Left etc. then use these libraries only.

By the way if you have any problem during the tutorial you can drop by our Google Group and ask me or the others. You may also download the necessary files, so that you'll follow better.

Let us start with the HTML of the links, this is very basic -

<ul class="links">
<li><a href="#" title="Sample Link">Sample Link</a></li>

<li><a href="#" title="Sample Link">Sample Link</a></li>

<li><a href="#" title="Sample Link">Sample Link</a></li>

<li><a href="#" title="Sample Link">Sample Link</a></li>

<li><a href="#" title="Sample Link">Sample Link</a></li>

</ul>

Also in the head you'll have to include a link to the required CSS file -

<link rel="stylesheet" href="res/ui.css" type="text/css" media="screen"/>

The CSS is very normal too, quite similar to the A List Apart Article on LI Drop Downs. -

ul.links{
list-style: none;
padding: 0;

}
ul.links li a{
display: block;
width: 200px;
height: 10px;
border-left: 6px solid #1958b7;
border-right: 10px solid #2175bc;
background: #2175bc;
padding: 10px 20px;
color: white;
text-decoration: none;
font: 12px sans-serif;
}

ul.links li a:hover{
border-right: 10px solid #508fc4;
background: url('background.gif');
}

This will look something like this -


The actual pulsating effect is caused by the 'background.gif' that will be an animated GIF that has a color-fade between 2 colors. Once we have made it and put it in the /res folder, everything will function as required.

Let us start making it. We'll make a 20X20 px photoshop file. We'll have 2 layers in it one filled with the color #2175bc(dark) and the other layer with #2586d7(light).


Now we switch to ImageReady. We'll be making a simple animation, in which we'll vary the opacity of the light frame from 0% to 100% (in 10 frames) and the back to 0% in 10 frames.


On the top right corner of the layers window, you'll find the option to change the opacity. Remember you have to change the opacity of the the "Light" layer and let the dark layer remain the same.

Start with 0% increment by 10% till it becomes 100% and then back to 0%. Like 0,10,20,30...100,90,80...20,10,0. Also remember to make a new frame for each opacity. The button that'll allow you to make the new frame is located at the toolbar of the Animation window in ImageReady.


Save it as background.gif and you are done. If you wish you can download the HTML, CSS, GIF and the PSD Source file from the BitPixels Forums. You can ask for an help or give suggestions in the forum too. Don't forget to drop by.