CSS 3 transition

Transition:

The transition is the new feature that is introduced by CSS3. The transition means the change of its state. Always remember the hover is the appropriate selector for happening transition of an element. CSS3 transition can change the style of an element and can give a time effect during changing. It has some properties:

•  transition-property
•  transition-duration
•  transition-timing-function
•  transition-delay

The transition-property :

The transition-property specifies the change of the width or height or both of an element.

Example:

Output:

The transition-duration property:

The transition-duration property specifies the time that is taken by an element. The unit of this property is millisecond (ms) or second (s). The initial value is 0. If value is 0 then no time effect is applied.

Example:

Output:

The transition-timing-function:

The transition-timing-function defines the speed of transition.

Some about the value:

value	start	end
linear	normal	normal
ease	Slow -> fast	Fast -> slow
ease-in	slow	normal
ease-out	normal	slow
ease-in-out	slow	cubic-bezier(0.42,0,0.58,1)
cubic-bezier(x,x,x,x)	x	x

 

Example:

Output:

The transition-delay property:

The transition-delay property defines the time after when the transition is occurring.

Example:

Output:

The transition property:

The transition property is the shorthand of all properties of its.

Syntax:

transition: transition-property transition-duration transition-timing-function

transition-delay;

Example:

🙂 🙂                  Copy these code and test yourselves.                     🙂 🙂