CSS3 Transitions

Why are CSS3 Transformations useful? Well using these hard shells you can now build functionality that you would have to normally use Javascript or Flash Animation. Saving you some unnecessary files and more importantly load time. Using CSS3 Transitions you can add an effect when changing from one style to another.

Demo: Hover over this magic!


div {
     width: 100px;
     transition: width 2s }

div:hover { width: 300px; } 

When using CSS3 Transition you must specify the css property you want to add an effect to & the duration of the effect, like shown above.

Browser support CSS3 transitions is not yet fully supported and will not work in Internet Explorer 9 lower. You also have to use prefixes, ( Add wording to the start of your css property) so that it works across all browsers. For Example:

Internet Explorer - -ms-transition: width 2s;
Chrome & Safari - -webkit-transition: width 2s;
Firefox - -moz-transition: width 2s;
opera - -o-transition: width 2s;

Transition is short hand for four different properties that I've listed below:


The order above is the CSS Syntax of the transition property. All properties have different values, below I shall explain the different values.

Transition-delay Values: Time - Is used to declare how many second or milli-seconds before the transition effect begins
Initial - Default ( which is zero )
Inherit - Inherits the CSS property from its parent.

Transition-duration Values: The values are the same as the above however the time means how many seconds or milli-seconds a transition will last for.

Transition-property Values: This useful piece of CSS can alter which CSS properties will change in the transition. For example how we changed the width in the first demo.
This isn't the only value that you can use on this property the others are listed below:

None - No css properties will get changed
All - All properties will change that are declared in the transition
Initial - Default ( which is all )
Inherit - Inherits the CSS property from its parent.

Transition-timing-function Value: This specifies the speed curve of the transition effect in a lot of different ways using different property values that are listed below:

Ease - Specifies a transition slowly then speeds up then to a slow finish
Linear - Same speed throughout
Ease-in - Slow start
Ease-out - Slow finish
Ease-in-out - Slow start and finish.
Cubic bezier - Define your own values from 0 - 1. Format - n,n,n,n
Initial - Default value Ease
Inherit - Inherits the CSS property from its parent.