CSS transition - A short hand property

This tutorial guides a designer to complete understanding of css transition. This tutorial covers basics as well as advanced topics and techniques related to transition. Any one whether he is beginner or already familiar with this property can learn it easily and quickly.

Note: Mostly beginners learn only the properties such as animation delay, duration, timing functions but does not proceed to the collaboration of this property with other properties such as transform, scale, opacity, position, color, background and display. Therefore, we'll see the collaboration of these properties with the transition property in the as well.

Example

The position, opacity and color of the text change on hover.

web4college
Try </>

transition definition

transition represents a transition of the CSS property values as a result of some user evernt.


transition property defines the CSS property that we want to change , the duration (transition-duration) during which value change is occuring, the easiness with which the value changes (transition-timing-function), and time offset for the property (animation-delay).


The transition change happens as a result of some event i.e. :hover, :focus, :active.


Why do we use transition property?

Remember that the important factor in transition is time i.e. duration, delay, timing-function. Although we can change the value of a property without using transition property on some user event but the time factor will not be involved in this case.


transition-property

transition-property represents the css property that we want to change on some user event e.g. If we want to change the background-color of an element on hover, we use background-color as value of transition-property.

Example

<style>
div{
transition-property:background-color;	
background-color:red;
}
div:hover{
background-color:green;	
}
</style>
Try </>

In this example, the background color of div element is changing on hovering the mouse.


transition-duration

transition-duration represents the duration during which the property change should occur.

Example

<style>
div{
transition-property:background-color;
transition-duration:3s;
background-color:red;
}
div:hover{
background-color:green;	
}
</style>
Try </>

The transition duration is 3s i.e. it takes 3s to change color from red to green.


transition-delay

transition-delay property represents the time offset after which the transition should start execution.

Example

<style>
div{
transition-property:background-color;
transition-delay:2s;
background-color:red;
}
div:hover{
background-color:green;	
}
</style>
Try </>

In the above example, the execution of transition starts after 2s.


transition-timing-fuction

This property allows the transition property to change speed over the time. For example, if the duration of transition is 4s. We can set the property to change rapidly or slowly either at the start or end.

Example

<style>
div{
  position:relative;
  top:0px;
  transition-timing-function:ease-in;
}
div:hover{
  top:100px;
}
</style>
Try </>

There are four values of transition-timing-fuction such as ease, ease-in, ease-out and ease-in-out.


transition short hand property

The short hand property is a combination of all the properties given above i.e transition property, duration, delay and timing-function.

Example

<style>
div{
transition: background-color 3s 1s ease-in;
background-color:red;
}
div:hover{
background-color:green;	
}
</style>
Try </>

The above syntax represents that the transition-property is background-color, transition-duration is 3s, transition-delay is 1s and transition-timing-function is ease-in.


Browser support

Browsers

google safari internet explorer opera firefox

transition

-webkit-

-ms-

-o-

-moz-

<style>
-webkit-transition:rotate 2s 1;
-moz-transition: rotate 2s 1;
-ms-transition: rotate 2s 1;
-o-transition: rotate 2s 1;
transition: rotate 2s 1;
</style>

The transition property has been covered up completely. If you are an advanced learner and want to get more on transition property, continue to the remaining part otherwise skip to the next tutorial.

transition transform

We have covered up the transition property only. Now we collaborate this property with other properties that are used most often to create animations. For example, If we want to rotate an element on placing the cursor, we use transform property as the value of transition. See the example given below.


There are three type of transform property. And we'll see the collaboration of this transition with the following three different values.

transition rotate

Example

<style>
div{
transition:transform 2s;
transform:rotateZ(0deg);
}
div:hover{
transform:rotate(180deg);	
}
</style>
Try </>

In the above example, we see that a div box rotates by 180 degree from 0 degree on hovering the mouse within a duration of 2s.

transition translate

This value of transform property moves the element along X and Y axes. See the following example that translates the element along X and Y axes.

Example

