CSS Transitions

CSS Transitions

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

Transition Effect

To create a transition effect, you must specify two things:

• The CSS property you want to add an effect to
• The duration of the effect

Specify the Speed Curve

The transition-timing-function property specifies the speed curve of the transition effect.

• ease - specifies a transition effect with a slow start, then fast, then ends slowly (this is default)
• linear - specifies a transition effect with the same speed from start to end
• ease-in - specifies a transition effect with a slow start
• ease-out - specifies a transition effect with a slow end
• ease-in-out - specifies a transition effect with a slow start and end

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

div:hover {
  width: 300px;
}