我有一個& ltdiv class = & quot球體& quot/& gt；我想以無窮符號的形狀移動。所以我認為答案應該是固定變換原點到左邊，從0到50%，讓它做一個完整的旋轉，然后改變變換原點到右邊，從50.01%到100%，讓它再次做一個完整的旋轉，重置變換原點，就像這樣

.sphere {
        position: absolute;
        width: var(--sphere-dim);
        height: var(--sphere-dim);
        background: rgb(183, 162, 159);
        border-radius: 50%;
        top: 40%;
        left: 40%;
        transform-origin: left;
        /* transition: all 1.5s; */
        /* animation-fill-mode: forwards; */
        animation: infinityWobble 5s infinite;
    }

    @keyframes infinityWobble {
        0% {
            transform: rotate(0deg);
        }
        50% {
            transform: rotate(360deg);
        }
        50.01% {
            transform: rotate(0deg);
            transform-origin: right;
        }
        99% {
            transform: rotate(360deg);
        }
        100% {
            transform-origin: left;
        }
    }

https://codepen.io/meherwan-singh-gill/pen/ExOKxmv

^這是結果

我有一篇關于如何創(chuàng)建這樣一個動畫(以及更多)的詳細文章:https://CSS-tricks . com/advanced-CSS-animation-using-cubic-bezier/

下面是文章中的第一段代碼:

.ball {
  position: fixed;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background:radial-gradient(at 30% 30%,#0000,#000a) red;
  left: var(--x);
  top: var(--y);
  animation: x 1s, y 0.5s;
  animation-timing-function: cubic-bezier(.5, -800, .5, 800);
  animation-iteration-count: infinite;
}

@keyframes x {
  to {
    left: calc(var(--x) + 1px);
  }
}

@keyframes y {
  to {
    top: calc(var(--y) + 0.3px);
  }
}

<div class="ball" style="--x:300px;--y:100px;"></div>

正如我提到的，旋轉動畫將不可見，因為你旋轉的元素是一個圓。因此，在這種情況下，您要么需要使用transformX和transformY，要么另一種方法是改變元素的頂部和左側位置。這里有一個例子。希望有點幫助:)

.container
{
    width: 100px;
    height: 50px;
    position: relative;
}

.sphere
{
    width: 10px;
    height: 10px;
    background-color: black;
    border-radius: 40px;
    position: absolute;
    top: 48%; 
    left:1%;
    
   animation: infinity 1s linear infinite;
}

@keyframes infinity
{
     6.25%  {top: 21%; left:3%}
    12.5%  {top: 7%; left:11%;}
    18.75%  {top: 12%; left:25%;}
    25% {top: 48%; left:47%;}
    
    31.25%  {top: 84%;  left:71%;}
    37.5% {top: 91%; left: 82%}
    43.75% {top: 73%; left: 92%;}
    50% { top: 47%; left: 94%;}
    
    56.25% {top: 23%; left: 92%;}
    62.5% {top: 6%; left: 82%;}
    68.75% {top: 12%; left: 70%;}
    75% { top: 48%; left:47%; }
    
    81.25% { top: 73%; left: 33%;}
    87.5% { top: 89%; left: 19%;}
    93.75% { top: 84%; left: 7%; } 
    100% { top: 48%;  left:1%;}
}

<div class="container">
  <div class="sphere"></div>
</div>