如何改进这个@keyframes 动画，让它更流畅

Question

我正在尝试创建一个关键帧动画，它通过让纸飞机图标飞进飞出圆圈来表示已发送的内容。

（为了更容易重现，我使用字母 X 而不是图标）

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

此外，我想让 X 出现在圆圈外的时间更短，使动画看起来更流畅。

有没有办法解决这个问题或以更好的方式解决这个问题？

.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% 时不可见，当它跳到另一边时你就看不到它（在我看来看起来更好一点）。对于时间，您可以按照 @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>

如何改进这个@keyframes 动画，让它更流畅

How to improve this @keyframes animation and make it more smooth

css

keyframe

css-animations