Endless text scale css animation-CodePudding

Im trying to make effect of endless text scale animation. How do I get rid of jump between 50% and 51%? I would like to apply that state change immediately and then continue to scale in from 0 to 1.

So the effect should be be: text gradually scales to 300 and then jumps to 0 and scales to 300 gradually again

div {
  display: flex;
  height: 100vh;
  width: 100vw;
  align-items: center;
  justify-content: center;
}

p:hover {
  padding: 40px;
  display: inline-flex;
  animation: endless-in infinite 4s linear;
}

@keyframes endless-in {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(300);
    opacity: 0;
  }
  51% {
    transform: scale(0);
    opacity: 1;
  }
  100% {
    transform: scale(1);
  }
}

<div>
  <p>some text</p>
</div>https://stackoverflow.com/questions/ask#

CodePudding user response：

How do I get rid of jump between 50% and 51%?

Close the "gap" of one percent between those two steps, by using a smaller value for the second one - instead of 51%, make that 50.001%.

Depending on your animation duration, that one percent can be a "long" time, and in that time you will see the specified property transition between the two values (same as happened between 0% and 50% to begin with, only there you wanted to see the effect.)

Decimals are allowed for the percentages, and help to keep that gap minimal in a case like this.