css - CSS3 翻訳: 楕円パス上の要素を翻訳する

Question

私はしばらく答えを探してきましたが、私が見ることができるのは、オブジェクトを円形パスに変換することだけです。短半径と長半径を指定して、楕円パス上の要素を移動する方法はありますか? どうもありがとう！

下の答えのjfiddle

css3

Answer 1

このページをご覧ください。CSS3 を使用した翻訳について知っておくべきことのほとんどが説明されています。念のため:アニメートするスプラインのエッジ ポイントを定義するために使用できるキーフレームを設定することもできます。

キーフレームについてはこちらで説明しています。

あなたの場合、それは2つのネストされた要素のアニメーションです。
アニメーション化する画像または要素の# 1。X 移動を簡単に定義
#2し、Y 移動をアニメーション化する#1の外枠として 1 つを定義します。
同じタイムスケールで巧妙に配置するが、イーズインまたはイーズアウトが異なる場合、楕円を実現できます。

<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>