CSS transform to rotate an element in an oval path

Question

I have a jsfiddle here - 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); }
        }

I'm using css trasform to move an element in an oval shape.

I'd like the path the element is moving on to be a flatter oval shape.

I also like to scale the element so it's smaller at the top of the oval and larger at the bottom so it gives the impression of oval orbit going backwards and coming forwards.

Can anyone help to make the orbit flatter and scale the element.

Answer 1

you can use a % instead "from to" in your animation like this:

 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); }

A jsfiddle implementation: http://jsfiddle.net/jutmLgud/