Как сгладить переход между ключевыми кадрами CSS

Question

У меня есть следующий код для изображения самолета, который должен появиться с левой стороны страницы, приземлиться ... поехать прямо на 800px, а затем снова взлететь с противоположной стороны страницы.

Но что меня интересует, так это резкость между каждым процентом.

есть ли у него возможность сгладить переходы между ключевыми кадрами.

@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

Добавление длительности анимации и функции синхронизации анимации для управления длиной анимации и временем (плавностью).

.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>

Answer 2

Добавьте следующее свойство анимации к вашему тегу изображения, это поможет

transform-origin:50px 5px;
transition:transform 1s ease-in-out 0s;
animation-duration: 2.2s;
animation-name: paragato;
animation-iteration-count: infinite;
animation-direction: alternate;    
animation-timing-function: ease-in-out;
-webkit-animation-timing-function: ease-in-out;