HTML

html content help to improve the coding

Wednesday, 29 October 2014

CSS3 Transitions

CSS3 Transitions

With CSS3, we can add an effect when changing from one style to another, without using Flash animations or JavaScripts.

What Are CSS3 Transitions?

CSS3 transitions are effects that let an element gradually change from one style to another.
To do this, you must specify two things:
  • the CSS property you want to add an effect to
  • the duration of the effect

Example

Add a transition effect on the width property, with a duration of 2 seconds:
div {
    -webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
    transition: width 2s;
}

Note: If the duration part is not specified, the transition will have no effect, because the default value is 0.
The transition effect will start when the specified CSS property changes value. A typical CSS property change would be when a user mouse-over an element:

Example

Specify :hover for <div> elements:
div:hover {
    width: 300px;
}


Multiple Changes

To add transition effects for more than one CSS property, separate the properties with a comma:

Example

Add transition effects on width, height, and transformation:
div {
    -webkit-transition: width 2s, height 2s,-webkit-transform 2s;  /* For Safari 3.1 to 6.0 */
    transition: width 2s, height 2s, transform 2s;
}




More Transition Examples

The example below uses all the four transition properties:

Example

div {
    /* For Safari 3.1 to 6.0 */
    -webkit-transition-property: width;
    -webkit-transition-duration: 1s;
    -webkit-transition-timing-function: linear;
    -webkit-transition-delay: 2s;
    /* Standard syntax */
    transition-property: width;
    transition-duration: 1s;
    transition-timing-function: linear;
    transition-delay: 2s;
}

Try it yourself »
The same transition effects as the example above. However, here we are using the shorthand transition property:

Example

div {
    -webkit-transition: width 1s linear 2s; /* For Safari 3.1 to 6.0 */
    transition: width 1s linear 2s;
}




CSS3 Transition Properties

The following table lists all the transition properties:
Property Description CSS
transition A shorthand property for setting the four transition properties into a single property 3
transition-delay Specifies when the transition effect will start 3
transition-duration Specifies how many seconds or milliseconds a transition effect takes to complete 3
transition-property Specifies the name of the CSS property the transition effect is for 3
transition-timing-function Specifies the speed curve of the transition effect 3

1 comment: