CSS Keyframe Animation pauses in between-CodePudding

Solution:

As proposed from user @Kosh changing

animation-timing-function: linear;

fixed the problem.

Question:

I´m trying to make a coinflip like animation using CSS Keyframes.

@keyframes spin-head {
  0% {
    transform: none;
  }
  50% {
    transform: scale(1.6) rotateX(1080deg);
  }
  100% {
    transform: scale(0.9) rotateX(2160deg);
  }
}


.coin {
    animation: spin-head 3s forwards
}

However as seen in the gif, the coin makes a small pause after reaching 50% before it starts the second part of the animation. Does anyone know why this occurs?

CodePudding user response：

Setting animation-timimg-function: linear; will get rid of this behavior.