When exactly does an ease animation reach its midpoint?

Question

I am simulating the flip effect on a card. The card is a div with an image inside. I would like to change that image when the animation is exactly at its midpoint (i.e. when the card is exactly rotated 90 degrees). The timing function of the transition is set to ease-out.

So my question is, at what fraction of the set transition duration does an ease-out animation reach its midpoint?

Temani Afif · Accepted Answer · 2020-09-11T21:58:04.537

IF you refer to the MDN page you can find the graphic there:

The red lines mean that when you are at 50% of the time you are at around 70% of the rotation

The green lines mean that if you want to be at 50% of the rotation you need to be at around 34% of the time.

Example to illustrate. Notice how the background color will change after 3.4s when the other animation is exactly at its midpoint (90deg of rotation):

.box {
  width:100px;
  height:100px;
  background:red;
  margin:10px;
  animation:
     change 10s ease-out,
     t 3.4s linear forwards; 
}
@keyframes change{
   to {
     transform:rotate(180deg);
   }
}

@keyframes t{
   0%,98% {
     background:red;
   }
   99%,100% {
     background:blue;
   }
}

<div class="box"></div>

If you want an accurate result let's do some math. From the same MDN page we can see that our bezier curve is made with 4 control points so we will be using the following formula:

P = (1−t)^3*P0 + 3*(1−t)^2*t*P1 +3*(1−t)*t^2*P2 + t^3*P3

with P0(0,0) P1(0,0) P2(0.58,1) P3(1,1)

^{https://javascript.info/bezier-curve#maths}

this will give us:

X = 3*(1−t)*t^2*0.58 + t^3  [X is our time axis]
Y = 3*(1−t)*t^2 + t^3       [Y is our output axis]
t in the range [0,1]

We simplify:

X = t²*(1.74 - 0.74*t)
Y = t²*(3 - 2*t)

If Y = 0.5 we will get t = 0.5 (I won't detail the step of solving the equation). We will then have X = 0.3425 (our 34%)

If X = 0.5 we will get t = 0.6257. We will then have Y = 0.6845 (our 70%)

Is this the same for all browsers? I tried setting the duration by trial and error and 37% was the perfect value. — Wais Kamal, Jun 19 '20 at 16:57
@WaisKamal yes it's the same for all the browser since the definition of ease-out is clear. I will add later some Math so you can get the precise value — Temani Afif, Jun 19 '20 at 18:32

score 1 · Answer 2 · answered Jun 19 '20 at 16:23

You can setup the values at your convenience. The thing is that with ease-out the transition will slow at the end so to know the exact time you will need to inspect the animation with the developer tools and check the exact moment where you require the image swap. That is really easy with Firefox Developer Tools, here you can see how to do it.

When exactly does an ease animation reach its midpoint?

2 Answers2

Linked