悬停后如何在鼠标移出时反转动画

Question

这正是我想要实现的（动画在我悬停时开始，在我悬停后恢复）。我只是不希望动画开始，直到我将鼠标悬停在对象上。在代码中，动画在刷新后立即开始。

.class {
  animation-name: out;
  animation-duration: 2s;
  /* Safari and Chrome: */
  -webkit-animation-name: out;
  -webkit-animation-duration: 2s;
}
.class:hover {
  animation-name: in;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-direction: normal;
  /* Safari and Chrome: */
  -webkit-animation-name: in;
  -webkit-animation-duration: 5s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
}
@keyframes in {
  from {
    transform: rotate(50deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes in
/* Safari and Chrome */

{
  from {
    transform: rotate(50deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}
@keyframes out {
  from {
    transform: rotate(360deg);
  }
  to {
    transform: rotate(0deg);
  }
}
@-webkit-keyframes out
/* Safari and Chrome */

{
  from {
    transform: rotate(360deg);
  }
  to {
    -webkit-transform: rotate(0deg);
  }
}

<div style="width:100px; height:100px; background-color:red" class="class"></div>

Answer 1

你可以去掉动画，直接在类上添加transform和transition属性，如下所示：

.class {
  transform: rotate(0deg);
  transition: transform 2s;
}

.class:hover {
  transform: rotate(360deg);
  transition: transform 5s;
}

<div style="width:100px; height:100px; background-color:red" class="class"></div>