सीएसएस एक अंडाकार पथ

Question

में एक तत्व को घुमाने के लिए बदलना मैं एक jsfiddle यहां है - http://jsfiddle.net/w23v50h5/1/

 div { 
      position: absolute; 
      left: 315px; 
      top: 143px; 
      width: 50px; 
      height: 50px; 
      background: red; 

      -webkit-animation: myOrbit 6s linear infinite; 
       -moz-animation: myOrbit 6s linear infinite; 
       -o-animation: myOrbit 6s linear infinite; 
        animation: myOrbit 6s linear infinite; 

     } 

     @-webkit-keyframes myOrbit { 
      from { -webkit-transform: rotate(0deg) translateX(5px) translateY(120px) rotate(0deg);} 
      to { -webkit-transform: rotate(360deg) translateX(5px) translateY(120px) rotate(-360deg); } 
     } 

     @-moz-keyframes myOrbit { 
      from { -moz-transform: rotate(0deg) translateX(100px) rotate(0deg); } 
      to { -moz-transform: rotate(360deg) translateX(100px) rotate(-360deg); } 
     } 

     @-o-keyframes myOrbit { 
      from { -o-transform: rotate(0deg) translateX(100px) rotate(0deg); } 
      to { -o-transform: rotate(360deg) translateX(100px) rotate(-360deg); } 
     } 

     @keyframes myOrbit { 
      from { transform: rotate(0deg) translateX(100px) rotate(0deg); } 
      to { transform: rotate(360deg) translateX(100px) rotate(-360deg); } 
     } 

मैं एक अंडाकार आकार में एक तत्व स्थानांतरित करने के लिए सीएसएस trasform उपयोग कर रहा हूँ।

मैं पथ तत्व एक चापलूसी अंडाकार होने के लिए पर आगे बढ़ रहा है करना चाहते हैं।

मैं भी तत्व पैमाने पर करने के तो यह अंडाकार के शीर्ष पर छोटे और निचले भाग में बड़ा है, इसलिए इसमें अंडाकार कक्षा की छाप पीछे की ओर जा रहा है और आने वाले फारवर्ड देता है पसंद है।

किसी को भी कक्षा चापलूसी बनाने के लिए और तत्व पैमाने पर करने में मदद कर सकते हैं।

Answer 1

आप एक% के बजाय "से" अपने एनीमेशन में इस तरह का उपयोग कर सकते हैं:

0% { -webkit-transform: rotate(0deg) translateX(5px) translateY(120px) rotate(0deg) scale(1); } 
25% { -webkit-transform: rotate(90deg) translateX(5px) translateY(120px) rotate(-90deg) scale(.75); } 
50% { -webkit-transform: rotate(180deg) translateX(5px) translateY(120px) rotate(-180deg) scale(.60); } 
75% { -webkit-transform: rotate(270deg) translateX(5px) translateY(120px) rotate(-270deg) scale(.75); } 
100% { -webkit-transform: rotate(360deg) translateX(5px) translateY(120px) rotate(-360deg) scale(1); } 

एक jsfiddle कार्यान्वयन: http://jsfiddle.net/jutmLgud/