logo标签列表

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

htmlcsscss-animations
4
我的自定义@keyframes动画没有按照预期工作。
当旋转时，Block 1和Block 2之间没有间隙，但是Block 2和Block 3、Block 3和Block 4以及Block 4和Block 1之间存在一小段间隙。
我不明白为什么会出现上述块之间的间隙，或者为什么在 Block 1 和 Block 2 之间没有块。我该怎么做才能去掉这些间隙，使其看起来像一个没有间隙的盒子呢？
如果对代码有其他建议，也欢迎提供。以下是代码： 

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

我会尝试旋转整个东西，也许你可以在这里得到一些想法：https://davidwalsh.name/demo/css-cube.php - Medda86
哇！那样的样式真不错，我一定会去看看。谢谢。 - Jasbindar Singh
不用谢 :) - Medda86
1个回答
4
这是因为你在动画状态之间改变了transform-origin，应该添加更多的状态以快速改变transform-origin。通过改变transform-origin，你可以逻辑上改变元素旋转，并创建一个不需要的运动，从而产生你看到的间隙。 为什么在块1和块2之间看不到它? 简单地说，如果你查看两个元素的第一个状态，你将看不到任何对transform-origin的更改，因此就不会有移动来创建间隙，与其他状态不同。 

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

但是，增加更多的状态是否会稍微影响动画定时呢？@Temani Afif - Jasbindar Singh
@JasbindarSingh 不会的;)它的想法是防止 transform-origin 的动画，所以我只需添加另一个状态来快速更改它并保持转换不变，因此只有 transform-origin 受到影响，其他一切都很好，您可以注意到 :) - Temani Afif
是的，我明白你的意思了，我只是想确认一下时间是否会改变。感谢你的解释。 :) @TemaniAfif - Jasbindar Singh
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接