html - 如何简化整个CSS动画

从这个片段中可以看到，“vuelo”中的“easing”插值并简化了在关键帧标记的每个位置的停止：10、20、30、40…
取而代之的是，我想在整个动画中添加一个宽松的插值，有可能吗？

body {
  background: #999;
}
.espacio {
  background: white;
  width: 600px;
  height: 400px;
  perspective: 600px;
  overflow: hidden;
  /*prevents scroll in some browsers */
}
.mariposa {
  width: 100px;
  height: 100px;
  position: absolute;
  /*border: 1px #CCC solid;*/
  transform-style: preserve-3d;
  transform: rotateX(40deg);
  -webkit-animation: vuelo 20s ease-in-out infinite;
  animation: vuelo 20s ease-in-out infinite;
}
.alaL {
  width: 50%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: #5795C2;
  border-top-left-radius: 50%;
  border-bottom-left-radius: 50%;
  transform-origin: 100% 50%;
  transform: rotateY(30deg);
  -webkit-animation: batir 1s ease infinite;
  animation: batir 1s ease infinite;
}
.alaR {
  width: 50%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 50%;
  background: #5795C2;
  border-top-right-radius: 50%;
  border-bottom-right-radius: 50%;
  transform-origin: 0% 50%;
  transform: rotateY(-30deg);
  -webkit-animation: batir 1s linear infinite;
  animation: batir 1s linear infinite;
}
.circulo {
  width: 24px;
  height: 24px;
  background: purple;
  border-radius: 50%;
  position: absolute;
  margin: -12px 0 0 -12px;
  top: 30%;
  left: 50%;
}
@-webkit-keyframes batir {
  50% {
    transform: rotateY(0deg)
  }
}
@-webkit-keyframes vuelo {
  10% {
    transform: translate(100px, 30px) rotate3d(1, -0.5, 0, 60deg)
  }
  20% {
    transform: translate(200px, 100px) rotate3d(1, -1, 0, 90deg)
  }
  30% {
    transform: translate(250px, 150px) rotate3d(0.8, -1, 0, 100deg)
  }
  40% {
    transform: translate(200px, 100px) rotate3d(0.5, 0.5, 0.5, 60deg)
  }
  60% {
    transform: translate(400px, 200px) rotate3d(0.8, -0.5, 0, 90deg)
  }
  80% {
    transform: translate(100px, 300px) rotate3d(1, -1, 0, 90deg)
  }
}
@keyframes batir {
  50% {
    transform: rotateY(0deg)
  }
}
@keyframes vuelo {
  10% {
    transform: translate(100px, 30px) rotate3d(1, -0.5, 0, 60deg)
  }
  20% {
    transform: translate(200px, 100px) rotate3d(1, -1, 0, 90deg)
  }
  30% {
    transform: translate(250px, 150px) rotate3d(0.8, -1, 0, 100deg)
  }
  40% {
    transform: translate(200px, 100px) rotate3d(0.5, 0.5, 0.5, 60deg)
  }
  60% {
    transform: translate(400px, 200px) rotate3d(0.8, -0.5, 0, 90deg)
  }
  80% {
    transform: translate(100px, 300px) rotate3d(1, -1, 0, 90deg)
  }
}

<div class="espacio">
  <div class="mariposa">
    <div class="alaL">
      <div class="circulo"></div>
    </div>
    <div class="alaR">
      <div class="circulo"></div>
    </div>
  </div>
</div>

最佳答案

animation-timing-function是在关键帧之间插值的，因此使它们跨越整个循环的唯一方法是没有中间关键帧。
作为一种解决方案，您可以尝试使用不同的计时函数（如linear）和移动关键帧“位置”（在时间线上）来近似预期的行为。
例如（我删除了-webkit-部分以使其更具可读性）：

body {
  background: #999;
}
.espacio {
  background: white;
  width: 600px;
  height: 400px;
  perspective: 600px;
  overflow: hidden;
  /*prevents scroll in some browsers */
}
.mariposa {
  width: 100px;
  height: 100px;
  position: absolute;
  /*border: 1px #CCC solid;*/
  transform-style: preserve-3d;
  transform: rotateX(40deg);
  animation: vuelo 10s linear infinite;
}
.alaL {
  width: 50%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: #5795C2;
  border-top-left-radius: 50%;
  border-bottom-left-radius: 50%;
  transform-origin: 100% 50%;
  transform: rotateY(30deg);
  animation: batir 1s ease infinite;
}
.alaR {
  width: 50%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 50%;
  background: #5795C2;
  border-top-right-radius: 50%;
  border-bottom-right-radius: 50%;
  transform-origin: 0% 50%;
  transform: rotateY(-30deg);
  animation: batir 1s linear infinite;
}
.circulo {
  width: 24px;
  height: 24px;
  background: purple;
  border-radius: 50%;
  position: absolute;
  margin: -12px 0 0 -12px;
  top: 30%;
  left: 50%;
}
@keyframes batir {
  50% {
    transform: rotateY(0deg)
  }
}
@keyframes vuelo {
  5% {
    transform: translate(100px, 30px) rotate3d(1, -0.5, 0, 60deg)
  }
  15% {
    transform: translate(200px, 100px) rotate3d(1, -1, 0, 90deg)
  }
  30% {
    transform: translate(250px, 150px) rotate3d(0.8, -1, 0, 100deg)
  }
  50% {
    transform: translate(200px, 100px) rotate3d(0.5, 0.5, 0.5, 60deg)
  }
  70% {
    transform: translate(400px, 200px) rotate3d(0.8, -0.5, 0, 90deg)
  }
  90% {
    transform: translate(100px, 300px) rotate3d(1, -1, 0, 90deg)
  }
}

<div class="espacio">
  <div class="mariposa">
    <div class="alaL">
      <div class="circulo"></div>
    </div>
    <div class="alaR">
      <div class="circulo"></div>
    </div>
  </div>
</div>

只是要注意，突然的方向变化，像你在你的动画可能看起来很奇怪。要软化它们，可以独立设置translateX和translateY动画。