Transitions

Transforms can be fun when they really bring your page to life when coupled with a CSS3 transition. A transition is simply an animation from one set of CSS properties to another set over a specific amount of time.

Transitions allow the values of CSS properties to change over time, essentially providing simple animations. For example, if a link changes color on hover, you can have it gradually fade from one color to the other, instead of a sudden change.

Here are the steps to create a simple transition using only CSS:

1. Initial Style - Declare the original state of the element in the default style declaration.
2. Final Style - Declare the final state of your transitioned element; for example, in a hover state.
3. Include the transition functions in your default style declaration, using a few different properties: transition-property, transition-duration, transition-timing-function, and transition-delay.

The important point to note is that the transition is declared in the default state. Currently, the transition functions need to include the vendor prefixes -webkit-, -o-, and -moz-, for WebKit, Opera, and Firefox, respectively.

The transition-property lists the CSS properties of the element that should be transitioned. The different possible values are all (all the properties are animated by a transition), none(no properties are animated by a transition), or a specific property.

Properties that can be made to transition include background, border, and box model properties. You can transition font sizes and weights, but not font families.

transition-property:width;

#ad2 h1 span { 
	-webkit-transition-property: -webkit-transform; 
	-moz-transition-property: -moz-transform; 
	CSS3 Transforms and Transitions 185 
	-o-transition-property: -o-transform; 
	transition-property: transform; 
}

The transition-duration property defines the duration elapsed from the starting state to the new one. It is expressed in seconds, s, or milliseconds, ms.

-webkit-transition-duration: 0.2s; 
-moz-transition-duration: 0.2s; 
-o-transition-duration: 0.2s; 
transition-duration: 0.2s;

The transition-timing-function property defines how the speed will be calculated during the transition and allows for a transition to change speed over its duration.

The possible values are :

Read more about them at http://en.wikipedia.org/wiki/B%C3%A9zier_curve#Cubic_B.C3.A9zier_curves).

transition-timing-function:linear; 
transition-timing-function: cubic-bezier(0,0,1,1);

Other examples:-

-webkit-transition-timing-function: ease-out; 
-moz-transition-timing-function: ease-out; 
-o-transition-timing-function: ease-out; 
transition-timing-function: ease-out;

The transition-delay property defines when the transition will start and is expressed in milliseconds (ms) or seconds (s). (The default value is 0.)

Normally, a transition begins immediately since the the default is 0. To delay the add include the number of milliseconds (ms) or seconds (s) to delay the transition:

transition-delay:2s;

Example:

-webkit-transition-delay: 250ms; 
-moz-transition-delay: 250ms; 
-o-transition-delay: 250ms; 
transition-delay: 250ms;

Giving a negative time delay that is less than the duration of the entire transition will cause it to start immediately, but it will start partway through the animation.

For example, if you have a delay of -500ms on a 2s transition, the transition will start a quarter of the way through, and will last 1.5 seconds. It will create some interesting effects.

The transition property is shorthand for the four transition functions (transition-property, transition-duration, transition-timing-function & transition-delay).

The order of the values is important and must be as follows (though you don’t need to specify all four values):

1. transition-property
2. transition-duration
3. transition-function
4. transition-delay

#ad2 h1 span { 
	-webkit-transition-property: -webkit-transform, color; 
	-moz-transition-property: -moz-transform, color; 
	-o-transition-property: -o-transform, color; 
	transition-property: transform, color; 
	-webkit-transition-duration: 0.2s; 
	-moz-transition-duration: 0.2s; 
	-o-transition-duration: 0.2s; 
	transition-duration: 0.2s; 
	-webkit-transition-timing-function: ease-out; 
	-moz-transition-timing-function: ease-out; 
	-o-transition-timing-function: ease-out; 
	transition-timing-function: ease-out; 
}

The transition properties allow for multiple transitions in one call. For example, if we want to change the color at the same time as changing the rotation and size, we can.

transition-property: transform, color; 
transition-duration: 0.2s; 
transition-timing-function: ease-out;

Specify different durations and timing functions for each property being animated. Simply include each value in a comma-separated list, using the same order as in your transition-property:

transition-property: transform, color; 
transition-duration: 0.2s, 0.1s; 
transition-timing-function: ease-out, linear;

The above properties will apply an ease-out transition over 0.2 seconds to the transform, but a linear transition over 0.1 seconds to the color.

To have multiple transitions when using the transition property, specify all the values for each transition together, and separate each transition with commas:

transition: color 0.2s ease-out, transform 0.2s ease-out;

An example to change both properties at the same rate and delay.

-webkit-transition: all 0.2s ease-out; 
-moz-transition: all 0.2s ease-out; 
-o-transition: all 0.2s ease-out; 
transition: all 0.2s ease-out;

Include the various transition properties to have various transition effects as a comma-separated list, including, at minimum, the transition-property and transition-duration for each.