how to drop div in box using animation css3?

Question

I am trying to change the div position using transaction .it looks like it is dropping in the gift box and then hide

here is my code https://jsbin.com/humujiyano/2/edit?html,css,output

I am trying drop my circle into gift image and circle should hide after drop into gift image.

so it is possible we can divide transition into three phases.if my circle translate into 200px from starting points.so I divide the journey into 3 point A , B , C

A-->B -100px B-->C --100px

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)

.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
}

Answer 1

First step: update your selector

.container:hover > .circle0

when you focus on container, animation will run on circle0. Your code will translate whole container. I think you just want to move with circle.

Second step: I think you are looking for keyframes in css and animation. In keyframes you can set your route of your circle. By changing of

animation: 4s infinite;

you can set duration and repetition of your animation. W3School animation

If you want to translate/animate more than one element, just simply add another keyframe-set and element and run it at the same time. Then it is about playing with timing of the keyframes. Note that the key 0% and 100% should be the same in infinite loops.

.container {
  margin: 10px;
}

.circle0 {
  border-radius: 50%;
  height: 30px;
  width: 30px;
  margin: 10px;
  background: PaleTurquoise;
  transition: all 1.5s linear;
  animation: 4s infinite;
  animation-name: example;
  animation-play-state: paused;
} 

.container:hover > .circle0{
    animation-play-state: running;
  }

@keyframes example {
  0%   {
    transform: translateY(0px);
  }
  25%  {
    transform: translateY(200px);
  }
  50%  {
    transform: translateY(250px);
  }
  75%  {
    transform: translateY(200px);
  }
  100% {
    transform: translateY(0px);
  }
}

.img{
  position :absolute;
  top:250px
}