使用三次贝塞尔计时函数 CSS 实现平滑的圆形动画

Question

我有一个问题，我不知道如何解决它。我已经为图像定义了一个关键帧，它在半圆形路径中移动它。我使用了线性动画计时功能，但点之间不够平滑。在那之后，我考虑使用 bezier easeInExpo 函数来实现更好的过渡，但结果变得更糟。如果我在关键帧上定义多个点，贝塞尔曲线会逐步移动并且根本不平滑，但如果我定义起点和终点，它是平滑的，但它会跳过路径。

我的关键帧：

.marketplace {
    position:absolute;
    height: 20%;
    top:15%;
    left: 62%;
    transform:rotate(270deg);
    animation-name: marketplace-animation;
    animation-duration:0.3s;
    animation-delay: 0.6s;
   /* animation-timing-function: linear;*/
    animation-timing-function: cubic-bezier(0.7, 0, 0.84, 0);
    animation-fill-mode: forwards;
    visibility:hidden; 
}

@keyframes marketplace-animation {
    0% {
        visibility: visible;
        top:20%;
        left: 35%;
    }

    25% {
        top:6%;
        left: 41%;
    }

    50% {
        top:4%;
        left: 48%;
        }

    75%{
        top:4%;
        left: 56%;
    }

    99% {
        visibility: hidden;
      }

    100% {
        visibility: visible;
        top:15%;
        left: 62%;
    }
}

所以我的问题是，如果我为更平滑的圆形动画选择线性时间，我必须定义更多点，或者如果我想使用贝塞尔方法，我怎样才能使它工作顺利并保持在路径中？提前致谢！

Answer 1

使用两个动画：

.marketplace {
    position:absolute;
    background:red;
    height: 100px;
    width:100px; 
    /* the final position */
    top:15%;
    left: 62%;
    /**/
    animation: 
       x 2s linear,
       y 2s cubic-bezier(0,1,0.8,2.8); /* adjust the bezier to control the curve */
}

/* the initial position */
@keyframes x {
  from {
    left:0%;
  }
}

@keyframes y {
  from {
    top:50%;
  }
}

<div class="marketplace"></div>