CSS3翻譯：翻譯橢圓路徑上的元素

Question

我一直在尋找答案一段時間，但我可以看到的所有內容都是在循環路徑中翻譯對象。給定semiminor和semimajor軸的橢圓路徑上有元素的翻譯方法嗎？非常感謝！

the jfiddle of belows answer

css3 

Answer 1

看一看這個頁面，它解釋大多都是你應該知道用CSS3轉換。就像提醒一樣：​​也可以設置關鍵幀，以確定您想要的樣條的邊緣點animate。

關鍵幀被解釋爲here。

在你的情況下，它是兩個嵌套元素的動畫。
＃1爲要進行動畫圖片或元件，在其中定義一個X tranlate容易
＃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>