My current project involves creating an animation that mimics the action of a rope being cut. Imagine an object suspended by two ropes, with one being cut followed by the other. Although I have made progress in achieving the desired effect, my animation lacks the smoothness I am aiming for.
The issue I am facing is that the object seems to bounce back up slightly after being 'cut'. To counter this, I have attempted to minimize the rebound effect by adjusting the position of the entire object downward.
Therefore, I would like to inquire if there are alternative methods to achieve this animation or any suggestions on enhancing its fluidity?
Here is the code snippet:
<div id="box"></div>
<div id="bottom"></div>
And here is the CSS styling:
#box {
width: 400px;
height: 60px;
background: black;
margin: 100px;
animation: ropecut 1.2s 1 ease-out;
transform: rotateZ(0deg);
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)}
}
For further reference, you can view the JS Fiddle here.