CSS transfrom oval arc and scale

HTML & CSS
1

Hi all

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.

2

Running out the door, but to make the path to be more of an oval shape, the translatey “to” needs to have a higher value. E.g. 180px.

The height on “from” can be set at ahigh value and “to” at a low value to make it small at the etop and larger at the bottom.

Here is a rough demo

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);height:200px;}
    50% { height:50px;}
    to   { -webkit-transform: rotate(360deg) translateX(5px) translateY(180px) rotate(-360deg);height:200px;  }
}

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

Actually, with this, it’s a pretty oval rotation that the box is going through. Did I misunderstand or do you want MORE oval? I’m not on a particularly big screen but I’m getting a decent sized oval.

div {
    position: absolute;
    left: 315px;
    top: 143px;
    width: 50px;
    height: 200px;
    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);height:200px;}
    50% { height:50px;}
    to   { -webkit-transform: rotate(360deg) translateX(5px) translateY(120px) rotate(-360deg);height:200px;  }
}

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

I think an image might better describe what I need.

I want a more oval path and for the element to get bigger at the front/bottom of the oval and then smaller at the back/top of the oval.

Imagine an animation of a planet on an orbit

5

Something like this? Could be cleaner with more percentages maybe…

div {
    position: absolute;
    width: 50px;
    top:200px;
    left:200px;
    border-radius:50%;
    height: 50px;
    background: red;
    -webkit-animation: myOrbit 4s linear infinite; 
}

@-webkit-keyframes myOrbit {
    from { -webkit-transform: rotate(0deg) translateX(0px) translateY(50px) rotate(0deg);height:50px;width: 50px;}
    25% { height:100px;width:100px;-webkit-transform: rotate(0deg) translateX(150px) translateY(100px);}
    50% { -webkit-transform: rotate(0deg) translateX(350px) translateY(50px) rotate(0deg);height:50px;width: 50px;}    
    75% { height:100px;width:100px;-webkit-transform: rotate(0deg) translateX(200px) translateY(-50px);}
    to   { -webkit-transform: rotate(360deg) translateX(0px) translateY(50px) rotate(-360deg);height:50px;width: 50px; }
}

You’ll need to remake the other keyframes since I deleted them because of clutter.