CSS animation not stopping running when ends-CodePudding

I made a button animation with CSS. If the cursor is hover at the button, the button will shrink, and when its not, its gonna grow. However, when you hover at the button, it keeps playing the animation after 2 seconds. Can you help me fix that?

button{
text-decoration: none;
border: none;
padding: 8px 30px;
background-color: green;
color: #fff;
outline: none;
box-shadow: 7px 6px 28px 1px rgba(0, 0, 0, 0.24);
border-radius: 5px;
cursor: pointer;

animation: goForward;
animation-play-state: running;
animation-iteration-count: 1;
animation-duration: 2s;

}

button:hover{
animation: goBack;
animation-play-state: running;
animation-duration: 2s;
animation-iteration-count: 1; 

}

@keyframes goBack{
from{transform: scale(1)}
to{transform: scale(0.72)}
}

@keyframes goForward{
from{transform: scale(0.72)}
to{transform: scale(1)}
}

CodePudding user response：

Better and simple approach is to use transition than animation.

button {
  text-decoration: none;
  border: none;
  padding: 8px 30px;
  background-color: green;
  color: #fff;
  outline: none;
  box-shadow: 7px 6px 28px 1px rgba(0, 0, 0, 0.24);
  border-radius: 5px;
  cursor: pointer;
  transform: scale(1);
  transition: transform ease 2s;
}

button:hover {
  transform: scale(0.72);
}

<button>Click Me</button>