Question

因此，当你将鼠标悬停在它上面时，我有一个旋转正方形的正方形。当你＆＃34;放开＆＃34;它旋转向另一个方向，向左旋转。

问题是，当我在悬停动画完成之前移除鼠标时，它首先返回到它的起始位置，然后向左旋转。

我想要它，所以当你鼠标移开时，它会从它的当前位置返回到开始位置。

我如何做到这一点？

https://jsfiddle.net/BradMitchell/84rprcmc/1/

＆＃13;

@keyframes rotate_right {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes rotate_left {
  0% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

.square {
  margin: 100px auto;
  width: 100px;
  height: 100px;
  background-color: blue;
  animation: 2s ease rotate_left;
}

.square:hover {
  animation: 2s ease rotate_right;
}

＆＃13;

<div class="square"></div>

＆＃13;

我该怎么做？是否需要两个关键帧，比如我在做什么？

如果悬停未完成，则从当前状态反转悬停css动画

0 个答案: