CSS: Why do on hover animations stop when hovering ceases?

Question

Take the below CSS

.button {
  width: 100px;
  height: 100px;
  transition: transform .7s ease-out;
}

.button:hover {
  transform: scaleX(5);
  transition: a