figure { 
  position: absolute;
  margin: auto;
  top: 0; 
  bottom: 0; 
  left: 0; 
  right: 0;
  width: 6.250em; 
  height: 6.250em;
  animation: rotate 2.4s linear infinite;
  -webkit-animation: rotate 2.4s linear infinite; -moz-animation: rotate 2.4s linear infinite; -ms-animation: rotate 2.4s linear infinite;
}
.white { 
  top: 0; bottom: 0; left: 0; right: 0; 
  background: white; 
  animation: flash 2.4s linear infinite;
  -webkit-animation: flash 2.4s linear infinite; -moz-animation: flash 2.4s linear infinite; -ms-animation: flash 2.4s linear infinite;
  opacity: 0;
}
.dot {
  position: absolute;
  margin: auto;
  width: 2.4em; height: 2.4em;
  border-radius: 100%;
   -webkit-transition: all 1s ease;
      -moz-transition: all 1s ease;
        -o-transition: all 1s ease;
           transition: all 1s ease;
  
}
.dot:nth-child(2) { top: 0; bottom: 0; left: 0; background: #FF4444; animation: dotsY 2.4s linear infinite;-webkit-animation: dotsY 2.4s linear infinite; -moz-animation: dotsY 2.4s linear infinite; -ms-animation: dotsY 2.4s linear infinite; }
.dot:nth-child(3) { left: 0; right: 0; top: 0; background: #FFBB33; animation: dotsX 2.4s linear infinite;-webkit-animation: dotsY 2.4s linear infinite; -moz-animation: dotsY 2.4s linear infinite; -ms-animation: dotsY 2.4s linear infinite; }
.dot:nth-child(4) { top: 0; bottom: 0; right: 0; background: #99CC00; animation: dotsY 2.4s linear infinite;-webkit-animation: dotsY 2.4s linear infinite; -moz-animation: dotsY 2.4s linear infinite; -ms-animation: dotsY 2.4s linear infinite; }
.dot:nth-child(5) { left: 0; right: 0; bottom: 0; background: #33B5E5; animation: dotsX 2.4s linear infinite;-webkit-animation: dotsY 2.4s linear infinite; -moz-animation: dotsY 2.4s linear infinite; -ms-animation: dotsY 2.4s linear infinite; }

/*@keyframes rotate {
  0% { -webkit-transform: rotate( 0 );-moz-transform: rotate( 0 );-ms-transform: rotate( 0 );transform: rotate( 0 ); }
  10% { width: 6.250em; height: 6.250em; }
  66% { width: 2.4em; height: 2.4em; }
  100%{  -webkit-transform: rotate( 360deg );-moz-transform: rotate( 360deg );-ms-transform: rotate( 360deg );transform: rotate(360deg); width: 6.250em; height: 6.250em; }
}*/

@-webkit-keyframes rotate {
  0% { -webkit-transform: rotate( 0 ); }
  10% { width: 6.250em; height: 6.250em; }
  66% { width: 2.4em; height: 2.4em; }
  100%{  -webkit-transform: rotate( 360deg ); width: 6.250em; height: 6.250em; }
}
@-moz-keyframes rotate {
  0% { -moz-transform: rotate( 0 ); }
  10% { width: 6.250em; height: 6.250em; }
  66% { width: 2.4em; height: 2.4em; }
  100%{ -moz-transform: rotate( 360deg ); width: 6.250em; height: 6.250em; }
}
@-ms-keyframes rotate {
  0% { -ms-transform: rotate( 0 );}
  10% { width: 6.250em; height: 6.250em; }
  66% { width: 2.4em; height: 2.4em; }
  100%{ -ms-transform: rotate( 360deg ); width: 6.250em; height: 6.250em; }
}
@keyframes rotate {
  0% { -ms-transform: rotate( 0 );}
  10% { width: 6.250em; height: 6.250em; }
  66% { width: 2.4em; height: 2.4em; }
  100%{ -ms-transform: rotate( 360deg ); width: 6.250em; height: 6.250em; }
}

@-webkit-keyframes dotsY {
  66% { opacity: .1; width: 2.4em; }
  77%{ opacity: 1; width: 0; }
}
@-moz-keyframes dotsX {
  66% { opacity: .1; height: 2.4em;}
  77%{ opacity: 1; height: 0; }
}
@-ms-keyframes dotsX {
  66% { opacity: .1; height: 2.4em;}
  77%{ opacity: 1; height: 0; }
}
@keyframes dotsX {
  66% { opacity: .1; height: 2.4em;}
  77%{ opacity: 1; height: 0; }
}
@-webkit-keyframes flash {
  33% { opacity: 0; border-radius: 0%; }
  55%{ opacity: .6; border-radius: 100%; }
  66%{ opacity: 0; }
}
@-moz-keyframes flash {
  33% { opacity: 0; border-radius: 0%; }
  55%{ opacity: .6; border-radius: 100%; }
  66%{ opacity: 0; }
}
@-ms-keyframes flash {
  33% { opacity: 0; border-radius: 0%; }
  55%{ opacity: .6; border-radius: 100%; }
  66%{ opacity: 0; }
}
@keyframes flash {
  33% { opacity: 0; border-radius: 0%; }
  55%{ opacity: .6; border-radius: 100%; }
  66%{ opacity: 0; }
}