How to make transition in CSS 3

What is transition in CSS?

CSS transitions allows you to change property values smoothly, over a given duration.

How to use transition?

In this example we will create Red square.

div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s;
}

The transition effect will start when the specified CSS property (width) changes value.

div:hover {
  width: 300px;
}

That's it. You have sucesfully created a transition.

Thanks for reading :)