css3 achieve elliptical orbit of rotation

css3 achieve elliptical orbit of rotation

Achieve results

X and Y axes move in a rectangle

Do diagonal movement

 

 1 .ball {
 2     position: absolute;
 3     animation: 
 4       animX 2s linear  infinite alternate,
 5       animY 2s linear  infinite alternate
 6   }
 7 @keyframes animX{
 8       0% {left: 0px;}
 9     100% {left: 500px;}
10 }
11 @keyframes animY{
12       0% {top: 0px;}
13     100% {top: 300px;}
14 }

 

Animating delay

Y-axis is provided a delay of half the length of animation, into diamond-shaped trajectory

1  .ball {
2     animation: 
3       animX 2s linear 0s infinite alternate,
4       animY 2s linear -1s infinite alternate
5   }

Setting cubic Bezier curves

1  .ball {
2     animation: 
3       animX 2s  cubic-bezier(0.36, 0, 0.64, 1) -1s infinite alternate,
4       animY 2s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate
5   }

Zoom Out Zoom In

To look solid add scaleproperties, scale animation time should be the sum of the X and Y axes

 1  .ball1 {
 2     animation: 
 3       animX 2s  cubic-bezier(0.36, 0, 0.64, 1) -1s infinite alternate,
 4       animY 2s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate,
 5       scale 4s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate;
 6   }
 7  @keyframes scale {
 8  
 9     0% {
10       transform: scale(0.7)
11     }
12     50% {
13       transform: scale(1)
14     }
15     100% {
16       transform: scale(0.7)
17    }
18  }