To make a transition work, we need to specify the CSS property with an effect we want to attach to it, and the duration of the effect. A shorthand property that may be used to cover all transition properties is called a transition property, and it is used to replace these full profile properties:
transition: property duration timing-function delay | initial | inherit;
- transition-property; Declares the property's name which an effect or effects will take place on.
- transition-duration; Sets the duration of an effect in seconds or miliseconds.
- transition-timing-function; The timing-function defines the speed curve of the effect's development
- transition-delay; Delays the start of a transition by 'x' seconds or miliseconds
- initial (default value), inherit
The transition-property can be used to achieve multiple changes as well. In such a case properties have to be separated by a comma, as shown below:
transition: width 8s, height 6s, transform 2s;
CSS3 transitions example: