CSS3 を使用して楕円軌道の回転を実装するサンプルコード

 。ボール {
    アニメーション： 
      animX 2s 線形無限交互、
      アニメーション 2s 線形 無限 交互
  }
@keyframes アニメーションX{
      0% {左: 0px;}
    100% {左: 500px;}
}
@keyframes アニメーションY{
      0% {上: 0px;}
    100% {上部: 300px;}
} 

 。ボール {
    アニメーション： 
      animX 2s 線形 0s 無限交互、
      アニメーション 2秒 線形 -1秒 無限 交互
  } 

 。ボール {
    アニメーション： 
      animX 2s cubic-bezier(0.36, 0, 0.64, 1) -1s 無限交互、
      animY 2s cubic-bezier(0.36, 0, 0.64, 1) 0s 無限交互
  }

.ボール1 {
    アニメーション： 
      animX 2s cubic-bezier(0.36, 0, 0.64, 1) -1s 無限交互、
      animY 2s cubic-bezier(0.36, 0, 0.64, 1) 0s 無限交互、
      スケール 4s cubic-bezier(0.36, 0, 0.64, 1) 0s 無限交互;
  }
 @keyframesスケール{

    0% {
      変換: スケール(0.7)
    }
    50% {
      変換: スケール(1)
    }
    100% {
      変換: スケール(0.7)
   }
 }