title: how to scale a div to 0.5 and than to 1 using css animation?
body: <p>I'm trying to implement go-out go-in effect using css animation.</p>
  
  <p>I want the item to go back fast and than scale back to 1 slower.</p>
  
  <p>Something like this:</p>
  
  <pre><code>div {
  
      height: 200px;
      width: 200px;
      background-color: green;
    border: 1px grey solid;
    position: absolute;
  
      -webkit-transition-property: -webkit-transform, -webkit-transform;
      -webkit-transition-duration: 0.1s, 0.5s;
      -webkit-transition-timing-function: ease-out, ease-in;
      -webkit-transition-delay: 0, 0;
  }
  
  div:hover {
    -webkit-transform: scale(0.5);
  -webkit-transform: scale(1); 
  
  }
  </code></pre>
  
  <p>Any ideas?</p>