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

Answer 1

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;
   }
}

---

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%)