如何在CSS动画中创建平滑曲线/旋转

我正在尝试创建一个CSS动画，使飞机从跑道起飞，然后在获得高度时向右轻微弯曲。要实现这一点，我相信我需要调整关键帧中的缩放、旋转和x/y坐标。我已经玩了一段时间，但我不知道如何使它看起来自然。计算各种数值的最佳方法是什么？我需要绘制一条向上和向右的平滑曲线

.container{
宽度：700px；
身高：100%；
}
img{
最大宽度：100%；
}
.飞机{
位置：绝对位置；
底部：0；
动画：向前起飞；
}
@关键帧起飞{
0% {
变换：平移（0,0）旋转（0）；
}
5% {
变换：平移（0,0）旋转（0）比例（.9）；
}
10% {
变换：平移（0,0）旋转（0）比例（.9）；
}
20% {
变换：平移（0,0）旋转（0）缩放（0.85）；
}
30% {
变换：平移（0,0）旋转（0）缩放（0.80）；
}
40% {
变换：平移（0,0）旋转（0）缩放（0.75）；
}
50% {
变换：平移（0,0）旋转（5度）缩放（0.5）；
}
60% {
变换：平移（0,0）旋转（5度）缩放（0.45）；
}
70% {
变换：平移（150px，-200px）旋转（10deg）比例（.4）；
}
80% {
变换：平移（200px，-300px）旋转（20度）缩放（0.35）；
}
90% {
变换：平移（250px，-400px）旋转（30度）刻度（0.3）；
}
100% {
变换：平移（300px，-500px）旋转（30度）刻度（0.3）；
}
}

< /代码> 您可能会考虑容器上的动画以便于处理：


.container{
位置：绝对位置；
底部：0；
动画：起飞高度1秒，向前1秒；
}
img{
最大宽度：100%；
}
.飞机{
动画：向前起飞；
}
@关键帧起飞{
到{
变换：比例（0.1）；
}
}
@关键帧起飞高度{
100% {
变换：旋转（30度）translateY（-100%）；
}
}
身体{
溢出：隐藏；
}