CSS Transition

CSS transitions provide a way to control animation speed when changing CSS properties. Instead of having property changes take effect immediately, you can cause the changes in a property to take place over a period of time.

div {
  width: 300px;
  height: 200px;
  background: yellow;
  transition: width 5s;
}

div:hover {
  width: 300px;
}

CSS Transition-Properties

Following are the properties:

• transition
• transition-delay
• transition-duration
• transition-timing-function

Transition-Delay

Transition-delay property specifies a delay (in seconds) for the transition effect.

div {
  transition-delay: 5s;
}

Transition Duration

Transition specifies the duration over which transitions should occur.

div {
  transition-duration: 3s;
}

Transition Timing Function

Transition timing function have same speed from start to end

div {
   
     transition-timing-function: linear;
}