CSS3 Translate: Translate an element on an Ellipse path -
i've been searching answer awhile can see translating object in circular path. there way translate element on ellipse path given semiminor , semimajor axis? alot!
css3
have @ page, explains should know translations css3. reminder: possible set keyframes use definie edge points of spline want animate.
keyframes explained here.
in case animation of 2 nested elements.
#1 picture or element want animate, define x tranlate ease
#2 , 1 outer box #1 animate y translate with.
if arrange them clever in same timescale different ease in or out can make 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> 
Comments
Post a Comment