JSFiddle - React, Tailwind, and code Playground
CSS
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 {
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); }
}
@-moz-keyframes myOrbit {
0% { -moz-transform: rotate(0deg) translateX(5px) translateY(120px) rotate(0deg) scale(1); }
25% { -moz-transform: rotate(90deg) translateX(5px) translateY(120px) rotate(-90deg) scale(.75); }
50% { -moz-transform: rotate(180deg) translateX(5px) translateY(120px) rotate(-180deg) scale(.60); }
75% { -moz-transform: rotate(270deg) translateX(5px) translateY(120px) rotate(-270deg) scale(.75); }
100% { -moz-transform: rotate(360deg) translateX(5px) translateY(120px) rotate(-360deg) scale(1); }
}
@-o-keyframes myOrbit {
0% { -o-transform: rotate(0deg) translateX(5px) translateY(120px) rotate(0deg) scale(1); }
25% { -o-transform: rotate(90deg) translateX(5px) translateY(120px) rotate(-90deg) scale(.75); }
50% { -o-transform: rotate(180deg) translateX(5px) translateY(120px) rotate(-180deg) scale(.60); }
75% { -o-transform: rotate(270deg) translateX(5px) translateY(120px) rotate(-270deg) scale(.75); }
100% { -o-transform: rotate(360deg) translateX(5px) translateY(120px) rotate(-360deg) scale(1);...