：hover animation之后重新播放CSS动画

Question

在下面的代码中，该动画对于初始化和悬停都可以正常播放，但是当我停止悬停时，将重新播放初始动画。我如何停止这种行为？谢谢，

Rik

.logoImage2{
  width:100%;
  -webkit-filter: drop-shadow(12px 8px 4px #222);
  filter: drop-shadow(12px 8px 3px #222);
  padding-bottom:2rem;
  animation: moveInTopRight 5s ease-out;
}

.logoImage2:hover{
  animation: spinY 5s ease-in-out;
}


   @keyframes moveInTopRight {
      0% {
        opacity: 0;
        transform: translate3d(50rem,-50rem,50rem) rotateZ(0);

  }
  80% {
    opacity: .5;
    transform: translate3d(5rem,5rem,5rem) rotateZ(180deg);

  }
  100% {
    opacity: 1;
    transform: translate3d(0,0,0) rotateZ(360deg);

  }
}
@keyframes spinY {
  0% {
 transform:rotateY(0);

  }
  50% {

    transform: rotateY(180deg);

  }
  100% {
    transform: rotateY(360deg);
  }
}

Answer 1

您应该在同一动画中使用它们，以避免第一个动画重新启动：

--shallow-since

.box{
  width: 200px;
  height:200px;
  background:red;
  margin:50px;
  animation: moveInTopRight 5s ease-out;
}

.box:hover {
  animation:moveInTopRight 5s ease-out, spinY 5s ease-in-out;
}

@keyframes moveInTopRight {
  0% {
    opacity: 0;
    transform: translate3d(50rem, -50rem, 50rem) rotateZ(0);
  }
  80% {
    opacity: .5;
    transform: translate3d(5rem, 5rem, 5rem) rotateZ(180deg);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotateZ(360deg);
  }
}

@keyframes spinY {
  0% {
    transform: rotateY(0);
  }
  50% {
    transform: rotateY(180deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}

在这种情况下，您可以用过渡替换第二个动画：

<div class="box">

</div>

.box{
  width: 200px;
  height:200px;
  background:red;
  margin:50px;
  animation: moveInTopRight 5s ease-out;
  transition:0s;
}

.box:hover {
    transform: rotateY(360deg);
    transition:transform 5s  ease-in;
}

@keyframes moveInTopRight {
  0% {
    opacity: 0;
    transform: translate3d(50rem, -50rem, 50rem) rotateZ(0);
  }
  80% {
    opacity: .5;
    transform: translate3d(5rem, 5rem, 5rem) rotateZ(180deg);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotateZ(360deg);
  }
}