BASEWEBMASTER

Brought To You By
Tomlin Ventures Ltd

Transition Property CSS3

Using The Transition Timing Property In CSS3

CSS3 Has brought with it many new and interesting properties, one of my favorites has to be the transition property.

To put it very simply the transition property gives a webmaster the power to change the transitional speed of and element from one style to another. An example of an element changing from one style to another would be a hyperlink which changes colour when a user hovers his or her pointer over the link. Obviously this is a very simple example but you get the idea.

Now imagine that you could slow down this change and thereby create an effect where the first colour merges into the second colour. Take a look at the link below, hover your mouse over it, this is totally CSS.

Example Link

Pretty cool hey, I should mention that you need to be using an up to date browser to see these effect. Opera is very good, as is chrome and firefox 4.0 and above will all display this properly.

And here is the CSS code, notice the transition properties. There as multiple variations to cover all browsers but I guess eventually you will need only the last line transition: until then we must include them all.

CSS
a 	{
	text-align: center; 
	display: block; 
	font-size: 40px; 
	line-height: 60px; 
	border: 1px solid rgba(0,0,0,0.4); 
	background: #B9FFBD; 
	-webkit-transition: all 2s ease-in-out; 
	-moz-transition: all 2s ease-in-out; 
	-o-transition: all 2s ease-in-out; 
	transition: all 2s ease-in-out;
	}

a:hover {
	color: #000; 
	background:#FFB9B9;
	}

Okay, so you get the idea. Now lets look at the individual components of the transition property in more depth.

transition-property

The transition-property property can take one of three forms all, none or a commer seperated list of properties.

What you are doing here is defining which, if any; of the properties the transition will apply to. I.e. a value of all means all properties that can be transitioned will be. A value of none means no properties will transition, and a list of values will simple apply the transition to the properties listed.

transition-duration

Self explanatory really, this property define the time taken in seconds to make the transition from style A to Style B. The value must be a positive number as negative number will be treated as zero and therefore the transition will be immediate. Also the value should be followed by an s presumable meaning seconds.

transition-delay

Similar in format to the transition-duration this value defines in seconds the delay before the transition starts. Unlike transition-duration the value can be negative, the effect of which is that the transition will occur as if started the defined number of second before the activation actually occured. I.e. the transition will start part way through.

transition-timing-function

The transition-timing-function is by far the most unique property, it defines a varying transition rate from style A to style B. There are some predefined values shown below which should better explain this property.

Hover Your mouse over the box below to see how the timming function can change the way a transition behaves.

ease
linear
ease-in
ease-out
ease-in-out
cubic-bezier

Notice how different values cause the effects to transition at different rates, the whole process in the above example will always take 5 seconds from left to right the difference is in the varying rate that the transition occurs over this time.

This property uses a simple mathmatical function to create something called a Bezier curve, its not particularly important to understand the Bezier curve as in most case the predefined values shown above will sufficient. The final value shown above the cubic-bezier does allow the generation of your own curves, the format is as shown below.

CSS
transition-timing-function: cubic-bezier(X1,Y1,X2,Y2);

Those familiar with cubic bezier curves, the first and forth cordinates are the start and end points of the style change. The coordinates used by the above function refer to the second and third points and each should take a value between zero and one.

Transition Shorthand

As with most CSS properties you can use a shorthand sytax to include all the above properties and keep code length down. The format is as shown below.

CSS
transition: 
transition-property 
transition-duration 
transition-timing-function 
transition-delay;

webkit - moz - o

As with most of the newer CSS3 properties each browser currently has its own syntax for the above values. They can be acheived by simply adding -webkit- -moz- and -o- to any of the properties mentioned above. An example for the shorthand transition property would be.

CSS
-webkit-transition: all 2s ease-in-out; 
-moz-transition: all 2s ease-in-out; 
-o-transition: all 2s ease-in-out; 
transition: all 2s ease-in-out;

This will cover all compatable browsers.

Thats about it for the transition property, personally I think it will become massively usefully for CSS designers and recommend playing around with it for a few hours. Also check out the transformation article as these to properties paired together make for some outstanding effects.

Share to Facebook Share to Twitter Digg This Stumble It Share to Reddit Share to Delicious Technorati LinkedIn Google Buzz Blogger More...

blog comments powered by Disqus