Как сделать плавную кривую / повернуть в CSS-анимации - PullRequest
Новая
       16

Как сделать плавную кривую / повернуть в CSS-анимации

0 голосов
/ 01 апреля 2019

Я пытаюсь создать 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>

1 Ответ

1 голос
/ 02 апреля 2019

Вы, вероятно, можете рассмотреть анимацию на контейнере, чтобы упростить обработку: 

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