<style>
div{
transition:transform 2s;
transform:translate(0px, 0px);
}
div:hover{
transform:translate(100px, 100px);	
}
</style>
Try </>

In the above example, the div box moves 100px rightwards and 100px downwards within a duration of 2s on hovering the mouse.

transition scale

The scale value of transition property scales up or scales down the original dimensions by a specific value.

Example

<style>
div{
width:100px;
height:100px;
transition:transform 2s;
}
div:hover{
transform:scale(2, 1.5);	
}
</style>
Try </>

Now we see what happens in this case.

We originally define width and height of 100px and we also define transform property with the scale value.

1.5 and 2 values mean that the width increases by 200% (100px+100px) and height by 150% (100px+50px).


transition hover

:hover is a pseudo class that represents a user event. And transition happens only as a result of some event. See the following example to understand.

Example

<style>
div{
transition:color 3s;
olor:green;
}
div:hover{
color:red;	
}
</style>
Try </>

It means that the color of text changes on hovering the mouse over div element.

There are also other kind of pseudo classes such as :focus, :active.


transition effects

Transition effects are caused by the user events i.e. :hover, :focus, :active. A designer who knows the transition property can make effective transitions.


We have seen a few transition effects above. There are also many other transition effects that have been given below. For example, the changes in properties such as color, background, rotate, translate, scale etc.


transition opacity

Opacity property determines how much opaque an object is? By defalut the opacity of every element is 1 i.e. fully opaque object.

Example

<style>
div{
transition:opacity 2s;
opacity:0.5;
}
div:hover{
opacity:1;	
}
</style>
Try </>

The value of opacity varies from 0 to 1. In the above given example, the opacity value changes from 0.5 to 1 on mouse hover.


transition position

position property represents the position of element. The position may be absolute, relative, fixed or static.


This phenomenon may be considered in another way i.e. we change the value of left property from old to the new one.

Example

<style>
div{
position:absolute;
transition:left 2s;
left:10px;
}
div:hover{
left:50px;
}
</style>
Try </>

In this case, the value of left property changes from 10px to 30px on mouse over.


transition height

It represents the combination of height and transition properties. It means that the height of an element should decrease or increase on placing the cursor over box.

Example

<style>
div{
transition:height 3s;
height:100px;
}
div:hover{
height:50px;
}
</style>
Try </>

The height div element changes from 20px to 50px on mouse hover. We use the height as the value of transition property.


transition color

The collaboration of color of text and transition is also very interesting. In this case, the color of text changes from an old value to a new value.

Example

<style>
div{
transition:color 3s;
color:red;
}
div:hover{
color:green;
}
</style>
Try </>

The color of text is changing from one value to another within a duration of 3s.


background transition

It represents combination of background property with the transition property. Two cases arise for the background transition.

  • background-color transition

  • background-image transition

background-color transition

Firsly we see the background-color transition. In this case, the background color changes from one value to another within specific duration.

Example

<style>
div{
transition:background-color 3s;
background-color:gray;
}
div:hover{
background-color:lightblue;
}
</style>
Try </>

The background-color changes from red to green on mouse over.

background-image transition

In the second case, the old image is replaced with a new value i.e. the value of background-image changes within duration of 4s.

Example

<style>
div{
transition:background-image 3s;
background-image:url("/images/codingb-96x96.png");
}
div:hover{
background-image:url("/images/codingb.png");
}
</style>
Try </>

In this example, the url of the image is changed on mouse hover.


transition display

display property determines the status of an element i.e whether it is present (display) or not (none).

Example

<style>
div p{
display:none;
}
div:hover p{
display:block;
}
</style>
Try </>

In this case, we don't need to use transition property because the value of display property changes suddenly on mouse hover.

The paragraph is not displayed at the start but becomes visible on hovering the mouse over parent element i.e. on div.


Conclusion:

We can collaborate any of the CSS properties with the transition property and can animate the property. We can specify the time duration of property change, delay etc.

Was this article helpful?

 

Email:

Message: