How to smooth the transition between css keyframes

Question

I have the following code for an image of a plane to come in from the left hand side of the page, land... ride on straight for 800px then take off again off the opposite side of the page.

But what is getting to me is the jerkiness between each percentage.

is there a away for it to smooth out the transitions between keyframes.

@keyframes plane-right {


    0% {
        visibility:visible;
        transform: translate(-2000px, -400px) rotate(-20deg) scaleX(-1);

    }
    40% {
        visibility:visible;
        transform: translate(-400px, -0px) rotate(-0deg) scaleX(-1);
    }
    60% {
        visibility:visible;
        transform: translate(400px, -0px) rotate(-5deg) scaleX(-1);
    }

    100% {
        visibility:visible;
        transform: translate(2000px, -400px) rotate(-40deg) scaleX(-1);
    }
}

Answer 1

Add animation duration and animation timing-function to control the length of the animation and the timing (smoothness).

.plane-right-div {
  width: 100px;
  height: 70px;
  background-color: #bada55;
  border-radius: 5px;
  animation-name: plane-right;
  animation-duration: 6s;
  animation-timing-function: ease;
}

@keyframes plane-right {
  0% {
    visibility: visible;
    transform: translate(-2000px, -400px) rotate(-20deg) scaleX(-1);
  }
  40% {
    visibility: visible;
    transform: translate(-400px, -0px) rotate(-0deg) scaleX(-1);
  }
  60% {
    visibility: visible;
    transform: translate(400px, -0px) rotate(-5deg) scaleX(-1);
  }
  100% {
    visibility: visible;
    transform: translate(2000px, -400px) rotate(-40deg) scaleX(-1);
  }
}

<div class="plane-right-div"></div>