Take a look at this page, this basically explains everything you need to know about translations using CSS3. Just like a reminder: you can also set keyframes that you could use to define your boundary points for the spline you want to animate .
Keyframes are described here .
in your case, this is an animation of two nested elements.
# 1 for the image or element you want to animate, where you easily define the X transcript
# 2 and one as an external block for this # 1, with which you animate Y-translation.
if you arrange them smart in the same time frame, but with different ease in or out, you can make your ellipse.
<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>
