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

Question

我正在尝试创建一个 CSS 动画来使飞机从跑道起飞，然后在它获得高度时向右轻微 flex 。为此，我认为我需要调整关键帧中的比例、旋转和 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=/image/DhHSc.png" />
</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="/image/DhHSc.png" />
</div>