CODEWITHSUNDEEP
csscss-animations
João Vilaça
João Vilaça

Reputation: 621

CSS keyframes: multiple frames smooth transitions

I have the following keyframe, the problem is that, the animation is not smooth, it stops at 50%, and then goes to 100%. Is there any way to make multiple frames behave like one?

@keyframes orbit_moveY {
  0% {
    top: -4px;
  }

  50% {
    top: 2px;
  }

  100% {
    top: 0;
  }
}

Also, the code for the animation is the following: animation: orbit_moveY 2s linear 0s infinite normal.

edit: the final objective would be the ball to go through this: https://d.pr/FREE/CPxkRR , from right to left, without stoping in the middle (50% on the keyframe)... Thanks.

Upvotes: 0

Views: 135

Answers (2)

Temani Afif
Temani Afif

Reputation: 272909

I think (not sure at 100%) this is a matter of calculation. You may notice that you are using very close values (-4px, 0px, 2px). So you have 4px difference between 0% and 50% and only 2px between 50% and 100%. I don't know what is the exact presicion of browser but due to some rounding you will have similar value around the 50% which create this effect of stops.

Let's suppose that the calculated values are as follow:

-4 -3.9 -3.8 -3.7 .....  1.5 1.6 1.7 1.8 1.9 (2) 1.9 1.8 1.7 .... 0.2 0.1 0

After some rounding you may endup with something like this around the value of 2

... 1.5 1.6 2 2 2 (2) 2 2 2 1.6 ...

So the same value will be repeated and used many times which create this effect.

Here is the same example with a big value of duration where we can see this clearly

.box {
  height:200px;
  background:red;
  position:relative;
  animation: orbit_moveY 8s 0s infinite;
}


@keyframes orbit_moveY {
  0% {
    top: -4px;
  }

  50% {
    top: 2px;
  }

  100% {
    top: 0;
  }
}
<div class="box">
</div>

Upvotes: 1

RemyShad
RemyShad

Reputation: 33

Well, your top: values are too low. May be you should give them bigger values like 100px and start from 0% to 100%:

@keyframes orbit_moveY {
  0% {
    top: -4px;
  }
  100% {
    top: 100px;
  }
}

Upvotes: 1

Related Questions