如何在悬停后将鼠标移出动画

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>