The core should be stretched along the X axis after reaching 600 pixels. I set a keyframe with a difference of one percent to the final, so that the core stretched out very quickly, as if hitting the wall. But for some reason, it starts to stretch from the very first frame. Why and how to fix?
@keyframes cannon { 0% { background-color: #333300; height: 50px; width: 150px; transform:translateX(-15px); } 4% { transform: rotate(-50deg); background-color: #333300; height: 50px; width: 150px; } 6% { transform: rotate(5deg); background-color: #333300; height: 50px; width: 150px; } 12% { transform: rotate(-3deg); background-color: #333300; height: 50px; width: 150px; } 20% { transform: rotate(1deg); background-color: #333300; height: 50px; width: 150px; } 21% { transform: rotate(0deg); background-color: #333300; height: 50px; width: 150px; } 100% { transform: rotate(0deg); background-color: #333300; height: 50px; width: 150px; } } @keyframes anima { 0% { background-color: #006600 } 99% { left: 600px; background-color: #006600 } 100% { left: 600px; transform: scaleY(3); background-color: #006600 } } #cannon { position: absolute; top: 50px; left: 50px; animation-name: cannon; animation-duration: 6s; margin: 0; z-index: 1; } #ball { height: 30px; width: 30px; border-radius: 10px; animation-timing-function: linear; position: absolute; top: 61px; left: 75px; animation-name: anima; animation-duration: 6s; z-index: 0; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="style.css"> <title>Document</title> </head> <body> <div id="cannon"></div> <div id="ball"></div> <div id="wall"></div> <div id="floor"></div> </body> </html> 