CSS Transition

Posted on Updated on

CSS Transition

CSS transition is use to change the property value smoothly from one position to another position with use the duration like when we mouse over on the div it increase the size of div and text size and when we mouse out it comes its back stage. It’s the css3 feature which provide us 2 – d animation.

We under stand what is transition but now the question is how to work with it ?

You have to know about two things for transition

  1.  The effect you want to add with CSS property

     2.   The duration which need to complete that effect

The default value of the duration is 0 that’s why no effect will not run until you don’t specify the duration Let see the transition syntax :

Transition : effect duration ;

Example of the transition is

Div # trans _ test _ div

{

Width : 400 p x ;

Height : 300 p x ;

Background – color : red ;

Transition : width 2 s ;

}

Div # trans _ test _ div : hover

{

Width : 500 p x ;

}

The width increase to 500 p x with duration 2 s .

If we want to increase height and width both will use the , to define the next transition. We can increase height and width both.

Let see the syntax :

Transition : effect 2 duration 2 , effect 2 duration 2 ;

Example :

Div # trans _ test _ div

{

Height : 200 p x ;

Width : 200 p x ;

Background – color : red ;

Transition : height 2 s , width 2 s ;

}

Div # trans _ test _ div

{

Height : 400 p x ;

Width : 400 p x ;

}

Transition delay : we can delay the transition execution time with the help of delay sub property .

Syntax :

Transition – delay : 1s ;

Transition with transform : –

Div # trans _ test _ div

{

Height : 200 p x ;

Width : 200 p x ;

Transition : height 2 s , width 2 s , transform 2 s ;

}

Div # trans _ test _ div : hover

{

Height : 400 p x ;

Width : 400 p x ;

transform : rotate(180deg) ;

}

In this when you hover on the div it rotate the div and increase the height and width of the div. With the help of this we can create effective 2 d animation which make our webpage interactive.

For more details and queries please feel free to email, visit or call us. Wishing you the very best for all your future endeavors.

Helpline: 9814666333, 8699444666

Email:info@technocampus.co.in

**************************************************************************************************************

Please fill the FORM and we shall contact you soon.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s