How to use css transition property? CSS Tutorial 29

 

  CSS Transition Property

1. Introduction to CSS transition property
2. The syntax of CSS transition property
3. Example of CSS transition property

Introduction to CSS transition Property

A transition property has been introduced in CSS3 through which you can perform the transition. This property is a part of the animation in CSS.

Transition is the process in which an element changes from one state to another. For example, when you hover on an element, its state changes and its color also change. 

Normally this transition is so fast that the user does not know. But by transition property, you can control the speed and duration of the transition.

It is not necessary to use a hover and pseudo-classes to perform a transition. Pseudo-classes works just as a trigger for the transition. You can perform a transition without them too. In such a situation, the transition will start after page loading according to defined delay time.

Transition is a shorthand property in CSS by which the below properties are defined at once.

• transition-property - This property is used to define the property on which transition will apply.
• transition-duration - This property is defined by how long the transition will be completed.
• transition-timing-function - By this property, you can define how the transition will be.
• transition-delay - By this property, you can define how long the transition will start after the delay.

You can also define different values for the transition by the above properties. But when you use them, the appropriate value of the transition-duration property must be defined otherwise, the transition effects will not be displayed.

Syntax of CSS transition Property

The general syntax of the CSS transition property has been given below.

transition: property duration timing-function delay; 

As you can see in the above syntax, the transition property is defined by four values. These are explained further in the details.

property

This value represents the property of the element which will change during the transition. For example, if the width of the element is changed from 30 pixels to 70 pixels during the transition, So in the form of this value, you will define the width property.

Normally you can define all the property as this value but some properties like display, position, font-family can't be defined. 

You can also define all and none keywords as value. When you define this value as all keyword, then the transition is applied to all the properties of that element. When you define value none, the transition does not apply to any property. You can also define this value separately by the transition-property property.

duration

By the duration value, that time is defined in which the transition complete. It is defined in seconds and milliseconds.

When you define the time in seconds, then you put “s” after the time and when you define the time in milliseconds, then apply “ms” after the time.

transition-timing-function

Transition timing function value defines the speed of transition. This value is defined as a function that defines how the speed will be less or more during the transition. As this value, you can define the functions whose are given below.

• ease - This is the default value. This value tells that the transition will start slowly in the beginning and then its speed will increase and at the end, it will gradually slow down.
• linear - This value tells that transition will be the same speed from start to finish.
• ease-in - This value tells you that the transition will start slowly and its speed will increase.
• ease-out - This value tells that the transition will end slowly.
• ease-in-out - This value tells you that the transition will start slow and end slow.
• step-start - This value tells that at the beginning of the transition there will be 1 interval.
• step-end - This value states that there will be 1 interval at the end of the transition.
• steps (int, start | end) - With this function value you can define the number of intervals in the first argument and in the second argument, start or end is defined, which states that the intervals will be in start or end. 
• cubic-bezier (n, n, n, n) - this function value can define its custom speed.

delay 

This value defines how long the transition will occur after the transition trigger. You can define this value in seconds or milliseconds like the transition duration.

As I mentioned before, the trigger can be anything like page load or any pseudo-class, etc.

To define the transition for more than one property, you separate these values by the comma and rewrite it.

Example of CSS transition Property

The CSS transition property has been explained by the below example.

<!DOCTYPE html>

<html>

<head>

  <title> CSS Transaction Example </title>
<style> 
div{
  width: 200px;
  height: 200px;
  background: blue;
  color: white;
    font-weight: bold;
      text-align: justify;

  transition: width 10s;  
}
div:hover{
  width: 600px;
}
</style>
</head>
<body>
<h1> CSS Transition Property </h1>
<div>
<p> If you will hover over the div element you can see the transition effect. </p>
</div>

</body>

</html>

In the above example, when the page is initially loaded, the width and height of blue div are 200 pixels.

The above code will generate the below output.

As soon as the user moves his cursor over the blue div, the transition property becomes activate and the size of the div gradually increases to 600 pixels width.

The CSS transition-delay property has been explained by the below example.

<!DOCTYPE html>

<html>

