title: How can I create an infinite scale mouseover animation with a smooth mouseout effect with css?
body: <p>I'm coding a CSS3 effect fired on mouseover; this effect simply animate an inner div scaling it endlessly.</p>
  
  <p>All works great, but when I move the mouse away the div suddenly return to its original size. I would like to add a smooth effect to scale the div back.</p>
  
  <p>I already checked the suggestion of this post:
  <a href="https://stackoverflow.com/questions/17100235/make-css-hover-state-remain-after-unhovering">Make CSS Hover state remain after &quot;unhovering&quot;</a>
  Unfortunately the code posted doesn't work :(
  In my opinion my issue could be related with the "infinite" loop of the scale effect.</p>
  
  <p>THe goal I would like to gain is the on mouse-out the image could return to its original size smoothly.</p>
  
  <p>Here's the code: <a href="https://jsfiddle.net/9dtqpsLa/1/" rel="nofollow noreferrer">https://jsfiddle.net/9dtqpsLa/1/</a></p>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>@keyframes imageZoom{
      0% { transform: scale(1); }
      50% { transform: scale(1.24); }
      100% { transform: scale(1);}
  }
  
  @-moz-keyframes imageZoom{
      0% { -moz-transform: scale(1);}
      50% { -moz-transform: scale(1.24); }
      100% { -moz-transform: scale(1); }
  }
  
  @-webkit-keyframes imageZoom{
      0% { -webkit-transform: scale(1); }
      50% {-webkit-transform: scale(1.24); }
      100% { -webkit-transform: scale(1); }
  }
  
  @-ms-keyframes imageZoom{
      0% { -ms-transform: scale(1); }
      50% { -ms-transform: scale(1.24); }
      100% { -ms-transform: scale(1); }
  }
  
  .article:hover .imageWrapper {
      animation: imageZoom linear 10s;
      animation-iteration-count: infinite;
      -webkit-animation: imageZoom linear 10s;
      -webkit-animation-iteration-count: infinite;
      -moz-animation: imageZoom linear 10s;
      -moz-animation-iteration-count: infinite;
      -ms-animation: imageZoom linear 10s;
      -ms-animation-iteration-count: infinite;
      transform-origin: 50% 80%;
  }
  
  .article {
      background-color: #e6e6e6;
      overflow: hidden;
      width: 300px;
      height: 300px;
  }
  
  .imageWrapper {
      background-image: url('http://www.astutegraphics.com/images/blog/tutorials/widthscribe_patterns_18_mar_2013/floral-seamless-pattern.png');
      width: 300px;
      height: 300px;
  }
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="article"&gt;
      &lt;div class="imageWrapper"&gt;
  
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Please, could you help me?</p>
  
  <p>Thanks so much</p>