Infinite animation of an object flying a path using CSS3

Question

Good day, there was the task to make the animation of an airplane flying around a path. I decided to take advantage of the opportunities in CSS3. But all I have achieved is one animation cycle. The plane flies one circle around the path and the animation stops. I tried using animation-iteration-count with infinite, but all I got was the flight of a plane in chaotic directions. Below is my code, please tell me how to loop this animation so that the plane constantly flies in a circle without stopping.

Code

.wrap {
  margin: 100px;
}

.route {
  height: 200px;
  width: 400px;
  border: 3px dotted #000;
  position: relative;
}

.plane {
  position: absolute;
  bottom: -13px;
  left: 100%;
  animation-iteration-count: 3;
  animation: flyLeft 1.5s linear forwards, rotatePlane 0.5s linear 1.5s forwards, flyUp 1s linear forwards 2s, RotateRight 0.5s linear 2.8s forwards, MoveRight 3s linear forwards 3s, RotateDown 1s linear 6s forwards, flyDown 1s linear forwards 7s, RotateLeft 1s linear 7.8s forwards;
}

@keyframes flyLeft {
  100% {
    left: -14px;
  }
}

@keyframes rotatePlane {
  100% {
    transform: rotateZ(90deg);
  }
}

@keyframes flyUp {
  100% {
    bottom: 100%;
  }
}

@keyframes RotateRight {
  0% {
    transform: rotateZ(90deg);
  }
  100% {
    transform: rotateZ(180deg);
  }
}

@keyframes MoveRight {
  0% {
    left: -14px;
  }
  100% {
    left: 380px;
  }
}

@keyframes RotateDown {
  0% {
    transform: rotateZ(180deg);
  }
  100% {
    transform: rotateZ(270deg);
  }
}

@keyframes flyDown {
  0% {
    bottom: 100%;
  }
  100% {
    bottom: -8%;
  }
}

@keyframes RotateLeft {
  0% {
    transform: rotateZ(270deg);
  }
  100% {
    transform: rotateZ(360deg);
  }
}

<div class="wrap">
  <div class="route">
    <img class="plane" src="http://p36099-290-14699.s290.upress.link/wp-content/uploads/2020/05/plane.png">
  </div>
</div>

Answer 1

You need to wrap all the animations in one @keyframes CSS at-rules to easily make repetitions. Here's a working solution below that wraps all the animations in one @keyframes.

.wrap {
  margin: 100px;
}

.route {
  height: 200px;
  width: 400px;
  border: 3px dotted #000;
  position: relative;
}

.plane {
  position: absolute;
  right: 0;
  bottom: 0;
  transform: translate(50%, 50%);
  animation: travelRoundTheBorder 10s linear infinite;
}

@keyframes travelRoundTheBorder {
  30% {
    bottom: 0;
    right: 100%;
    transform: translate(50%, 50%);
  }
  
  32.5% {
    bottom: 0;
    right: 100%;
    transform: translate(50%, 50%) rotate(90deg);
  }
  
  47.5% {
    right: 100%;
    bottom: 100%;
    transform: translate(50%, 50%) rotate(90deg);
  }
  
  50% {
    right: 100%;
    bottom: 100%;
    transform: translate(50%, 50%) rotate(180deg);
  }
  
  80% {
    right: 0;
    bottom: 100%;
    transform: translate(50%, 50%) rotate(180deg);
  }
  
  82.5% {
    right: 0;
    bottom: 100%;
    transform: translate(50%, 50%) rotate(270deg);
  }
  
  97.5% {
    right: 0;
    bottom: 0;
    transform: translate(50%, 50%) rotate(270deg);
  }
  
  100% {
    right: 0;
    bottom: 0;
    transform: translate(50%, 50%) rotate(360deg);
  }
}

<div class="wrap">
  <div class="route">
    <img class="plane" src="http://p36099-290-14699.s290.upress.link/wp-content/uploads/2020/05/plane.png">
  </div>
</div>