CSS rectangle morphing into parallelogram mid-animation [closed]

I'm trying to create an animation with a rectangle that does the following:

Begins as a vertical rectangle

Moves to the right along an up-then-down parabolic trajectory

Rotates 90x and stretches 2x while moving

Ends as a (wider) horizontal rectangle on the right

I've got the rectangle inside a "pivot" div because I will be grouping it with other shapes making the same motion (a commented-out green rectangle in my example), but for this minimal example I am only using the red rectangle. I have almost got it working but I notice that mid-shift, the rectangle morphs into more of a parallelogram shape and then returns to a rectangle at the end of the animation. I want it to stay as a rectangle the whole time.

here is the HTML:

<div className="container"> <div className="pivot"> <div className="vbar"></div> {/*<div className="hbar"></div>*/} </div> </div>

here is the CSS:

.container { position: relative; height: 300px; border: 1px solid #ccc; overflow: hidden; } /* This is the moving rigid body */ .pivot { position: absolute; bottom: 0; left: 50px; transform-origin: bottom left; offset-path: path("M 0,0 Q200,-220 600,0"); offset-rotate: 0deg; animation: move 1.2s infinite alternate; } /* vertical segment */ .vbar { width: 8px; height: 40px; background: red; animation: extend 1.2s infinite alternate; } /* horizontal segment */ .hbar { width: 40px; height: 8px; background: green; position: absolute; top: 0; left: 8px; transform-origin: bottom center; animation: extend 1.2s infinite alternate; } @keyframes move { from { offset-distance: 0%; transform: rotate(0deg); } to { offset-distance: 100%; transform: rotate(90deg); } } @keyframes extend { from { transform: scaleY(1); } to { transform: scaleY(3); } }