The Transition Property in CSS3 With Examples

| Coding Tutorials

css transitionCSS3 makes it possible to easily create animations for hover events.

In a previous post, we explained how the hover.css library works and gave a demo of several options.

In this tutorial, we'll give you some basic examples of the transition property to do fade effects for your links. We'll do this by adding in other CSS properties such as color and border.

Step 1: The CSS file

Create a CSS file and add the following code:

.ost-transition{
    transition:All 1s ease;
    -webkit-transition:All 1s ease;
    -moz-transition:All 1s ease;
    -o-transition:All 1s ease;
}

In the previous code, we use 4 lines to specify the same property to support different browsers:

  • transition: default
  • -webkit-transition: Chrome and Safari
  • -moz-transition: Firefox
  • -o-transition: Opera

The 3 parameters from the value are:

  • Property: All. Another example: color.
  • Duration: 1s. Means 1 second.
  • Timing function: ease. Another example: linear.

The transition property is set as all to dynamically use the available ones later in a separate class.

In the same CSS file, also add the following code:

.ost-opacity:hover{
    opacity: 0.3;
}
.ost-color:hover{
    color: #fff;
    background: #2184cd;
}
.ost-padding:hover{
    padding: 15px 20px;
}
.ost-border:hover{
    border: 2px solid #000;
}

The previous code include custom classes to set specific properties that will work when user hover an element.

Step 2: The HTML file

Create an HTML file, inside the head tag load the CSS from step 1:

<link type="text/css" href=“path/to/your/file.css" rel="stylesheet" />

Step 3: The effects

In your HTML file add the following code inside your body tag to get different results when you place the cursor over the link:

Opacity. Use class ost-opacity

<p><a class="ost-transition ost-opacity" href="#">Opacity</a></p>

Color. Use class ost-color

<p><a class="ost-transition ost-color" href="#">Color</a></p>

Padding. Use class ost-padding

<p><a class="ost-transition ost-padding" href="#">Padding</a></p>

Border. Use class ost-border

<p><a class="ost-transition ost-border" href="#">Border</a></p>

Color, Padding and Border. You can mix the CSS classes to get a fancy effect.

<p><a class="ost-transition ost-color ost-padding ost-border" href="#">Color - Padding - Border</a></p>

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

CSS transitions


About the author

Valentín creates beautiful designs from amongst the tequila plants of Jalisco, Mexico. You can see Valentín's design work all over this site and you can often find him helping members in support.