Search within TutorialsPark

CSS3 transition Property


A shorthand to set various transition properties in a single declaration.


Definition and Notes.

1. The CSS3 transition property is a shorthand to set multiple transition properties in a single declaration.

2.Transition instructs the browser to animate changes in CSS properties on an element. Eg: You can animate the size of an element from 100px to 200px in 3seconds.


Syntax:

CSS3 transition property. internetexplorer safari firefox opera chrome

View in Splitscreen»

Code-Editor:

Note-Multiple transitions can be specified using commas.

Property Values

Value Description
transition-property To specify one or more properties that will be transitioned.
transition-duration To specify the duration of the transition.
transition-timing-function To specify the function used to calculte intermediate property values during the transition.
transition-delay To set a delay before the transition starts

Specifications

Specs Value
Name transition
Value <transition> [','<single-tansition>]*
Initial Value see Individual Properties
Applies to all elements, :before and :after pseudo elements
Javascript syntax object.style.transition="height 5s"
Inherited No
Computed Value See Individual Properties
Browser Support internetexplorer safari firefox opera chrome

Related Examples.