CSS3 Translate: Translate an element on an Ellipse path

Question

I've been searching the answer for awhile but all I can see is translating an object in circular path. Is there a way to translate an element on an ellipse path given the semiminor and semimajor axis? Thanks alot!

the jfiddle of belows answer

css3

Answer 1

Have a look at this page, it explains mostly all you should know about translations with CSS3. Just as reminder: it is also possible to set keyframes you could use to definie your edge points of a spline you want to animate.

keyframes are explained here.

in your case it is a animation of two nested elements.
#1 for the picture or element you want to animate, where you define a X tranlate with ease
#2 and one as outer box for that #1 you animate the Y translate with.
if you arrange them clever in the same timescale but different ease in or out you can make your ellipse happen.

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