Transitions

A transition makes a property change happen gradually instead of instantly. You name the property, a duration, and an optional timing style.

• transition-property: what to animate
• transition-duration: how long it takes
• The shorthand combines them, like transition: all 0.3s ease

.box {
  transition: background 0.4s ease;
}
.box:hover {
  background: #37b24d;
}