@-webkit-keyframes anim1 {
  0% {
    -webkit-transform: translateY(-100px) translateX(100px);
    transform: translateY(-100px) translateX(100px);
  }
  100% {
    -webkit-transform: translateY(0) translateX(0);
    transform: translateY(0) translateX(0);
  }
}

@keyframes anim1 {
  0% {
    -webkit-transform: translateY(-100px) translateX(100px);
    transform: translateY(-100px) translateX(100px) rotateZ(-70deg);
  }
  100% {
    -webkit-transform: translateY(0) translateX(0);
    transform: translateY(0) translateX(0) rotateZ(0);
  }
}

@-webkit-keyframes anim2 {
  0% {
    -webkit-transform: translateY(0) translateX(0) rotateZ(50deg);
    transform: translateY(0) translateX(0) scale(1.4) rotateZ(50deg);
  }
  100% {
    -webkit-transform: translateY(-100px) translateX(100px) rotateZ(0deg);
    transform: translateY(-100px) translateX(100px) scale(1) rotateZ(0);
  }
}

@keyframes anim2 {
  0% {
    -webkit-transform: translateY(0) translateX(0) rotateZ(50deg);
    transform: translateY(0) translateX(0) scale(1.4) rotateZ(50deg);
  }
  100% {
    -webkit-transform: translateY(-100px) translateX(100px) rotateZ(0deg);
    transform: translateY(-100px) translateX(100px) scale(1) rotateZ(0);
  }
}

@-webkit-keyframes anim3 {
  100% {
    -webkit-transform: translateX(0) rotateZ(0deg);
    transform: translateX(0) rotateZ(0deg);
  }
  0% {
    -webkit-transform: translateX(100px) rotateZ(60deg);
    transform: translateX(100px) rotateZ(60deg);
  }
}

@keyframes anim3 {
  100% {
    -webkit-transform: translateX(0) rotateZ(0deg);
    transform: translateX(0) rotateZ(0deg);
  }
  0% {
    -webkit-transform: translateX(100px) rotateZ(60deg);
    transform: translateX(100px) rotateZ(60deg);
  }
}

@-webkit-keyframes anim4 {
  0% {
    -webkit-transform: translateY(0) translateX(0);
    transform: translateY(0) translateX(0);
  }
  100% {
    -webkit-transform: translateY(-100px) translateX(100px);
    transform: translateY(-100px) translateX(100px);
  }
}

@keyframes anim4 {
  100% {
    -webkit-transform: translateY(0) translateX(0) rotateZ(0deg);
    transform: translateY(0) translateX(0) scale(1) rotateZ(0deg);
  }
  0% {
    -webkit-transform: translateY(-100px) translateX(100px) rotateZ(60deg);
    transform: translateY(-100px) translateX(-100px) scale(0.8) rotateZ(60deg);
  }
}

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

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

body .outCircle {
  width: 200px;
  height: 200px;
  right: 15%;
  position: absolute;
  top: 170px;
}

body .rotate {
  width: 50%;
  height: 50%;
  position: absolute;
  /* add this */
}

body .counterrotate {
  width: 50px;
  height: 50px;
}

body .inner {
  width: 50px;
  height: 50px;
  text-align: center;
  vertical-align: middle;
  display: table-cell;
}

body .anim1 {
  -webkit-animation: circle1 3s infinite linear;
}

body .anim1 .counterrotate {
  -webkit-animation: ccircle1 3s infinite linear;
}