CSS3 Transition

# CSS3 Transitions

« Previous
Next Chapter »

## CSS3 Transitions

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

Mouse over the element below:

CSS3
Transition

## Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Numbers followed by -webkit-, -moz-, or -o- specify the first version that worked with a prefix.

Property |  |  |  |  |
--- | --- | --- | --- | --- | ---
transition | 10.0 | 26.0 4.0 -webkit- | 16.0 4.0 -moz- | 6.1 3.1 -webkit- | 12.1 10.5 -o-
transition-delay | 10.0 | 26.0 4.0 -webkit- | 16.0 4.0 -moz- | 6.1 3.1 -webkit- | 12.1 10.5 -o-
transition-duration | 10.0 | 26.0 4.0 -webkit- | 16.0 4.0 -moz- | 6.1 3.1 -webkit- | 12.1 10.5 -o-
transition-property | 10.0 | 26.0 4.0 -webkit- | 16.0 4.0 -moz- | 6.1 3.1 -webkit- | 12.1 10.5 -o-
transition-timing-function | 10.0 | 26.0 4.0 -webkit- | 16.0 4.0 -moz- | 6.1 3.1 -webkit- | 12.1 10.5 -o-

## 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;
}
Try it yourself »

Note: When the cursor mouse out of the element, it gradually changes back to its original style.

## 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;
}
Try it yourself »

## 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;
}
Try it yourself »

## 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

« Previous
Next Chapter »

### WEB HOSTING

UK Reseller Hosting

### WEB BUILDING

FREE Website BUILDER Free HTML5 Templates

### W3SCHOOLS EXAMS

HTML, CSS, JavaScript, PHP, jQuery, XML, and ASP Certifications

### SHARE THIS PAGE

### Color Picker

### HTML/CSS

HTML Tutorial HTML5 Tutorial CSS Tutorial CSS3 Tutorial Bootstrap Tutorial

### JavaScript

JavaScript Tutorial jQuery Tutorial jQuery Mobile Tutorial AngularJS Tutorial AJAX Tutorial JSON Tutorial

### Graphics

Canvas Tutorial SVG Tutorial Google Maps Tutorial

### Server Side

SQL Tutorial PHP Tutorial ASP Tutorial ASP.NET Tutorial VBScript Tutorial AppML Tutorial

### Web

Web Building Web Statistics Web Certification

### XML

XML Tutorial DTD Tutorial Schema Tutorial XML DOM Tutorial XPath Tutorial XSLT Tutorial XQuery Tutorial XSL-FO Tutorial RSS Tutorial WSDL Tutorial

### HTML/CSS

HTML Tag Reference HTML Event Reference HTML Color Reference CSS 1,2,3 Reference Bootstrap Reference

### JavaScript

JavaScript Reference HTML DOM Reference jQuery Reference jQuery Mobile Reference Google Maps Reference

### Server Side

PHP Reference SQL Reference ASP Reference VBScript Reference Razor Reference ASP.NET Reference

### XML

XML DOM Reference XSLT Reference XSL-FO Reference XPath Reference XQuery Reference Schema Reference RSS Reference SVG Reference

### HTML Charsets

HTML Character Sets HTML ASCII HTML ANSI HTML Windows-1252 HTML ISO-8859-1 HTML Symbols HTML UTF-8

### HTML/CSS

HTML Examples CSS Examples

### Browser Scripting

JavaScript Examples HTML DOM Examples jQuery Examples jQuery Mobile Examples AngularJS Examples AJAX Examples

### Server Scripting

PHP Examples ASP Examples VBScript Examples Razor Examples .NET Examples

### XML Languages

XML Examples DTD Examples XML DOM Examples XSL Examples XSLT Examples XPath Examples XQuery Examples Schema Examples RSS Examples SVG Examples