css - 使用 CSS3 飞行路径的对象的无限动画

Question

美好的一天，我们的任务是制作飞机绕路径飞行的动画。我决定利用 CSS3 中的机会。但我所取得的只是一个动画周期。飞机绕路径飞行一圈，动画停止。我尝试使用 animation-iteration-count与 infinite ，但我得到的只是一架飞机在困惑的方向上飞行。下面是我的代码，请告诉我如何循环这个动画，让飞机不停地绕圈飞行。

代码

.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

您需要将所有动画包装在一个 @keyframes 中CSS at 规则可轻松进行重复。下面是一个工作解决方案，它将所有动画包装在一个 @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>