Funzione di animazione CSS3 per una rivoluzione 3D uniforme?

Question

Ho questo pen che tenta di emulare un oggetto che ruota intorno a qualcosa. Funziona, ma non è liscio. Durante la rotazione, si ferma intorno ai bordi sinistro e destro.

ho pensato che avesse qualcosa a che fare con animation-timing-function, ma non può ottenere il risultato desiderato con una delle funzioni in-costruito come ease-in-out o linear o una funzione personalizzata cubic-bezier.

Come posso rendere l'animazione piacevole? Se ci sono modi migliori per fare qualcosa del genere, sentitevi liberi di farmelo sapere.

.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

Se si desidera spostare voi elemento in un environement 3D, è possibile utilizzare la proprietà perspective e la rotazione effettiva 3d.

In questo momento si sta animando su linee rette tra le posizioni in modo da simulare una rotazione è quasi impossibile. Ho creato il seguente esempio, dovrai modificare la dimensione per adattarla al tuo progetto ma dovresti ottenere l'idea.

noti inoltre che metto il gradiente in un elemento pseudo così apparire davanti dell'oggetto in movimento:

.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

ho trovato questo ha reso più agevole

.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; 
    } 
}