Funkcja animacji CSS3 zapewnia płynną rewolucję 3D?

Question

Mam to pen, który próbuje emulować obiekt obracający się wokół czegoś. To działa, ale nie jest płynne. Podczas obracania pauza zatrzymuje się wokół lewej i prawej krawędzi.

myślałem, że to ma coś wspólnego z animation-timing-function ale nie może uzyskać pożądany wynik z jednego z wbudowanej funkcji, takich jak ease-in-out lub linear lub niestandardowym cubic-bezier funkcji.

Jak sprawić, aby animacja była gładka? Jeśli istnieją lepsze sposoby na zrobienie czegoś takiego, daj mi znać.

.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

Jeśli chcesz przenieść się element 3d environement, można użyć właściwości perspective i rzeczywisty obrót 3d.

W tej chwili animujesz proste linie między pozycjami, więc symulacja obrotu jest prawie niemożliwa. Zbudowałem następujący przykład, musisz dostosować rozmiar, aby dopasować go do swojego projektu, ale powinieneś uzyskać ten pomysł.

Należy również pamiętać, że kładę gradientu tła w elemencie pseudo więc pojawiają się w przedniej części ruchomego obiektu:

.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

Znalazłem to stało się gładsza

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