@-webkit-keyframes orbit_earth { from { -webkit-transform: rotate(360deg) translateX(#or_earth.css) rotate(360deg); } to { -webkit-transform: rotate(0deg) translateX(#or_earth.css) rotate(0deg); } } @-moz-keyframes orbit_earth { from { -moz-transform: rotate(360deg) translateX(#or_earth.css) rotate(360deg); } to { -moz-transform: rotate(0deg) translateX(#or_earth.css) rotate(0deg); } } @-o-keyframes orbit_earth { from { -o-transform: rotate(360deg) translateX(#or_earth.css) rotate(360deg); } to { -o-transform: rotate(0deg) translateX(#or_earth.css) rotate(0deg); } } @keyframes orbit_earth { from { transform: rotate(360deg) translateX(#or_earth.css) rotate(360deg); } to { transform: rotate(0deg) translateX(#or_earth.css) rotate(0deg); } } #earth { --period: 20s; --radius: #pr_earth.css; --color: var(--background-alt); width: var(--radius); height: var(--radius); background-color: var(--color); right: #solposx.css; bottom: #solposy.css; -webkit-animation: orbit_earth var(--period) linear infinite; -moz-animation: orbit_earth var(--period) linear infinite; -o-animation: orbit_earth var(--period) linear infinite; animation: orbit_earth var(--period) linear infinite; } #earth-orbit { --orbit-radius: #or_earth.css; --planet-radius: #pr_earth.css; --orbit-thickness: #orbit_thickness.css; --diameter: calc(2 * var(--orbit-radius) + (var(--planet-radius) - var(--orbit-thickness)) / 2); right: #solposx.css; bottom: #solposy.css; transform: translate(#or_earth.css, #or_earth.css); width: var(--diameter); height: var(--diameter); border: #orbit_thickness.css solid var(--background-alt); }