用於平滑3D旋轉的CSS3動畫功能？

Question

我有這個pen它試圖模仿一個東西周圍的對象。這工作，但它不光滑。旋轉時左右邊緣會暫停。

我認爲它有一些東西需要與animation-timing-function但不能與任何像ease-in-out或linear或自定義cubic-bezier功能的內置功能得到期望的結果。

我該如何讓動畫感覺流暢？如果有更好的方法可以完成，請隨時通知我。

.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

如果你想打動你的元素在3D environement，您可以使用perspective財產和實際的3D旋轉。

現在你是在動畫位置之間的直線所以模擬旋轉幾乎IMPOSIBLE。我構建了以下示例，您需要調整大小以適合您的項目，但您應該明白。

另外請注意，我把漸變背景中的僞元件，以便它顯示在所述移動物體的前面：

.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

我發現，這使得它更順暢

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