title: Scale to original size on mouseout using CSS
body: <p>I'm using the keyframes to create an infinite scale up and scale down of a div on mouseover.
  As you can see from the link below the parent box increase its sizes and then the child div start to scale up and down.
  I would like that on mouse out, before the parent div will scale down, the child div return to its regular sizes in a smooth way.
  Now, as you can see, it return to the original sizes suddenly, without any smoothness.</p>
  
  <p>My keyframes:</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); }
  }
  </code></pre>
  
  <p>The child div styles:</p>
  
  <pre><code>#myFeaturedItems:hover article {
      animation: imageZoom linear 50s;
      animation-iteration-count: infinite;
      -webkit-animation: imageZoom linear 50s;
      -webkit-animation-iteration-count: infinite;
      -webkit-animation-delay: 1.5s;
      animation-delay: 1.5s;
  }
  
  #myFeaturedItems article {
      background-image: url('https://images.unsplash.com/photo-1447688812233-3dbfff862778?ixlib=rb-0.3.5&amp;q=80&amp;fm=jpg&amp;crop=entropy&amp;s=01b98cd0603404826ec5df6d9ef46dfc');
      background-position: center center;
      background-size: cover;
      display: block;
      height: 100%;
      width: 100%;
  }
  </code></pre>
  
  <p>My demo link: <a href="http://emanuelezenoni.com/dev/test/" rel="nofollow">http://emanuelezenoni.com/dev/test/</a></p>
  
  <p>Thanks a lot!</p>