Question

我正在尝试通过延迟使rotate(-45deg)属性在第一个属性translateY(6px)之后不久延迟。但是我该怎么做？

代码：

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

我首先认为是这样的： transform: 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>

或者您可以考虑animation：

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

延迟特定的转换属性CSS

1 个答案: