CSS przekształcić obrócić element w ścieżce owalnym

Question

Mam jsfiddle tutaj - 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); } 
     } 

używam css trasform przenieść element w kształcie owalnym.

Chciałbym, aby ścieżka, którą porusza się element, miała bardziej płaski owalny kształt.

Ja także lubię skalować element, aby był mniejszy na górze owalu i większy na dole, dzięki czemu sprawia wrażenie owalnej orbity cofającej się i zbliżającej się do przodu.

Czy ktoś może pomóc, aby orbita stała się bardziej płaska i skalować element.

Answer 1

można użyć% zamiast „od do” w animacji tak:

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 realizacja: http://jsfiddle.net/jutmLgud/