Sunny Books
What we have

CSS3 transitions: syntax and examples

Transitions is a new feature of CSS3, which allows CSS properties to change smoothly from one value to another over a given duration rather than happening instantaneously as is the normal behaviour. Transition effects can be applied to a wide variety of CSS properties, including background-color, width, height, opacity, and many more.

Syntax

transition: transition-property, transition-duration, transition-timing-function, transition-delay;

transition-property: Specifies the name of the CSS property to which the transition is applied

transition-duration: Defines the length of time that a transition takes. Default 0

transition-timing-function: Describes how the speed during a transition will be calculated. the values include linear, ease, ease-in, ease-out, and easr-in-out, default is "ease".

transition-delay: Defines when the transition will start. Default 0

Browser support

1.0

3.2

4.0

10

10.5

Animatable properties

The W3C has a list of properties that can be animated on the CSS Transitions.

Examples

Basic color transition
Example A shows a basic color transition. Mouse over to see the effect.
div[A] { background-color:#ffb72d; color:#fff;
-webkit-transition: background-color 2s;
-moz-transition: background-color 2s;
-o-transition: background-color 2s;
-ms-transition: background-color 2s;
transition: background-color 2s;}
div[A]:hover { background-color:#35acff;}

Multiple transitions
Example B shows multiple transitions of background-color and height. Mouse over to see the effect.
div[B] { background-color:#ffb72d; color:#fff; width:200px; height:80px;
-webkit-transition: height 3s linear, background-color 2s ease 1s;
-moz-transition: height 1s linear, background-color 2s ease 1s;
-o-transition: height 1s linear, background-color 2s ease 1s;
-ms-transition: height 1s linear, background-color 2s ease 1s;
transition: height 1s linear, background-color 2s ease 1s;}
div[B]:hover { height:120px; background-color:#35acff;}

Example C shows multiple transitions of background-color and height. Mouse over to see the effect.
div[C] { width:200px; height:150px; position:relative;}
div[C] img { position:absolute; top:0; left:0; width:200px; height:150px;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
-ms-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;}
div[C] img[cat]:hover { opacity:0;}

SUNWEB EXPERT