css - 关键帧的异常行为

情况如下，当立方体需要沿X轴旋转（从-40deg到40deg）时，由于某种原因它跳了起来，在动画结束时我做了相反的操作（从40deg到-40deg），立方体正常旋转。
请告诉我，可能是什么原因！代码如下所示。

.container {
  position: relative;
  top: 500px;
}

.box {
  position: absolute;
  font-size: 4em;
  width: 2em;
  height: 2em;
  margin: 1.5em auto;
  perspective: 10000px;
  transform-style: preserve-3d;
  transform: rotateX(-40deg) rotateY(44deg);
}

.box11 {
  animation: rot11 12s linear infinite;
}

.side {
  position: absolute;
  width: 2em;
  height: 2em;
  background: linear-gradient(#e66465, #9198e5);
  color: white;
}

.top {
  transform: rotateX( 90deg) translateZ(1em);
  background: linear-gradient(153deg, #e66465, #9198e5);
  animation: topUCol 24s linear infinite;
}

.right {
  transform: translateZ(1em);
  animation: rightUCol 24s linear infinite;
}

.left {
  transform: rotateY(-90deg) translateZ(1em);
  background: linear-gradient(127deg, #c45a5b, #6f76b2);
}

.bottom {
  transform: rotateX(-90deg) translateZ(1em);
  animation: bottomUCol 24s linear infinite;
}

@keyframes rot11 {
  0% {
    transform: rotateX(-40deg) rotateY(44deg);
  }
  10% {
    transform: rotateX(-40deg) rotateY(44deg) translate3d(0, -507px, 0);
  }
  40% {
    transform: rotateX(-40deg) rotateY(44deg) translate3d(0, -507px, 0);
  }
  50% {
    transform: rotateX(-40deg) rotateY(44deg) translate3d(0, -507px, 0);
  }
  60% {
    transform: rotateX(40deg) rotateY(44deg) translate3d(0, -507px, 0);
  }
  70% {
    transform: rotateX(40deg) rotateY(44deg) translate3d(0, -507px, 0);
  }
  80% {
    transform: rotateX(40deg) rotateY(44deg) translate3d(0, -507px, 0);
  }
  90% {
    transform: rotateX(40deg) rotateY(44deg);
  }
  100% {
    transform: rotateX(-40deg) rotateY(44deg);
  }
}

<div class='container'>
  <div class='box box11'>
    <div class='left side '></div>
    <div class='right side'></div>
    <div class='top side'></div>
    <div class='bottom side'></div>
  </div>
</div>

请问我，可能是什么原因！代码如下所示。

最佳答案

MDN translateX() documentation撰写有关translateX（）的内容


  rotationX（）CSS函数定义了一个旋转
  横坐标（水平轴）周围的元素不变形。
  其结果是数据类型。
  
  旋转轴穿过原点，该原点由
  transform-origin CSS属性。


什么是“起源”？

MDN transform-origin documentation撰写有关transform-origin的内容：


  转换原点是转换的起点
  被申请;被应用。例如，rotate（）的转换原点
  功能是旋转的中心。 （此属性首先应用
  用属性的取反值翻译元素，然后
  应用元素的变换，然后按属性进行翻译
  值。）


让我们总结一下。


浏览器检查与我们正在处理的元素相对应的原点。
浏览器通过该点绘制一条虚构的水平线（水平轴）。
当您应用rotateX()元素时，它将绕此轴旋转。


translate3d()如何影响我的轮换。

translate3d()沿元素的原点沿其x，y和z轴移动元素。如果沿元素的y轴移动元素（在x轴和元素之间创建距离），旋转将使元素旋转到与x轴相距已创建的距离。要查看实际效果，请参见代码示例。

补充阅读

如果您真的对它在后台的工作方式感兴趣，则可能需要阅读矩阵。矩阵还可以在后台用于其他操作（例如SVG中的各种滤镜效果）。您可以阅读MDN documentation: Matrix math for the web。

因为您询问了原因，所以我没有使用您的代码，而是通过以下示例说明了发生的情况：

这是my codePen of the same code的链接（可能更易于观看）。

// don't pay attention to the javascript, it doesn't do anything aside from changing the text.
function setDescription (newText, timeout){
	setTimeout(() => {
	 document.getElementById('description').innerText = newText;
  }, timeout);
}

setDescription ('Rotating around X-axis', 0);
setDescription ('Rotating around Y-axis', 7000);
setDescription ('Move along the Y-axis', 14000);
setDescription ('Rotating around X-axis', 16000);
setDescription ('Returning to starting position', 22000);
setDescription ('Reload to replay', 24000);

#container{
  position: relative;
  height: 500px;
  width: 500px;
  border: 1px solid grey;
}
#description{
  position: absolute;
  left: 0px;
  right: 0px;
  top: 0px;
  text-align: center;
}
#x-axis{
  position: absolute;
  left: 50px;
  top: calc(50% - 1px);
  width: 400px;
  height: 0px;
  border: 1px solid grey;
}
#y-axis{
  position: absolute;
  left: calc(50px - 1px);
  top: 50%;
  width: 400px;
  height: 0px;
  border: 1px solid red;
  transform: rotateZ(90deg);
}

#object{
  position: absolute;
  left: calc(50% - 20px);
  top: calc(50% - 20px);
  width: 40px;
  height: 40px;
  background-color: black;
  animation:
    rotateAroundX 3s linear 0s 2, /*0 - 6s*/
    rotateAroundY 3s linear 7s 2, /*7 - 13s*/
    moveAlongY 2s linear 14s, /*14 - 16s*/
    rotateAroundXAndTranslateY 3s linear 16s 2, /* 16 - 22s*/
    moveBackAlongY 2s linear 22s; /* 22 - 24s*/
}

@keyframes rotateAroundX{
  0%{
    transform: rotateX(0deg);
  }
  100%{
    transform: rotateX(360deg);
  }
}
@keyframes rotateAroundY{
  0%{
    transform: rotateY(0deg);
  }
  100%{
    transform: rotateY(360deg);
  }
}
@keyframes rotateAroundXAndTranslateY{
  0%{
    transform: rotateX(0deg) translate3d(0, 50px, 0);
  }
  100%{
    transform: rotateX(360deg) translate3d(0, 50px, 0);
  }
}
@keyframes moveAlongY{
  0%{
    transform: translate3d(0, 0px, 0);
  }
  50%{
    transform: translate3d(0, 50px, 0);
  }
  100%{
    transform: translate3d(0, 50px, 0);
  }
}
@keyframes moveBackAlongY{
  0%{
    transform: translate3d(0, 50px, 0);
  }
  100%{
    transform: translate3d(0, 0px, 0);
  }
}

<div id="container">
<h3 id="description"></h3>
  <div id="x-axis"></div>
  <div id="y-axis"></div>
  <div id="object"></div>
</div>