如何改善@keyframes动画并使它更平滑

Question

我正在尝试创建关键帧动画，该动画表示通过使纸飞机图标飞入和飞出圆圈来发送已发送的内容。

（我使用字母X代替图标来更轻松地重现它）

我几乎可以正常运行（见下文），但发现有时 X 的顶部在圆圈顶部附近闪烁时可能会显得有些跳动。如果您全屏打开下面的代码段，这一点尤其值得注意。

此外，我想让动画看起来更平滑，使 X 出现在圆圈外的时间更少。

是否可以解决此问题或以更好的方式做到？

---

http://jsfiddle.net/hp1new8L/38/

.icon-send {
  width: 100px;
  height: 100px;
  background-color: blue;
  border-radius: 100%;
  text-align: center;
  color: white;
  font-size: 60px;
  font-family: sans-serif;
}

.icon-send:before {
    position: relative;
    content: 'x';
    line-height: 100px;
    animation-name: flying-paper-plane;
    animation-duration: 2s;
  }

@keyframes flying-paper-plane {
  0% {
    left: 0;
    top: 0;
  }

  49.9% {
    left: 60px;
    top: -60px;
  }

  50% {
    left: 0;
    top: -60px;
  }

  50.1% {
    left: -60px;
    top: 60px;
  }

  100% {
    left: 0;
    top: 0;
  }
}

<div class="icon-send"></div>

Answer 1

如果使飞机看不到50％，则当飞机跳到另一侧时看不到它（并且看起来更好IMO）。对于计时，您可以按照建议的@ChintuYadavSara使用cubic-bezier。

.icon-send {
  width: 100px;
  height: 100px;
  background-color: blue;
  border-radius: 100%;
  text-align: center;
  color: white;
  font-size: 60px;
  font-family: sans-serif;
}

.icon-send:before {
    position: relative;
    content: 'x';
    line-height: 100px;
    animation-name: flying-paper-plane;
    animation-duration: 1.5s;
  }

@keyframes flying-paper-plane {
  0% {
    left: 0;
    top: 0;
  }

  49.9% {
    left: 60px;
    top: -60px;
  }
  
  50% {
    left: 0;
    top: 0;
    opacity:0;
  }

  50.1% {
    left: -60px;
    top: 60px;
  }

  100% {
    left: 0;
    top: 0;
  }
}

<div class="icon-send"></div>