CSS3 animation function for a smooth 3D revolution?

Question

I have a pen that is trying to imitate an object orbiting something. It works, but it is behind the scenes. During rotation, it stops around the left and right edges.

I thought this had something to do with animation-timing-function , but could not get the desired result using any of the built-in functions, such as ease-in-out or linear or a custom cubic-bezier function.

How to make animation smooth? If there are better ways, something similar can be done, feel free to let me know.

 .overlay { background-image: -webkit-repeating-linear-gradient(0deg, transparent, transparent 1%, rgb(255, 255, 255) 2%, rgb(255, 255, 255) 2%); background-image: repeating-linear-gradient(90deg, transparent, transparent 1%, rgb(255, 255, 255) 2%, rgb(255, 255, 255) 2%); height: 200px; position: relative; width: 40%; margin: auto; } .circle { width: 100px; height: 100px; border-radius: 50%; background: #888; position: absolute; z-index: -1; left: 0; display: inline-block; } .move { -webkit-animation: moveAndGlow 2s infinite ease-in-out; animation: moveAndGlow 2s infinite ease-in-out; } @-webkit-keyframes moveAndGlow { 25% { background: #ccc; -webkit-transform: scale(.5); transform: scale(.5); margin-top: 25px; } 50% { left: 100%; margin-left: -100px; background: #888; -webkit-transform: scale(1); transform: scale(1); margin-top: 0; } 75% { background: #000; -webkit-transform: scale(1.5); transform: scale(1.5); margin-top: 25px; } } @keyframes moveAndGlow { 25% { background: #ccc; -webkit-transform: scale(.5); transform: scale(.5); margin-top: 25px; } 50% { left: 100%; margin-left: -100px; background: #888; -webkit-transform: scale(1); transform: scale(1); margin-top: 0; } 75% { background: #000; -webkit-transform: scale(1.5); transform: scale(1.5); margin-top: 25px; } } 

 <div class="overlay"> <span class="circle move"></span> </div> 

Answer 1

If you want to move an element to 3d environement, you can use the perspective property and the actual three-dimensional rotation.

Right now you are animating on straight lines between positions, so simulating rotation is almost impossible. I built the following example: you will need to adjust the size to fit your project, but you should get this idea.

Also note that I put the gradient background in a pseudo-element so that it appears in front of the moving object:

 .overlay { height: 200px; position: relative; width: 40%; margin: auto; perspective:500px; margin-top:50px; } .overlay:after{ content:''; position:absolute; top:-100px; left:-10%; width:120%; height:100%; background-image: repeating-linear-gradient(90deg, transparent, transparent 1%, rgb(255, 255, 255) 2%, rgb(255, 255, 255) 2%); } .circle { width: 100px; height: 100px; border-radius: 50%; background: #888; position: absolute; z-index: -1; left: 50%; margin-left:-50px; transform: rotateY(0deg) translateX(-100px) rotateY(0deg); display: inline-block; } .move { animation: moveAndGlow 2s infinite linear; } @keyframes moveAndGlow { to{ transform:rotateY(360deg) translateX(-100px) rotateY(-360deg); } } 

 <div class="overlay"> <span class="circle move"></span> </div> 

Answer 2

I found this made it smoother

 .move { -webkit-animation: moveAndGlow 2s infinite linear; animation: moveAndGlow 2s infinite linear; } @-webkit-keyframes moveAndGlow { 25% { background: #ccc; -webkit-transform: scale(.5); transform: scale(.5); margin-top: 25px; -webkit-animation-timing-function:ease-in; } 50% { left: 100%; margin-left: -100px; background: #888; -webkit-transform: scale(1); transform: scale(1); margin-top: 0; -webkit-animation-timing-function:ease-out; } 75% { background: #000; -webkit-transform: scale(1.5); transform: scale(1.5); margin-top: 25px; -webkit-animation-timing-function:ease-in; } }