title: CSS Animations and Transitions are not working together
body: <p>I have a working animation when hovering the element, it works fine but when I hover off (mouseleave) the transition is not working as expected.</p>
  
  <p>I want a two-way transition:  when hovering and when moving moving off of element. ("on hover" and "off hover").</p>
  
  <p>How can I achieve this?</p>
  
  <p>Here is my <a href="http://jsfiddle.net/04phydtb/10/" rel="nofollow noreferrer">fiddle</a> and code below:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@-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;
    &amp;: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;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="product-heading"&gt;
    &lt;img src="http://via.placeholder.com/250x150" alt=""&gt;
    &lt;h3&gt;Sample Heading&lt;/h3&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>