#container {
    border: solid 1px #aaa ;
    height: 400px; width: 500px; margin: 0 auto;
    padding:  10px; position: relative;
}
#main {
    position: absolute ;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: red;
    left: 210px;
    top: 160px;
}
#ball1 {
   background-color: blue;
   position: absolute;
   top: 200px;
   left: 250px;
   height: 20px ;
   width: 20px;
   border-radius: 50%;
   transition-delay: 0.1s;
   transition: all ease-in-out 2s;



}
#ball2 {
    background-color: blue;
    position: absolute;
    top: 200px;
    left: 250px;
    height: 20px ;
    width: 20px;
    border-radius: 50%;
    transition-delay: 0.2s;
    transition: all ease-in-out 2s;
 
 
 }
 #ball3 {
    background-color: blue;
    position: absolute;
    top: 200px;
    left: 250px;
    height: 20px ;
    width: 20px;
    border-radius: 50%;
    transition-delay: 0.3s;
    transition: all ease-in-out 2s;
 
 
 }
 #ball4 {
    background-color: blue;
    position: absolute;
    top: 200px;
    left: 250px;
    height: 20px ;
    width: 20px;
    border-radius: 50%;
    transition-delay: 0.4s;
    transition: all ease-in-out 2s;
 
 
 }
 #ball5 {
    background-color: blue;
    position: absolute;
    top: 200px;
    left: 250px;
    height: 20px ;
    width: 20px;
    border-radius: 50%;
    transition-delay: 0.5s;
    transition: all ease-in-out 2s;
 
 
 }
 #ball6 {
    background-color: blue;
    position: absolute;
    top: 200px;
    left: 250px;
    height: 20px ;
    width: 20px;
    border-radius: 50%;
    transition-delay: 0.6s;
    
    transition: all ease-in-out 2s;
 
 }
 #ball7 {
    background-color: blue;
    position: absolute;
    top: 200px;
    left: 250px;
    height: 20px ;
    width: 20px;
    border-radius: 50%;
    transition-delay: 0.7s;
    
 
    transition: all ease-in-out 2s;
 }
 #ball8 {
    background-color: blue;
    position: absolute;
    top: 200px;
    left: 250px;
    height: 20px ;
    width: 20px;
    border-radius: 50%;
    transition-delay: 0.8s;
    
 
    transition: all ease-in-out 2s;
 }
 #container:hover  #ball1 {
    transform: translate(-250px , 200px);
 }
 #container:hover  #ball2 {
    transform: translate(0px , -200px);
 }
 #container:hover  #ball3 {
    transform: translate(250px ,-200px);
 }
 #container:hover  #ball4 {
    transform: translate(250px , 0px);
 }
 #container:hover  #ball5{
    transform: translate(250px , 200px);
 }
 #container:hover  #ball6{
    transform: translate(0px , 200px);
 }#container:hover  #ball7{
    transform: translate(-250px , 0px);
 }
 #container:hover  #ball8{
    transform: translate(-250px , -200px);}
 }