Tangled in Design Branding Decoration

Tangled in Design is the work of Stephen Greig, currently a Web Designer/Front-end guy in Nottingham, UK.

Read more about Stephen

I wrote a book on advanced CSS3, published by John Wiley & Sons. You should totally buy it…

Buy my book: CSS3 Pushing the Limits

Tangled in Design is the work of Stephen Greig, currently a Freelance Web Designer/Front-end guy in Nottingham, UK.

Stephen specialises in design and front-end development, notably HTML5 & semantics, scalable CSS, along with particular expertise in the experimental, cutting edge CSS3 modules.

Stephen's been in the industry as a full-time professional for over 5 years, during which he has graduated with a First Class BA Honours degree, written a 380 page book on advanced CSS3 and held Senior positions in both New Zealand and South Wales.

He has since moved back to his home in Nottingham where he now works as a Senior Web Designer.

Stephen loves sports and is a keen follower of Hereford FC as well as the Welsh Rugby Union and Football teams.

He also has a deep passion for music and boasts an extremely varied taste, as is evident by his last.fm profile.

He also likes swearing and thinks that talking in third person is cool as fuck.

Want to know more? Tweet me. I'm nice.

Slide Back

CSS3 Transitions: The transition-timing-function Property Explained

Tweet

Following on from last weeks article on CSS3 transitions, which described the ease of applying them, this week we’re going to focus our attention on the aspect of transitions that is the most difficult to understand and the least self-explanitory; the transition-timing-function property.

Just to remind ourselves, here are the CSS3 transition properties:

-moz-transition-property:border, opacity;
-moz-transition-duration:0.4s;
-moz-transition-timing-function:ease;

For more information, take a look at last weeks post which delves much deeper into CSS3 transitions and how they work.

Okay, back to the transition-timing-function property…

What is it?

The transition-timing-function property describes the varied acceleration of the animation; it denotes where the animation speeds up and slows down over the specified duration of the transition.

The Values

There are 5 pre-defined values for the transition-timing-function property, however in reality, the value is limitless as you can use the cubic-bezier timing function to set your own points and create your own custom bezier curve. But we’ll get onto that later.

For now, we’ll be looking at the pre-defined values, which are basically pre-defined bezier curves. These are:

Each of these values cause a different effect in terms of speed variation during the transition. We’re going to look at each of these effects now and see examples of them in action – but bear in mind the examples will only work in browsers that support CSS3 transitions.

CSS3 Transitions Browser Support

Ease

The Effect

The ease value is the default transition-timing-function value. It very quickly eases the transition into full speed before easing out slightly more gradually.

What it looks like

The Bezier Curve

ease is the equivalent of cubic-bezier(0.25, 0.1, 0.25, 1.0)
ease

Linear

The Effect

The word linear refers to straight lines, which pretty much explains the effect the linear value has on a transition. It maintains one, contast speed throughout the animation with no period of acceleration or deacceleration.

What it looks like


The linear transition can sometimes appear slower than the other timing-functions due to the lack of any easing periods.

The Bezier Curve

ease is the equivalent of cubic-bezier(0.0, 0.0, 1.0, 1.0)
linear

Ease in

The Effect

The ease-in value is self-explanitory. It slowly eases into full-speed which is maintained to the finish.

What it looks like

The Bezier Curve

ease is the equivalent of cubic-bezier(0.42, 0, 1.0, 1.0)
ease-in

Ease out

The Effect

Again, self-explanitory and as you would expect, the complete opposite effect of the ease-in value. ease-out begins at full-speed before easing out to the conclusion of the transition.

What it looks like

The Bezier Curve

ease is the equivalent of cubic-bezier(0, 0, 0.58, 1.0)
ease-out

Ease in-out

The Effect

This value is similar to the default ease value; however, this value eases in and out at the same rate, whereas ease begins with a stronger acceleration.

What it looks like

The Bezier Curve

ease is the equivalent of cubic-bezier(0.42, 0, 0.58, 1.0)
ease-in-out

Cubic Bezier

You may have noticed the cubic-bezier function at the foot of each of the above examples. These numeric values actually define the points of acceleration; the 5 pre-defined values we have discussed are essentially shortcuts for writing out the bezier curve units.

This function can be used to make your own custom timing-functions, which you can play around with in this fantastic demo page by Mark MacKay, which I must hasten to add are where the above bezier-curve screenshots have been snapped from!

I hope you enjoyed this post and are now capable of much more accurately achieving the transition you desire! Feel free to share and/or leave a comment below.

About Stephen Greig

Stephen Greig is a 25 year old Freelance Web Designer/Front-end guy, currently living in Nottingham, UK. Stephen is also the creator of messivsronaldo.net and author of CSS3 Pushing the Limits, a book on advanced CSS3. You should follow him on Twitter where he talks about the web, sports, music and swears a lot. Stephen's also on Google+ if that's more your bag.