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.

transition-property

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;
■ background-color and background-position ■ border-color, border-spacing, and border-width ■ bottom, top, left, and right ■ clip ■ color ■ crop ■ font-size and font-weight ■ height and width ■ letter-spacing ■ line-height ■ margin ■ max-height, max-width, min-height, and min-width ■ opacity ■ outline-color, outline-offset, and outline-width ■ padding ■ text-indent ■ text-shadow ■ vertical-align ■ visibility ■ word-spacing ■ z-index
snippet
#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; 
}
transition-duration

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.

snippet
-webkit-transition-duration: 0.2s; 
-moz-transition-duration: 0.2s; 
-o-transition-duration: 0.2s; 
transition-duration: 0.2s;
transition-timing-function

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 :

ValuesDescription
easestarts slowly, and then goes fast and ends slowly
lineargoes at the same speed from start to end
ease-instart slowly
ease-outends slowly
ease-in-outstarts slowly and ends with a slight speed difference from the ease value
cubic-bezierThe cubicbezier timing function requires four numeric values to calculate the speed of your transition. In fact, all timing function values are defined by using a specific cubic-bezier curve, which is itself defined by four control points—for instance, the ease function is equivalent to cubic-bezier(0.25, 0.1, 0.25, 1.0).

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

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

Other examples:-

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

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:

snippet
-webkit-transition-delay: 250ms; 
-moz-transition-delay: 250ms; 
-o-transition-delay: 250ms; 
transition-delay: 250ms;
Negative Delays

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.

transition

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
snippet
#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; 
}
Multiple Transitions

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.

snippet
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:

snippet
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.

snippet
-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.

Related Tutorial
Follow Us
https://www.facebook.com/Rookie-Nerd-638990322793530 https://twitter.com/RookieNerdTutor https://plus.google.com/b/117136517396468545840 #
Contents