Cut from rope animation, pure CSS - css

Question

I'm trying to create an animation that simulates a "cut from rope" sort of effect.
Picture an object hanging from two ropes. First, the left one is cut, and a bit after the right one is then cut. I have got pretty close to the desire effect, but my animation isn't as smooth as I would like.
You can see that the object sort of bounces back up, which I tried to minimize by translating the entire object down.
My question is, is there a better way to achieve this effect, or any ways to improve my animation?
HTML
<div id="box"></div>
<div id="bottom"></div>
CSS
#box {
width: 400px;
height: 60px;
background: black;
margin: 100px;
animation: ropecut 1.2s 1 ease-out;
transform: rotateZ(0deg);
transform: rotateZ(0);
transform-origin: top left;
animation-timing-function: ease-in-out;
transform: translateY(50px)
}
#bottom {
width: 600px;
height: 2px;
background: red;
margin-top: -50px;
}
#keyframes ropecut {
0% {transform: rotateZ(0deg);transform-origin: top right;animation-timing-function: ease-in-out;}
50% {transform: rotateZ(-7.5deg);transform-origin: top right;animation-timing-function: ease-in-out;}
70% {transform: rotateZ(-7.5deg);transform-origin: top right;animation-timing-function: ease-in-out;}
100% {transform: rotateZ(0);transform-origin: top left;animation-timing-function: ease-in-out;transform: translateY(50px)}
}
Link to JS Fiddle

Answer 1

Try this, I basically just took out the 70% bit of the keyframe and then removed the rotateZ in the 100% sequence. That will keep the bottom left corner where it should stay.
#box {
width: 400px;
height: 60px;
background: black;
margin: 100px;
animation: ropecut 1.2s 1 ease-out;
transform: rotateZ(0);
transform-origin: top left;
animation-timing-function: ease-in-out;
transform: translateY(50px)
}
#bottom {
width: 600px;
height: 2px;
background: red;
margin-top: -50px;
}
#keyframes ropecut {
0% {transform: rotateZ(0deg);transform-origin: top right;animation-timing-function: ease-in-out;}
50% {transform: rotateZ(-7.5deg);transform-origin: top right;animation-timing-function: ease-in-out;}
100% {animation-timing-function: ease-in-out; transform-origin: top right;}
}
<div id="box"></div>
<div id="bottom"></div>