如何使用 html 和 css 关键帧创建动画

Question

我正在尝试使用 html 和 css 动画关键帧创建这个漂亮的动画，但我被卡住了。我尝试过更改旋转和变换，但无法得到如下图所示的结果。您可以从下图中看到，盒子向内折叠以隐藏文本“Hi”，然后它们向外展开，再次显示文本。盒子颜色不是问题，我的动画有问题。

这是我到目前为止所做的。

/* styles.css */
.container {
  display: flex;
  justify-content: center;
  align-items: center; 
  height: 400px; 
}

.group {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 200px;
  margin: 0 15px; 
}

.topleft {
  width: 100px; 
  height: 75px; 
  border-radius: 10px;
  margin: 0 auto;
  transform-origin: bottom left;
}

.topright {
  width: 100px; 
  height: 75px; 
  border-radius: 10px;
  margin: 0 auto;
  transform-origin: bottom left;
}

.bottomleft {
  width: 100px; 
  height: 75px; 
  border-radius: 10px;
  margin: 0 auto;
  transform-origin: bottom right;
}

.bottomright {
  width: 100px; 
  height: 75px; 
  border-radius: 10px;
  margin: 0 auto;
  transform-origin: bottom left;
}

.topleft {
  background-color: steelblue;
  animation: rotateTopLeft 2s linear infinite; 
}

.topright {
  background-color: steelblue;
  animation: rotateTopRight 2s linear infinite; 
}

.bottomleft {
  background-color: steelblue;
  animation: rotateTopLeft 2s linear infinite; 
}

.bottomright {
  background-color: steelblue;
  animation: rotateTopRight 2s linear infinite; 
}

@keyframes rotateTopLeft {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-90deg);
  }
}

@keyframes rotateTopRight {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-90deg);
  }
}

@keyframes rotateBottomLeft {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(90deg);
  }
}

@keyframes rotateBottomRight {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-90deg);
  }
}

.bottomleft {
  background-color: yellow;
}

.topright {
  background-color: rosybrown;
}

.topright {
  background-color: diegray;
}

.space {
  width: 100px; 
  height: 75px; 
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
}

  <div class="container">
    <div class="group left">
      <div class="box topleft steelblue"></div>
      <div class="box bottomleft yellow"></div>
    </div>
    <div class="space">Hi</div>
    <div class="group right">
      <div class="box topright diegray"></div>
      <div class="box bottomright rosybrown"></div>
    </div>
  </div>

Answer 1

依赖于该动画的变换原点是一个问题，它有点令人困惑。为了简化它，我制作了这个片段，如果您单击，则其中包含正确的动画。它基本上依赖于对所有盒子有效的one转换语句，动画的“方向”由每个盒子的CSS变量集单独确定：

transform: translateX(calc(-100% * var(--xdir,1))) rotateZ(calc(90deg * var(--rdir,1)));

通过将盒子放在预期的位置并使用类似

grid

的东西，你可以确保它总是看起来不错。然后你可以使用变换将它们移开。但实际上不要“移动”这些框，“使用变换”，因为它们不会影响页面的布局，只会影响页面的视觉外观。这样您就可以确保它们不会开始相互影响。不管怎样，试试这个：

document.body.addEventListener( 'click', event => {
    
  document.querySelector( 'main' ).classList.toggle( 'expanded' );
  
});

main {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}
main span {
  grid-column: 1 / span 2;
  grid-row: 1 / span 2;
  margin: auto;
  display: block;
}
main span.box {
  margin: 0;
  display: block;
  width: 100px;
  height: 100px;
  background: red;
  transition: transform .5s;
}
main span.box.tl,
main span.box.bl {
  grid-column: 1;
  margin-left: auto;
}
main span.box.tr,
main span.box.br {
  grid-column: 2;
  margin-right: auto;
}
main span.box.tl,
main span.box.tr {
  grid-row: 1;
  margin-top: auto;
}
main span.box.bl,
main span.box.br {
  grid-row: 2;
  margin-bottom: auto;
}
main span.box.bl,
main span.box.tr {
  background: blue;
}
main span.box.br,
main span.box.tr {
  --xdir: -1;
}
main span.box.tr,
main span.box.bl {
  --rdir: -1;
}

main.expanded span.box {
  transform: translateX(calc(-100% * var(--xdir,1))) rotateZ(calc(90deg * var(--rdir,1)));
}

<main>
  <span>Hi!</span>
  <span class="box tl"></span>
  <span class="box tr"></span>
  <span class="box bl"></span>
  <span class="box br"></span>
</main>