时间戳

首页 > 解决方案 > 延迟特定的变换属性 CSS

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

问题描述

我正在努力做到这一点，以便在延迟的帮助下，该rotate(-45deg)属性在第一个属性之后不久被translateY(6px)延迟。但是我该怎么做呢？

代码：

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

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

标签： htmlcssanimation

解决方案

没有简单的方法可以做到这一点，但在您的特定情况下，您可以使用两个不同的属性拆分转换。您将旋转保持在变换内，并使用顶部/底部添加平移。

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

推荐阅读