使用 cubic-bezier 定时函数的平滑圆形动画 CSS

Question

我有一个问题，我不知道如何解决。我已经为图像定义了一个关键帧，该关键帧将其移动到半圆形路径中。我用了一个线性动画计时函数，但是点与点之间不够平滑。之后，我考虑使用贝塞尔曲线 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>

使用 cubic-bezier 定时函数的平滑圆形动画 CSS

Smooth circular animation with cubic-bezier timing function CSS

css

animation

keyframe

css-animations