Lingulo.com - A resource for web developers


08.04.2013

CSS3 Transitions

GD Star Rating
loading...
In order to view the examples of this blog post you will need to upgrade your browser.

How to use transitions

CSS3 offers a lot of useful new features, one of these features are transitions. Transitions can be used to easily animate effects when changing from one style to another.

Look at the navigation on top of this page. It is not very noticeable but if you look closely you will see that the link does not change its color immediately on mouseover. Instead it nicely blends from one color to the other. By the way this happens with all links on this website.

In order to animate a CSS property we always need an initial state and a final state. The final state could for example be the pseudo-class :hover or could also be defined by a class, which is assigned to an element by javascript. To animate the color of links using transitions, the following code is enough already. Please note that we need to add the prefix -webkit for Safari, the Prefix
-moz for Firefox and the prefix -o for Opera to the CSS rule.

a
{-webkit-transition: color .25s ease-in-out;
-moz-transition: color .25s ease-in-out;
-o-transition: color .25s ease-in-out;
transition: color .25s ease-in-out;
color: #FF4E50;
}

a:hover
{color: #2F9999;}
If you are using CSS3 features several times in your stylesheets, I reccomend using the script Prefix free which automatically adds all the different prefixes to your rules.

Let’s take a closer look at the code. First of all we define the CSS property that we would like to animate. The W3C offers a list specifying the properties which can be animated using transitions. In our case we only want to animate the link color, so we use color. Alternatively we could use all in our example which would animate the color but would also animate any other property that is listed in the W3C specification.

The second value indicates the length of the animation. In our case the links should change its color within 25ms.

The third parameter of the transition property defines our timing function. Say you want the animation to run linear. In that case we would use linear as timing function. Possible values for the timing functions are linear (speed does not change), ease (slow start, then faster and slow end; the animation is a bit faster at the start than at the end), ease-in (slow start, then evenly fast), ease-out (evenly fast, then slow end), ease-in-out (slow start, then faster and slow end).

Instead of using the predefined timing functions we can also create our own. To do so we use cubic-bezier(x1,y1,x2,y2) to define the shape of a Bézier curve, whereby x1 and x2 expect a value between 0 and 1. y1 and y2 can also be higher than 1 or lower than 0 which will then cause sort of a bounce effect. If you are mathematically talented and interested in finding out more about Bézier curves you can find more information here. All the others I recommend using the helpful Ceaser-Tool to generate custom timing functions.

There is one more parameter which we did not use in our example. Using transition-delay we can define a delay before the animation starts. The example below shows that on mouseover the layer will not immediately change its width and background color but the animation will wait 0,5 seconds before starting.



In order to use the delay parameter, we just add it into the transition property as fourth argument or directly use the property transition-delay.

div.transition
{width: 100px;
height: 50px;
background: #FF4E50;
transition: all 2s ease .5s;
-webkit-transition: all 2s ease .5s;
-moz-transition: all 2s ease .5s;
-o-transition: all 2s ease .5s;
}

div.transition:hover
{background: #2F9999;
width: 700px;
}


Let´s look at a second example where we now combine jQuery / Javascript and CSS3 transitions. The aim is to create a div which changes its color and width on mouseover. On mouseout it should then change its height to 350px after one second. Afterwards the layer should be resized to its original width and then to its original height.


#transition
{width: 100px;
height: 50px;
background-color: #FF4E50;
-webkit-transition: height 1s ease 2s;
-moz-transition: height 1s ease 2s;
-o-transition: height 1s ease 2s;
transition: height 1s ease 2s;
}

#transition.transition_class
{height: 350px;
-webkit-transition: background-color 1s ease-in-out, width 1s ease 2s, height 1s ease 1s;
-moz-transition: background-color 1s ease-in-out, width 1s ease 2s, height 1s ease 1s;
-o-transition: background-color 1s ease-in-out, width 1s ease 2s, height 1s ease 1s;
transition: background-color 1s ease-in-out, width 1s ease 2s, height 1s ease 1s;
}

#transition:hover
{height: 50px;
-webkit-transition: width 1s ease, background-color 1s ease-in-out;
-moz-transition: width 1s ease, background-color 1s ease-in-out;
-o-transition: width 1s ease, background-color 1s ease-in-out;
transition: width 1s ease, background-color 1s ease-in-out;
background-color: #2F9999;
width: 600px;
}


Let´s have a closer look at our code. We define a fixed height and width as well as background color to our #transition layer. We also define a transition property which I will talk about a bit later.

On mouseover the CSS rule #transition:hover comes into play. We define that the background color and width should change and specify those two parameters in the transition property. To do so we simply write the two parameters comma separated into the property. According to the rule the width and background color should change within one second.

As another property we also set the height to 50px. The reason why we do this is easy to explain. Additionally to the #transition:hover property we also want a second CSS rule to take effect which is the rule .transition_class. This rule is added to the layer on mouseover via jQuery and removed on mouseout after two seconds.

$(document).ready(function()
{$("#transition").hover(function()
{$("#transition").addClass("transition_class");}, function()
{window.setTimeout(function()
{$("#transition").removeClass("transition_class");}, 3000);
});
});

In this rule the height is set to 350px and defined in the transitionproperty to be one second long and have a delay of one second. If we wouldn´t have defined the height in our #transition:hover rule already, the layer would change its height to 350px immediately on mouseover. But since we did define it before, the previous height of 350px is overwritten. Note therefore that it is important to pay attention to the order in which you define your CSS rules!

The animation executes in the following way: on mouseover both the rule #transition:hover as well as the rule .transition_class take effect. Since the #transition:hover rule is defined after the .transition_class rule inside our CSS file and since both rules have the same specificity, all overlapping rules will be overwritten. In our case this means that on mouseover none of the .transition_class parameters will take effect.

The layer broadens to 600px and changes its background color. As soon as the mouse leaves the layer, the #transition:hover rule will not take effect anymore and the .transition_class rule will take its place. This rule defines that the background color should change within one second, the height should increase to 350px with a delay of one second and the width should be animated after two seconds.

After the layer has reached its original width of 100px the class .transition_class is removed (with jQuery after 3000ms). Now the transition property of the #transition rule will take effect. The height therefore reduces its height to 50px within one second.

Please note: The example above should not be used in a web project like that. The jQuery code was simplified and does not check whether the animation has already finished or not and whether the timeout is still running or not. The consequence is that on multiple mouseovers the animation will not run controlled anymore.



As an alternative to the JavaScript/jQuery solution we could realize the example above with CSS3 features only. To do so we would need to use CSS3 animations and create keyframes for the animation. If you want to find out more about CSS3 animations read this.

Should I use CSS3 transitions?

Now that I have tried to give you an overview over the transition property the question is whether and in what case to use it.

Browser Support of CSS3 Transitions

Browser Support of CSS3 Transitions

CSS3 transitions offer the possibility to easily create animations without the need of JQuery or Flash. Unfortunately they are not supported by all browser versions. The Internet Explorer for example can display transitions only from version 10 on.

You can not say in general whether transitions should be used or not. Do you want to animate a certain transition correctly nevertheless which browser is used or is the transition important for the functionality of the website you will need to use Javascript / JQuery whether one wants to or not – at least to support some browser versions. However if the transition is used only as a nice addition (eg animating the transition of the link color) their use is appropriate. In this case, older browsers will not show the animation but this has no disadvantages for the function of the page. The hover effect of the link would then be shown just like a usual CSS hover effect without animation.

CSS3 Transitions, 9.6 out of 10 based on 25 ratings
One comment

Leave a comment