CSS3 翻译 : Translate an element on an Ellipse path

Question

我已经搜索了一段时间的答案，但我所看到的只是在圆形路径中平移一个对象。有没有办法在给定半短轴和半长轴的情况下平移椭圆路径上的元素？非常感谢!

the jfiddle of belows answer

css3

Answer 1

看看这个页面，它解释了你应该知道的关于 CSS3 翻译的大部分内容。正如提醒:也可以设置关键帧，您可以使用它来定义您想要的样条曲线的边缘点 animate .

关键帧解释here .

在您的例子中，它是两个嵌套元素的动画。
#1 用于您想要设置动画的图片或元素，您可以在其中轻松定义 X 翻译
#2 和一个作为 #1 的外框，您用它来制作 Y 平移动画。
如果你在相同的时间范围内巧妙地安排它们，但不同的缓入或缓出，你就可以实现你的椭圆。

<style>
    .viewport {
        position:relative;
        width:640px;
        height:480px;
        border:1px dashed #000;
    }
    .moveX {
      position:absolute;
      background:#f00;
      height:2px;
      width:480px;
      top:240px;
      left:0px;
      -webkit-animation: mX 5s ease-in-out 0s infinite;
       animation: mX 5s ease-in-out 0s infinite;
    }
    .moveY {
        position:absolute;
        width:480px;
        height:100px; top:-50px;
        border:1px solid #333;
        -webkit-animation: mO 5s linear 0s infinite;
        animation: mO 5s linear 0s infinite;
    }
    .elipsoid {  
      position:absolute;
      background:url('http://placehold.it/100/00f/fff/&text=>°))><');
      top: 0px;
      left: 0px;
      width: 100px;
      height: 100px;
      border-radius:50%;
    }
    @keyframes mO {
        0% { transform: rotate(0deg);   }
      100% { transform: rotate(360deg); }
    }
    @-webkit-keyframes mO {
        0% { -webkit-transform: rotate(0deg);   }
      100% { -webkit-transform: rotate(360deg); }
    }
    @keyframes mX {
        0% { transform: translateX(0px);   }
       50% { transform: translateX(160px); }
      100% { transform: translateX(0px);   }
    }
    @-webkit-keyframes mX {
        0% { -webkit-transform: translateX(0px)    }
       50% { -webkit-transform: translateX(160px); }
      100% { -webkit-transform: translateX(0px)    }
    }
</style>
<div class="viewport">
    <span class="moveX">
       <div class="moveY"><span class="elipsoid"></span></div>
    </span>
</div>