如何在CSS动画中制作平滑的曲线/旋转

Question

我正在尝试创建CSS动画，以使飞机从跑道起飞，然后随着高度的增加向右微弯。为此，我相信我需要在关键帧中调整比例，旋转和x / y坐标。我已经玩了一段时间，但我不知道如何使它看起来自然。计算各种数值的最佳方法是什么，我需要使曲线向上并向右弯曲？

.container {
  width:700px;
  height:100%;
}
img {
  max-width:100%;
}

.airplane {
    position:absolute;
    bottom:0;
    animation: takeoff linear 2s forwards;
}

@keyframes takeoff {
    0% {
        transform: translate(0,0) rotate(0);
    }
    5% {
        transform: translate(0,0) rotate(0) scale(.9);
    }
    10% {
        transform: translate(0,0) rotate(0) scale(.9);
    }
    20% {
        transform:translate(0,0) rotate(0) scale(0.85);
    }
    30% {
       transform:translate(0,0) rotate(0) scale(0.80);
    }
    40% {
        transform:translate(0,0) rotate(0) scale(0.75);
    }
    50% {
        transform:translate(0,0) rotate(5deg) scale(0.5);
    }
    60% {
        transform:translate(0,0) rotate(5deg) scale(0.45);
    }
    70% {
        transform: translate(150px, -200px) rotate(10deg) scale(.4);
    }
    80% {
        transform:translate(200px,-300px) rotate(20deg) scale(0.35);
    }
    90% {
        transform:translate(250px,-400px) rotate(30deg) scale(0.3);
    }
    100% {
        transform:translate(300px,-500px) rotate(30deg) scale(0.3);
    }
}

<div class="container">
  <img class="airplane" src="https://cessna.txtav.com/-/media/cessna/images/aircraft/jets/m2/exterior-360/m2_360_3.ashx" />
</div>

Answer 1

您可以考虑在容器上放一个动画，以便于处理：

.container {
  position: absolute;
  bottom: 0;
  animation: takeoff-alt ease-in 1s 1s forwards;
}
img {
 max-width:100%;
}

.airplane {
  animation: takeoff linear 2s forwards;
}

@keyframes takeoff {
  to {
    transform: scale(0.1);
  }
}

@keyframes takeoff-alt {
  100% {
    transform: rotate(30deg) translateY(-100%);
  }
}

body {
 overflow:hidden;
}

<div class="container">
  <img class="airplane" src="https://cessna.txtav.com/-/media/cessna/images/aircraft/jets/m2/exterior-360/m2_360_3.ashx" />
</div>