<head>

  <title> CSS Transaction-Delay Example </title>

<style> 
div {
  width: 200px;
  height: 200px;
  background: green;
  color: white;
  font-weight: bold;
  text-align: justify;

  transition-property: width;  
  transition-delay: 2s;
}
div:hover {
  width: 600px;
}
</style>
</head>
<body>
  <h1> Transition-Delay Property</h1>
<div>  
  <p> If you will hover over the div element, you will see the transition effect that will wait 3 seconds before starting</p>
</div>

</body>

</html>

The above code will generate the below output.

As soon as the user moves his cursor over the green div, the transition property becomes activate and the size of the div gradually increases to 600 pixels width 2 seconds delay time.

The CSS transition-duration property has been explained by the below example.

<!DOCTYPE html>

<html>

<head>

 <title> CSS Transaction-Duration Example </title>
<style> 
div {
  width: 200px;
  height: 200px;
  background: hotpink; 
  color: white;
  font-weight: bold;
  text-align: justify;
   
  transition-property: width;
  transition-duration: 5s;
}

div:hover {
  width: 600px;
}
</style>
</head>
<body>
<h1> Transition-Duration Property</h1>
<div>
<p> If you will hover over the div element, you will see the transition effect that will take 5 seconds from start to end. </p>
</div> 

</body>

</html>

The above code will generate the below output.

As soon as the user moves his cursor over the hotpink div, the transition property becomes activate and the size of the div gradually increases to 600 pixels width to take 5 seconds time.

The CSS transition-property property has been explained by the below example.

<!DOCTYPE html>

<html>

<head>

 <title> CSS Transaction-Property Example </title>
<style> 
div {
  width: 50px;
  height: 50px;
  background: green;
  color: white;
  font-weight: bold;
  text-align: justify;
  
  transition-property: width, height;
  transition-duration: 5s;
}

div:hover {
  width: 500px;
  height: 500px;
}
</style>
</head>
<body>

<h1> Transition-Property Property </h1>
<div>
<p> If you will hover over the div element you can see the transition effect. </p>
</div> 

</body>

</html>

The above code will generate the below output.

As soon as the user moves his cursor over the green div, the transition property becomes activate and the size of the div gradually increases to 500 pixels width and height simultaneously.

The CSS transition-property property has been explained by the below example.

<!DOCTYPE html>

<html>

<head>

 <title> CSS Transition Property Example </title>
<style>
#mbhDiv
{
   width: 100px;
   height: 100px;
   background-color: red;
   transition-property: width 5s ease 0s, height 5s ease 0s;
}
#mbhDiv:hover
{
    width: 500px;
    height: 500px;
}
</style>
</head>
<body>
<h1> CSS Transition Example </h1>
<div id="mbhDiv"> </div> 

</body>

</html>

The above code will generate the below output.

As soon as the user moves his cursor over the green div, the transition property becomes activate and the size of the div gradually increases to 500 pixels width and height simultaneously.

The CSS transition-timing-function property has been explained by the below example.

<!DOCTYPE html>

<html>

<head>

 <title> Transition-Timing-Function Property Example </title>
<style> 
div {
  width: 100px;
  height: 25px;
  background: blue;
  color: white;
  font-weight: bold;
  transition: width 2s;
}

/* Standard syntax */
#div1 {
transition-timing-function: linear;
}
#div2 {
transition-timing-function: ease;
}
#div3 {
transition-timing-function: ease-in;
}
#div4 {
transition-timing-function: ease-out;
}
#div5 {
transition-timing-function: ease-in-out;
}

div:hover {
  width: 500px;
}
</style>
</head>
<body>

<h1> Transition-Timing-Function Property </h1>

<div id="div1"> Linear </div> <br>
<div id="div2"> Ease </div> <br>
<div id="div3"> Ease-in </div> <br>
<div id="div4"> Ease-out </div> <br>
<div id="div5"> Ease-in-out </div>
<p> If you will hover over the div element you can see the transition effect.</p> 

</body>

</html>

The above code will generate the below output.

           <<-- PREVIOUS                                                            NEXT -->>