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

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

Answer 2

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.