我应该如何在discord应用程序中进行此css转换？

Question

我正在尝试进行我在discord app中看到的css过渡，有两个正方形在顺时针方向上缩放，旋转和平移。

最初，他们处于对角线位置。

以下是我的尝试，但我没有把它做得很好。

.box {
  position: relative;
  width: 100px;
  height: 100px;
  margin: 10%;
}

.box1,
.box2 {
  height: 20px;
  width: 20px;
  background: red;
}

.box1 {
  position: absolute;
  top: 0;
  left: 0;
  animation: move 4s infinite ease-in-out;
}

.box2 {
  position: absolute;
  bottom: 0;
  right: 0;
  animation: move 4s infinite ease-in-out;
  animation-delay: 1s;
}

@keyframes move {
  25% {
    transform: translateX(100px) rotate(90deg) scale(0.5)
  }
  50% {
    transform: translateX(100px) translateY(100px) rotate(180deg) scale(1)
  }
  75% {
    transform: translateX(0px) translateY(100px) rotate(270deg) scale(0.5)
  }
  100% {
    transform: rotate(360deg) scale(1)
  }
}

<div class="box">
  <div class="box1"></div>
  <div class="box2"></div>
</div>

Answer 1

因为两个方块都应该遵循相同的路径，我们可以做的是使用相同的关键帧，但强制方二来开始动画的一半，这可以通过给animation-delay:一个否定动画总时间的一半，在这种情况下为-2。

＆＃13;

＆＃13;

.box {
  position: relative;
  width: 100px;
  height: 100px;
  margin: 10%;
}

.box1,
.box2 {
  height: 20px;
  width: 20px;
  background: red;
}

.box1 {
  position: absolute;
  top: 0;
  left: 0;
  animation: move 4s infinite ease-in-out;
}

.box2 {
  position: absolute;
  bottom: 0;
  right: 0;
  animation: move 4s infinite ease-in-out;
  animation-delay: -2s;
}

@keyframes move {
  25% {
    transform: translateX(100px) rotate(90deg) scale(0.5)
  }
  50% {
    transform: translateX(100px) translateY(100px) rotate(90deg) scale(1)
  }
  75% {
    transform: translateX(0px) translateY(100px) rotate(90deg) scale(0.5)
  }
  100% {
    transform: rotate(90deg) scale(1)
  }
}

＆＃13;

<div class="box">
  <div class="box1"></div>
  <div class="box2"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

这就是我实现它的方法，幸运的是得到了一个有用的版本here

＆＃13;

＆＃13;

.box {
  position: relative;
  width: 100px;
  height: 100px;
  margin: 10%;
}

.box1,
.box2 {
  height: 20px;
  width: 20px;
  background: red;
}

.box1 {
  position: absolute;
  top: 0;
  left: 0;
  animation: move 2s infinite ease-in-out;
}

.box2 {
  position: absolute;
  top: 0;
  left: 0;
  animation: move 2s infinite ease-in-out;
  animation-delay: 1s;
}

@keyframes move {
  25% {transform: translateX(42px) rotate(-90deg) scale(0.5) }
  50% {transform: translateX(42px) translateY(42px) rotate(-180deg) }
  75% {transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5) }
  100% {transform: rotate(-360deg) }
}

＆＃13;

<div class="box">
  <div class="box1"></div>
  <div class="box2"></div>
</div>

＆＃13;

＆＃13;

＆＃13;