CSS3 Transition

## CSS Basic

CSS HOME CSS Introduction CSS Syntax CSS Id & Class CSS How To CSS Backgrounds CSS Text CSS Fonts CSS Links CSS Lists CSS Tables

## CSS Box Model

CSS Box Model CSS Border CSS Outline CSS Margin CSS Padding

## CSS Advanced

CSS Grouping/Nesting CSS Dimension CSS Display CSS Positioning CSS Floating CSS Align CSS Pseudo-class CSS Pseudo-element CSS Navigation Bar CSS Image Gallery CSS Image Opacity CSS Image Sprites CSS Media Types CSS Attr Selectors

## CSS3 Tutorial

CSS3 Introduction CSS3 Borders CSS3 Backgrounds CSS3 Gradients CSS3 Text Effects CSS3 Fonts CSS3 2D Transforms CSS3 3D Transforms CSS3 Transitions CSS3 Animations CSS3 Multiple Columns CSS3 User Interface CSS Summary

## CSS Examples

CSS Examples CSS Quiz CSS Certificate

## CSS References

CSS Reference CSS Selectors CSS Reference Aural CSS Web Safe Fonts CSS Units CSS Colors CSS Color Values CSS Color Names CSS Color HEX

# CSS3 Transitions

« Previous
Next Chapter »

## CSS3 Transitions

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

Mouse over the element below:

CSS3
Transition

## Browser Support

Property | Browser Support
--- | ---
transition |  |  |  |  |

Internet Explorer 10, Firefox, Chrome, and Opera supports the transition property.

Safari requires the prefix -webkit-.

Note: Internet Explorer 9, and earlier versions, does not support the transition property.

Note: Chrome 25, and earlier versions, requires the prefix -webkit-.

## How does it work?

CSS3 transitions are effects that let an element gradually change from one style to another.

To do this, you must specify two things:

- Specify the CSS property you want to add an effect to
- Specify the duration of the effect.

## Example

Transition effect on the width property, duration: 2 seconds:

div
{
transition: width 2s;
-webkit-transition: width 2s; /* Safari */
}

Note: If the duration is not specified, the transition will have no effect, because default value is 0.

The 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 a transitional effect for more than one style, add more properties, separated by commas:

## Example

Add effects on the width, height, and the transformation:

div
{
transition: width 2s, height 2s, transform 2s;
-webkit-transition: width 2s, height 2s, -webkit-transform 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-property | Specifies the name of the CSS property to which the transition is applied | 3
transition-duration | Defines the length of time that a transition takes. Default 0 | 3
transition-timing-function | Describes how the speed during a transition will be calculated. Default "ease" | 3
transition-delay | Defines when the transition will start. Default 0 | 3

The two examples below sets all transition properties:

## Example

Use all transition properties in one example:

div
{
transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;
/* Safari */
-webkit-transition-property:width;
-webkit-transition-duration:1s;
-webkit-transition-timing-function:linear;
-webkit-transition-delay:2s;
}
Try it yourself »

## Example

The same transition effects as above, using the shorthand transition property:

div
{
transition: width 1s linear 2s;
/* Safari */
-webkit-transition:width 1s linear 2s;
}
Try it yourself »
« Previous
Next Chapter »

## Your suggestion:

Your E-mail (optional):

Page address:

Description:

Close [X]

## Thank You For Helping Us!

Your message has been sent to W3Schools.

Close [X]
Search w3schools.com:

## WEB HOSTING

Best Web Hosting UK Reseller Hosting Wow! $5 SSD Hosting

## WEB BUILDING

Download XML Editor
FREE Website BUILDER FREE Website Creator

## WEB RESOURCES

Web Statistics Web Validation

## SHARE THIS PAGE