60 fps using css animation and translateX but not with percentage nor pixel

Introduction

I'm trying to create a simple column transition using Bootstrap.

I will use it on very low-end devices so I'm using CSS transitions: I want 60 FPS.

Reproduction

• Full-screen here: https://lvd2m.csb.app
• Codesandbox here: https://codesandbox.io/s/bootstrap-animation-fps-translatex-with-percentages-lvd2m

How to reproduce

1. Open the full-screen app here: https://lvd2m.csb.app
2. What you see now is the animation with "slideWithPixels" CSS class

3. If you click the button "Kill animation" apparently nothing happens; maybe the mouse cursor hangs in the shape of a little hand for some time but animation is fluently, right?

4. If you click "Toggle CSS class" button now

5. you'll see animation jank/lag/freeze, call it what you like

Explanation

I'm using two CSS classes:

• slideWithPixels which has transform: translateX(-350px)
• slideWithPercentage which has transform: translateX(-101%) instead.

I wanna use translateX(-101%) because as you can see I'm using Bootstrap responsive grid and I don't know before which width my column has (is not fixed).

Pixels are not good because the animation can start too much before or too much after the viewport 0 pixel and percentage hangs as this example demonstrate.

Why the percentage one hangs when the main thread is busy with javascript work?

What do you suggest to use instead of pixels and percentage?

I'm lost with this problem.

Thank you all.