$width: 50px;
$height: $width;
$color: #fff;
$radius: 10px;

@mixin center($width, $height) {
    position: absolute;
    left: 50%;
    top: 50%;
    height: $height;
    width: $width;
    margin-left: - $width / 2;
    margin-top: - $height / 2;
}

body {
  background: #1e5799;
}

.square {
  border: 1px solid $color;
  border-radius: $radius;
  @include center($width, $height);
    &:nth-child(1){
      -webkit-animation: rotate 10s linear infinite;
      -webkit-opacity: 1;
    }
      &:nth-child(2){
      -webkit-animation: rotate2 10s linear infinite;
      -webkit-opacity: 0.8;
    }
      &:nth-child(3){
      -webkit-animation: rotate3 10s linear infinite;
      -webkit-opacity: 0.6;
    }
      &:nth-child(4){
      -webkit-animation: rotate4 10s linear infinite;
      -webkit-opacity: 0.4; 
    }
      &:nth-child(5){
      -webkit-animation: rotate5 10s linear infinite;
        -webkit-opacity: 0.2;
    }
}


@-webkit-keyframes rotate {
  from { -webkit-transform: rotate(0deg); }
  to { -webkit-transform: rotate(360deg); }
}

@-webkit-keyframes rotate2 {
  from { -webkit-transform: rotate(0deg);}
  to { -webkit-transform: rotate(360deg * 2);}
}

@-webkit-keyframes rotate3 {
  from { -webkit-transform: rotate(0deg); }
  to { -webkit-transform: rotate(360deg * 3); }
}

@-webkit-keyframes rotate4 {
  from { -webkit-transform: rotate(0deg); }
  to { -webkit-transform: rotate(360deg * 4); }
}

@-webkit-keyframes rotate5 {
  from { -webkit-transform: rotate(0deg); }
  to { -webkit-transform: rotate(360deg * 5); }
}