CSS 3

CSS 3 transition

Written by Saiful Islam

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:

css transition property

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:

transition property in css

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:

transition property in css with delay

The transition-delay property:

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

Example:

Output:

transition property in css with long delay

transition property in css with long delay

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.                     🙂 🙂

About the author

Saiful Islam

1 Comment

  • Hi,
    I need to have more information for using different fonts to beautify my own site… Can you please describe more :)..
    Thanks.

Leave a Comment