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

#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); }