CSS动画和转场无法协同工作

Question

当我将鼠标悬停在元素上时，我有一个有效的动画，它可以正常工作，但是当我悬停（mouseleave）时，过渡效果不理想。

我想要双向转换：悬停时和元素移动时。 （“悬停”和“悬停”）。

我该如何实现？

这是我的fiddle和下面的代码：

@-webkit-keyframes blobby-wiggle {
  0%,
  100%,
  25%,
  50%,
  75% {
    -webkit-transform: none;
    transform: none;
  }
  12.5% {
    -webkit-transform: scale(1.02, 0.98) rotate(2deg) translate3d(2px, -2px, 0);
    transform: scale(1.02, 0.98) rotate(2deg) translate3d(2px, -2px, 0);
  }
  37.5% {
    -webkit-transform: scale(0.995, 1.01) rotate(1deg) translate3d(-1px, 2px, 0);
    transform: scale(0.995, 1.01) rotate(1deg) translate3d(-1px, 2px, 0);
  }
  62.5% {
    -webkit-transform: scale(1.01, 0.99) rotate(3deg) translate3d(1px, 1px, 0);
    transform: scale(1.01, 0.99) rotate(3deg) translate3d(1px, 1px, 0);
  }
  87.5% {
    -webkit-transform: scale(0.99, 1.02) rotate(4deg) translate3d(-2px, -1px, 0);
    transform: scale(0.99, 1.02) rotate(4deg) translate3d(-2px, -1px, 0);
  }
}

@-webkit-keyframes project-hover {
  0% {
    -webkit-transform: perspective(1600px) rotateX(0) rotateY(0) translateZ(0);
    transform: perspective(1600px) rotateX(0) rotateY(0) translateZ(0);
  }
  16% {
    -webkit-transform: perspective(1600px) rotateX(20deg) rotateY(6deg) translateZ(64px);
    transform: perspective(1600px) rotateX(20deg) rotateY(6deg) translateZ(64px);
  }
  100% {
    -webkit-transform: perspective(1600px) rotateX(0) rotateY(0) translateZ(130px);
    transform: perspective(1600px) rotateX(0) rotateY(0) translateZ(130px);
  }
}

@keyframes project-hover {
  0% {
    -webkit-transform: perspective(1600px) rotateX(0) rotateY(0) translateZ(0);
    transform: perspective(1600px) rotateX(0) rotateY(0) translateZ(0);
  }
  16% {
    -webkit-transform: perspective(1600px) rotateX(20deg) rotateY(6deg) translateZ(64px);
    transform: perspective(1600px) rotateX(20deg) rotateY(6deg) translateZ(64px);
  }
  100% {
    -webkit-transform: perspective(1600px) rotateX(0) rotateY(0) translateZ(130px);
    transform: perspective(1600px) rotateX(0) rotateY(0) translateZ(130px);
  }
}

.product-heading {
  display: inline-block;
  position: relative;
  transition: all 0.5s ease-in-out;
  cursor: default;
  -webkit-animation: blobby-wiggle 8s ease-in-out infinite;
  animation: blobby-wiggle 8s ease-in-out infinite;
  &:hover {
    -webkit-animation: project-hover 0.7s cubic-bezier(0.315, 0.605, 0.375, 0.925) 1;
    animation: project-hover 0.7s cubic-bezier(0.315, 0.605, 0.375, 0.925) 1;
    -webkit-transform: perspective(1600px) rotateY(0) rotateX(0) translate3d(0, 0, 130px);
    transform: perspective(1600px) rotateY(0) rotateX(0) translate3d(0, 0, 130px);
  }
  h3 {
    position: absolute;
    top: 50%;
    left: 10%;
    color: #fff;
  }
}

<div class="product-heading">
  <img src="http://via.placeholder.com/250x150" alt="">
  <h3>Sample Heading</h3>
</div>