title: how to drop div in box using animation css3?
body: <p>I am trying to change the <code>div</code> position using <code>transaction</code>.it looks like it is dropping in the gift box and then hide</p>
  
  <p>here is my code
  <a href="https://jsbin.com/humujiyano/2/edit?html,css,output" rel="nofollow noreferrer">https://jsbin.com/humujiyano/2/edit?html,css,output</a></p>
  
  <p>I am trying drop my circle into gift image and circle should hide after drop into gift image.</p>
  
  <p>so it is possible we can divide transition into three phases.if my circle translate into <code>200px</code> from starting points.so I divide the journey into 3 point <code>A</code>,<code>B</code>,<code>C</code></p>
  
  <p>A-->B -100px
  B-->C --100px</p>
  
  <p>A--->B 100px . (take 1 sec to cover the journey and then wait for 2 sec)
  B--->c 100px  (take 1 sec to drop the gift box and hide)</p>
  
  <pre><code>.container {
    margin: 10px;
  }
  
  
  
  .circle0 {
    border-radius: 50%;
    height: 30px;
    width: 30px;
    margin: 10px;
    background: PaleTurquoise;
    transition: all 1.5s linear;
  } 
  
  .container:hover{
      transform: translateY(200px);
    }
  
  
  .img{
    position :absolute;
    top:250px
  }
  </code></pre>