/*http://css3.bradshawenterprises.com/transitions/  */
.scherm{
  width: 500px;
  height: 500px;
  border: 1px #aaa solid;
  left:10%;
  top: 10%;
  position: absolute;

}
.roodbolletje{
	width: 100px;
    height: 100px;
    background-color: red;
	position: absolute;
	top: 50%; /*midden*/
	left: 50%;
	margin:-50px 0 0 -50px;
	border-radius: 100%;
    -webkit-transition:  all 3s ease-in-out;
    /*
    all value
    https://css-tricks.com/almanac/properties/t/transition/

    In this above example, all ccs properties transition, due to the value “all” specified for the transition-property portion of the shorthand.
    */
}
.bolletje {
	width: 20px;
    height: 20px;
    background-color: blue;
	position: absolute;
	top: 50%; /*midden*/
	left: 50%;
	margin:-10px 0 0 -10px;
	border-radius: 100%;
    -webkit-transition:  all 2s ease-in-out;
}
.b1{
 -webkit-transition-delay:0.1s;
}
.b2{
 -webkit-transition-delay:0.5s;
}
.b3{
    -webkit-transition-delay:0.9s;
   }
   .b4{
    -webkit-transition-delay:1.3s;
   }
   .b5{
    -webkit-transition-delay:1.7s;
   }
   .b6{
    -webkit-transition-delay:2.1s;
   }
   .b7{
    -webkit-transition-delay:2.5s;
   }
   .b8{
    -webkit-transition-delay:2.9s;
   }
.scherm:hover .b1 { /*!!!!*/
	-webkit-transform: translateX(-240px) translateY(-240px);/*startpunt = midden van scherm*/
}
.scherm:hover .b2 {
	-webkit-transform: translateX(240px) translateY(240px);
}

.scherm:hover .b3 {
	-webkit-transform: translateX(0px) translateY(240px);
}

.scherm:hover .b4 {
	-webkit-transform: translateX(240px) translateY(-240px);
}

.scherm:hover .b5 {
	-webkit-transform: translateX(0px) translateY(-240px);
}

.scherm:hover .b6 {
	-webkit-transform: translateX(-240px) translateY(240px);
}

.scherm:hover .b7 {
	-webkit-transform: translateX(-240px) translateY(0px);
}

.scherm:hover .b8 {
	-webkit-transform: translateX(240px) translateY(0px);
}
.scherm:hover .roodbolletje {
	opacity:0;
}