cant make a smooth rotation in rotate css - html

Question

I'm trying to make a smooth landing with a rocket, but I'm not being able to do the rotation to make the position for landing in a smooth manner, could u guys please help me on this part of the code?
#keyframes rocket{
0%{
transform:translate(-10vw);
}
40%{
transform:translate(40vw);
}
70%{
transform:translate(70vw, -15vw) rotate(-90deg);
}
100%{
transform:translate(70vw, 0) rotate(-90deg);
}
}
.rocketA{
margin-top: 150px;
width: 80px;
height: 40px;
background-color: pink;
animation-name: rocket;
animation-duration: 4s;
animation-timing-function: ease-in-out;
animation-delay: 0s;
animation-iteration-count: 1;
animation-direction: normal;
-webkit-animation-fill-mode: forwards;
}
<div class='rocketA'></div>
If anyone finds this helpful here it goes the solution I found to make it better, thank for all the help.
SOLUTION
#keyframes rocket {
0% {
transform: translate(-10vw);
}
52% {
transform: translate(45vw);
}
52% {
transform: translate(45vw, -0vw) rotate(-5deg);
}
54% {
transform: translate(48vw, -0.5vw) rotate(-10deg);
}
56% {
transform: translate(51vw, -1vw) rotate(-15deg);
}
58% {
transform: translate(54vw, -1.5vw) rotate(-20deg);
}
60% {
transform: translate(57vw, -2vw) rotate(-25deg);
}
62% {
transform: translate(60vw, -2.5vw) rotate(-30deg);
}
64% {
transform: translate(63vw, -3vw) rotate(-35deg);
}
66% {
transform: translate(66vw, -3.5vw) rotate(-40deg);
}
68% {
transform: translate(69vw, -4vw) rotate(-45deg);
}
70% {
transform: translate(72vw, -4.5vw) rotate(-50deg);
}
72% {
transform: translate(75vw, -5vw) rotate(-55deg);
}
74% {
transform: translate(78vw, -5.5vw) rotate(-60deg);
}
76% {
transform: translate(81vw, -6vw) rotate(-65deg);
}
78% {
transform: translate(83vw, -6.5vw) rotate(-70deg);
}
80% {
transform: translate(85vw, -7vw) rotate(-75deg);
}
82% {
transform: translate(88vw, -7.5vw) rotate(-80deg);
}
84% {
transform: translate(91vw, -8.5vw) rotate(-85deg);
}
86%, 96% {
transform: translate(94vw, -9vw) rotate(-90deg);
}
96%, 100% {
transform: translate(94vw, 0) rotate(-90deg);
}
}
.rocketA {
margin-top: 100px;
width: 80px;
height: 40px;
background-color: pink;
animation-name: rocket;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 0s;
animation-iteration-count: 1;
animation-direction: normal;
-webkit-animation-fill-mode: forwards;
}
<div class='rocketA'></div>

Answer 1

Use animation-timing-function: linear;
Demo
#keyframes rocket{
0%{
transform:translate(-10vw);
}
40%{
transform:translate(40vw);
}
70%{
transform:translate(70vw, -15vw) rotate(-90deg);
}
100%{
transform:translate(70vw, 5vw) rotate(-90deg);
}
}
.rocketA{
margin-top: 150px;
width: 80px;
height: 40px;
background-color: pink;
animation-name: rocket;
animation-duration: 4s;
animation-timing-function: linear;
animation-delay: 0s;
animation-iteration-count: 1;
animation-direction: normal;
-webkit-animation-fill-mode: forwards;
}
<div class='rocketA'></div>