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