The Transition Property in CSS3 With Examples

css transition

CSS3 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:

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

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:

{codecitation css}.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;
}{/codecitation}

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:

{codecitation html}<link type=”text/css” href=“path/to/your/file.css” rel=”stylesheet” />{/codecitation}

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

{codecitation html}<p><a class=”ost-transition ost-opacity” href=”#”>Opacity</a></p>{/codecitation}

Color. Use class ost-color

{codecitation html}<p><a class=”ost-transition ost-color” href=”#”>Color</a></p>{/codecitation}

Padding. Use class ost-padding

{codecitation html}<p><a class=”ost-transition ost-padding” href=”#”>Padding</a></p>{/codecitation}

Border. Use class ost-border

{codecitation html}<p><a class=”ost-transition ost-border” href=”#”>Border</a></p>{/codecitation}

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

{codecitation html}<p><a class=”ost-transition ost-color ost-padding ost-border” href=”#”>Color – Padding – Border</a></p>{/codecitation}

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

CSS transitions

Instructor

  • Valentin discovered Joomla in 2010, and since then he has considered it as the best CMS. Valentin has been coding extensions and templates for Joomla for many years and truly enjoys helping people build their own websites with Open Source tools. He lives in San Julián, Jalisco, México.

0 0 votes
Blog Rating
Subscribe
Notify of
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x