Question

JS Fiddle

我有一个正方形，在悬停时向下移动10px然后旋转。当我离开悬停时，我希望它向后旋转，然后再回到0px。

不幸的是，它没有以相反的顺序进行动画制作。

所以它应该在悬停时：

向下移动10px。
旋转45度。

然后徘徊：

向后旋转至0度。
移回0px的原始位置;

代码：

＆＃13;

div{
  width: 100px;
  height: 100px;
  background: blue;
  top: 0;
  cursor: pointer;
  position: absolute;
  transition: top 0.3s ease;
  transition: transform 0.3s 0.3s ease;
}

div:hover{
  top: 10px;
  transform: rotate(45deg);
}

＆＃13;

<div>

</div>

＆＃13;

Answer 1

您的代码遇到了2个小问题，第一个问题是您将transition设置了两次。在这种情况下，第二个将简单地覆盖第一个。简单修复：以逗号分隔的列表：

transform top 0.3s ease, 0.3s 0.3s ease;

现在，至于颠倒动画播放的顺序 - 我们想要做的是根据我们移动的方向为转换设置不同的顺序。如果我们处于悬停状态，我们总是希望继续前进，否则反过来：

＆＃13;

div{
  width: 100px;
  height: 100px;
  background: blue;
  top: 0;
  cursor: pointer;
  position: absolute;
  transition: transform 0.3s ease, top 0.3s 0.3s ease;
}

div:hover{
  top: 10px;
  transform: rotate(45deg);
  transition: transform 0.3s 0.3s ease, top 0.3s ease;
}

＆＃13;

<div></div>

＆＃13;

Answer 2

这就是你想要的吗

DEMO HERE

<强> CSS

div{
  width: 100px;
  height: 100px;
  background: blue;
  top: 0;
  cursor: pointer;
  position: absolute;
  transition: transform 0.3s ease, top 0.3s 0.3s ease;
}

div:hover{
  top: 10px;
  transform: rotate(45deg);
  transition: top 0.3s ease, transform 0.3s 0.3s ease;

}

https://jsfiddle.net/luispa/7gom9bhr/3/

如何撤消延迟动画？

2 个答案: