html - 延迟特定的变换属性 CSS

Question

我正在努力使 rotate(-45deg) 属性在第一个属性 translateY(6px) 的帮助下延迟不久延迟。但我该怎么做呢？

代码:

transform: translateY(6px) rotate(-45deg);

我一开始以为是这样的:变换:translateY(6px) rotate(-45deg, 2s);

Answer 1

您可以使用两个不同的属性拆分转换。您将旋转保持在变换内，并使用顶部/底部添加平移。

.box {
  margin: 20px;
  position: relative;
  width: 200px;
  height: 200px;
  background: red;
  top: 0;
  transition: transform 0.5s, top 0.5s 0.5s;
}

.box:hover {
  transform: rotate(-45deg);
  top: -50px;
}

<div class="box">

</div>

或者你可以考虑动画:

.box {
  margin: 20px;
  position: relative;
  width: 200px;
  height: 200px;
  background: red;
  top: 0;
}

.box:hover {
  animation:change 1s linear forwards
}

@keyframes change {
  50% {
     transform: rotate(-45deg);
  }
  100% {
    transform: translateY(-50px) rotate(-45deg);
  }
}

<div class="box">

</div>