@charset "UTF-8";
/* CSS Document */

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

#ball1, #ball2, #ball3, #ball4,#ball5, #ball6,#ball7, #ball8 { background-color:blue; height: 20px; width: 20px; border-radius: 10px; position:absolute; top: 200px; left: 250px; transition: all 2s ease-in-out;}

#ball1 {transition-delay: 0.1s; }
#ball2 {transition-delay: 0.2s; }
#ball3 {transition-delay: 0.3s; }
#ball4 {transition-delay: 0.4s; }
#ball5 {transition-delay: 0.5s; }
#ball6 {transition-delay: 0.6s; }
#ball7 {transition-delay: 0.7s; }
#ball8 {transition-delay: 0.8s; }

#container:hover #main { opacity: 0;}

#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,-200px);}
#container:hover #ball8 { transform:translate(-250px, 0px);}