Transition

A trasition is usually trigger by user interaction like hover or focus, it can also be triggered programmatically using javascript by adding or removing classes.

A transition allows you to change property values smoothly over a specified duration.

button {
  background-color: gray;
  transition: background-color 0.3s ease-in-out;
}

button:hover {
  background-color: red;
}

Transform multiple property values:

button {
  background-color: gray;
  transition: all 0.3s ease-in-out;
}

button:hover {
  background-color: red;
  transform: scale(1.5);
}