CSS3 平滑3D旋转的动画功能？

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

我发现这让它更流畅

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

Answer 2

如果你想在 3d 环境中移动你的元素，你可以使用 perspective 属性和实际的 3d 旋转。

现在您正在位置之间的直线上制作动画，因此几乎不可能模拟旋转。我构建了以下示例，您需要调整大小以适合您的项目，但您应该明白了。

另请注意，我将渐变背景放在伪元素中，使其出现在移动对象的前面：

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

CSS3 平滑3D旋转的动画功能？

CSS3 animation function for smooth 3D revolution?

css

rotation

css-animations