How to Apply a Transition Effect in CSS

by Joe Laudato

Applying a transition effect to CSS hover events is very simple. For example, on my photo page I set out to modify a given image’s borders upon the mouse hovering over that image. I first labelled each image in my HTML file with a class named “focus”:

<img class="focus" src="pictures/a/fog.jpg" height="250" width="200">

Then I defined the hover event in the corresponding CSS file as:

.focus:hover {
 border: 2px solid #D7E5E5;
 border-radius: 15%;}

What this accomplished was changing the image’s border radius and colour from the previously defined values, from the top image to the bottom image.



As the code was, the image immediately shifted shape, resulting in a sharp visual effect. To mend this sharpness, I applied the transition effect by adding the following code to the CSS file:

.focus {
 -webkit-transition: all 1s ease;
 -moz-transition: all 1s ease;
 -o-transition: all 1s ease;
 -ms-transition: all 1s ease;
 transition: all 1s ease;}

“transition” is the name of the effect, but it alone will not accomplish this feat. The other four variants of “transition” account for compatibility with different web browsers.

Additionally, the time variable– here set at “1s”– will determine how long the transition lasts. Setting it less than 1 second will produce a very fast, snappy transition, just as setting it greater than 1 second will make a smooth and lengthy transition.

~ by jtl29 on March 4, 2013.

%d bloggers like this: