为什么我的自定义动画不能正常工作?

My custom @keyframes animation is not working the way it should.

我的自定义@keyframe动画没有按照它应该的方式运行。

There is no gap between Block 1 and Block 2 when rotating but there is a small gap between Block 2 and Block 3, Block 3 and Block 4, and, Block 4 and Block 1.

第1块和第2块之间没有间隙，但在第2块和第3块、第3块和第4块和第4块和第1块之间有一个小间隙。

I cant understand why there is a gap between the above listed block or why there is no block between Block 1 and Block 2. What should I do to remove the gaps, I want it to look like a box without the gaps.

我不明白为什么上面列出的块之间有间隙，为什么块1和块2之间没有块。我该怎么做才能去掉空隙，我想让它看起来像一个没有空隙的盒子。

Any other advice on the code is also appreciated. Below is the code.

对于代码的任何其他建议也将受到赞赏。下面是代码。

.main {
  width: 250px;
  height: 100px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.main>div {
  width: 250px;
  height: 100px;
  position: absolute;
  text-align: center;
  line-height: 100px;
  color: #fff;
  font-weight: bold;
  font-family: monospace;
  font-size: 2em;
  transition: 1s;
  cursor: pointer;
}

.child1 {
  background: red;
  transform-origin: bottom;
  animation: animate1 8s infinite;
}

.child2 {
  background: blue;
  transform-origin: top;
  animation: animate2 8s infinite;
}

.child3 {
  background: yellow;
  transform-origin: bottom;
  animation: animate3 8s infinite;
}

.child4 {
  background: green;
  transform-origin: top;
  animation: animate4 8s infinite;
}


/*.main:hover .child1{
	transform: translateY(-100%) rotateX(90deg);
}

.main:hover .child2{
	transform: translateY(0%) rotateX(0deg);
}*/

@keyframes animate1 {
  0% {
    transform: translateY(0%) rotateX(0deg);
  }
  25% {
    transform-origin: bottom;
    transform: translateY(-100%) rotateX(90deg);
  }
  50% {
    transform-origin: bottom;
    transform: translateY(-100%) rotateX(90deg);
  }
  75% {
    transform-origin: top;
    transform: translateY(100%) rotateX(90deg);
  }
  100% {
    transform-origin: top;
    transform: translateY(0%) rotateX(0deg);
  }
}

@keyframes animate2 {
  0% {
    transform: translateY(100%) rotateX(90deg);
  }
  25% {
    transform-origin: top;
    transform: translateY(0%) rotateX(0deg);
  }
  50% {
    transform-origin: bottom;
    transform: translateY(-100%) rotateX(90deg);
  }
  75% {
    transform-origin: bottom;
    transform: translateY(-100%) rotateX(90deg);
  }
  100% {
    transform-origin: top;
    transform: translateY(100%) rotateX(90deg);
  }
}

@keyframes animate3 {
  0% {
    transform: translateY(-100%) rotateX(90deg);
  }
  25% {
    transform-origin: top;
    transform: translateY(100%) rotateX(90deg);
  }
  50% {
    transform-origin: top;
    transform: translateY(0%) rotateX(0deg);
  }
  75% {
    transform-origin: bottom;
    transform: translateY(-100%) rotateX(90deg);
  }
  100% {
    transform-origin: bottom;
    transform: translateY(-100%) rotateX(90deg);
  }
}

@keyframes animate4 {
  0% {
    transform: translateY(-100%) rotateX(90deg);
  }
  25% {
    transform-origin: bottom;
    transform: translateY(-100%) rotateX(90deg);
  }
  50% {
    transform-origin: top;
    transform: translateY(100%) rotateX(90deg);
  }
  75% {
    transform-origin: top;
    transform: translateY(0%) rotateX(0deg);
  }
  100% {
    transform-origin: bottom;
    transform: translateY(-100%) rotateX(90deg);
  }
}

<div class="main">
  <div class="child1">Block 1</div>
  <div class="child2">Block 2!</div>
  <div class="child3">Block 3</div>
  <div class="child4">Block 4</div>
</div>

1 个解决方案

#1

This is due to the fact that you are animating the transform-origin between states, you should avoid this by adding more states in order to rapidly change the transform-origin. By changing the transform-origin you logically change how the element rotate and you create an unwanted movement that create the gap you see.

这是由于您正在激活状态间的转换源，您应该通过添加更多的状态来快速更改转换源来避免这一点。通过改变转换源，您在逻辑上改变了元素的旋转方式，并且您创建了一个不需要的移动来创建您所看到的间隙。

Why you don't see it between block 1 and block 2?

为什么在block 1和block 2之间看不到呢?

Simply because if you look at the first states of both elements you will see no change on transform-origin so there is no movement that will create the gap unlike the other states:

原因很简单，如果你观察这两个元素的第一种状态，你会发现在变形起源上没有任何变化，所以没有任何运动会产生与其他状态不同的间隙:

.main {
  width: 250px;
  height: 100px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.main>div {
  width: 250px;
  height: 100px;
  position: absolute;
  text-align: center;
  line-height: 100px;
  color: #fff;
  font-weight: bold;
  font-family: monospace;
  font-size: 2em;
  transition: 1s;
  cursor: pointer;
}

.child1 {
  background: red;
  transform-origin: bottom;
  animation: animate1 8s infinite;
}

.child2 {
  background: blue;
  transform-origin: top;
  animation: animate2 8s infinite;
}

.child3 {
  background: yellow;
  transform-origin: bottom;
  animation: animate3 8s infinite;
}

.child4 {
  background: green;
  transform-origin: top;
  animation: animate4 8s infinite;
}

@keyframes animate1 {
  0% {
    transform-origin: bottom;
    transform: translateY(0%) rotateX(0deg);
  }
  25% {
    transform-origin: bottom;
    transform: translateY(-100%) rotateX(90deg);
  }
  50% {
    transform-origin: bottom;
    transform: translateY(-100%) rotateX(90deg);
  }
  75% {
    transform-origin: top;
    transform: translateY(100%) rotateX(90deg);
  }
  100% {
    transform-origin: top;
    transform: translateY(0%) rotateX(0deg);
  }
}

@keyframes animate2 {
  0% {
    transform-origin: top;
    transform: translateY(100%) rotateX(90deg);
  }
  25% {
    transform-origin: top;
    transform: translateY(0%) rotateX(0deg);
  }
  25.5% {
    transform-origin: bottom;
    transform: translateY(0%) rotateX(0deg);
  }
  50% {
    transform-origin: bottom;
    transform: translateY(-100%) rotateX(90deg);
  }
  75% {
    transform-origin: bottom;
    transform: translateY(-100%) rotateX(90deg);
  }
  75.5% {
    transform-origin: top;
    transform: translateY(-100%) rotateX(90deg);
  }
  100% {
    transform-origin: top;
    transform: translateY(100%) rotateX(90deg);
  }
}

@keyframes animate3 {
  0% {
    transform-origin: bottom;
    transform: translateY(-100%) rotateX(90deg);
  }
  0.5% {
    transform-origin: top;
    transform: translateY(-100%) rotateX(90deg);
  }
  25% {
    transform-origin: top;
    transform: translateY(100%) rotateX(90deg);
  }
  50% {
    transform-origin: top;
    transform: translateY(0%) rotateX(0deg);
  }
  50.5% {
    transform-origin: bottom;
    transform: translateY(0%) rotateX(0deg);
  }
  75% {
    transform-origin: bottom;
    transform: translateY(-100%) rotateX(90deg);
  }
  100% {
    transform-origin: bottom;
    transform: translateY(-100%) rotateX(90deg);
  }
}

@keyframes animate4 {
  0% {
    transform-origin: top;
    transform: translateY(-100%) rotateX(90deg);
  }
  0.5% {
    transform-origin: top;
    transform: translateY(-100%) rotateX(90deg);
  }
  25% {
    transform-origin: bottom;
    transform: translateY(-100%) rotateX(90deg);
  }
  25.5% {
    transform-origin: top;
    transform: translateY(-100%) rotateX(90deg);
  }
  50% {
    transform-origin: top;
    transform: translateY(100%) rotateX(90deg);
  }
  75% {
    transform-origin: top;
    transform: translateY(0%) rotateX(0deg);
  }
  75.5% {
    transform-origin: bottom;
    transform: translateY(0%) rotateX(0deg);
  }
  100% {
    transform-origin: bottom;
    transform: translateY(-100%) rotateX(90deg);
  }
}

<div class="main">
  <div class="child1">Block 1</div>
  <div class="child2">Block 2!</div>
  <div class="child3">Block 3</div>
  <div class="child4">Block 4</div>
</div>