@-webkit-keyframes body {
  0% {
    background: #222;
  }
  25% {
    background: #202;
  }
  50% {
    background: #022;
  }
  75% {
    background: #220;
  }
  100% {
    background: #222;
  }
}
@-moz-keyframes body {
  0% {
    background: #222;
  }
  25% {
    background: #202;
  }
  50% {
    background: #022;
  }
  75% {
    background: #220;
  }
  100% {
    background: #222;
  }
}
@-ms-keyframes body {
  0% {
    background: #222;
  }
  25% {
    background: #202;
  }
  50% {
    background: #022;
  }
  75% {
    background: #220;
  }
  100% {
    background: #222;
  }
}
@keyframes body {
  0% {
    background: #222;
  }
  25% {
    background: #202;
  }
  50% {
    background: #022;
  }
  75% {
    background: #220;
  }
  100% {
    background: #222;
  }
}
@-webkit-keyframes background {
  0% {
    background-position: 50% 0%;
  }
  100% {
    background-position: 50% 400%;
  }
}
@-moz-keyframes background {
  0% {
    background-position: 50% 0%;
  }
  100% {
    background-position: 50% 400%;
  }
}
@-ms-keyframes background {
  0% {
    background-position: 50% 0%;
  }
  100% {
    background-position: 50% 400%;
  }
}
@keyframes background {
  0% {
    background-position: 50% 0%;
  }
  100% {
    background-position: 50% 400%;
  }
}
@-webkit-keyframes torsion {
  0% {
    -moz-transform: rotate(0);
    -ms-transform: rotate(0);
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  100% {
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-moz-keyframes torsion {
  0% {
    -moz-transform: rotate(0);
    -ms-transform: rotate(0);
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  100% {
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-ms-keyframes torsion {
  0% {
    -moz-transform: rotate(0);
    -ms-transform: rotate(0);
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  100% {
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes torsion {
  0% {
    -moz-transform: rotate(0);
    -ms-transform: rotate(0);
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  100% {
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
body {
  background: #333;
  -webkit-animation: body linear 10s infinite;
  -moz-animation: body linear 10s infinite;
  -ms-animation: body linear 10s infinite;
  animation: body linear 10s infinite;
}

* {
  -webkit-animation-play-state: running !important;
  -moz-animation-play-state: running !important;
  animation-play-state: running !important;
}

.wrapper {
  width: 600px;
  height: 600px;
  margin: 0 auto;
  position: relative;
  border-radius: 50%;
  overflow: hidden;
  -webkit-animation: torsion linear 10s infinite;
  -moz-animation: torsion linear 10s infinite;
  -ms-animation: torsion linear 10s infinite;
  animation: torsion linear 10s infinite;
}

.triangle {
  width: 300px;
  height: 300px;
  overflow: hidden;
  -webkit-animation: move-pizza linear 3s infinite;
  -moz-animation: move-pizza linear 3s infinite;
  -ms-animation: move-pizza linear 3s infinite;
  animation: move-pizza linear 3s infinite;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform-origin: 0 0;
  -moz-transform-origin: 0 0;
  -ms-transform-origin: 0 0;
  -o-transform-origin: 0 0;
  transform-origin: 0 0;
}

.a, .b, .c {
  height: 300px;
  overflow: hidden;
  -webkit-transform-origin: 0 0;
  -moz-transform-origin: 0 0;
  -ms-transform-origin: 0 0;
  -o-transform-origin: 0 0;
  transform-origin: 0 0;
}

.a {
  width: 300px;
  -moz-transform: rotate(18deg);
  -ms-transform: rotate(18deg);
  -webkit-transform: rotate(18deg);
  transform: rotate(18deg);
}

.b {
  width: 300px;
  -moz-transform: rotate(-18deg);
  -ms-transform: rotate(-18deg);
  -webkit-transform: rotate(-18deg);
  transform: rotate(-18deg);
}

.c {
  -moz-transform: rotate(-36deg) translateX(-210px);
  -ms-transform: rotate(-36deg) translateX(-210px);
  -webkit-transform: rotate(-36deg) translateX(-210px);
  transform: rotate(-36deg) translateX(-210px);
  -moz-transition: all 0.33s ease-in-out;
  -o-transition: all 0.33s ease-in-out;
  -webkit-transition: all 0.33s ease-in-out;
  transition: all 0.33s ease-in-out;
  width: 420px;
  height: 300px;
  background-color: #fff;
  background-image: url(../img/dWsDBpV.png);
  background-position: 50% 0;
  background-repeat: repeat;
  -webkit-animation: background linear 3s infinite;
  -moz-animation: background linear 3s infinite;
  -ms-animation: background linear 3s infinite;
  animation: background linear 3s infinite;
}

.piece_1 {
  -moz-transform: rotate(72deg);
  -ms-transform: rotate(72deg);
  -webkit-transform: rotate(72deg);
  transform: rotate(72deg);
}

.piece_2 {
  -moz-transform: rotate(144deg);
  -ms-transform: rotate(144deg);
  -webkit-transform: rotate(144deg);
  transform: rotate(144deg);
}

.piece_3 {
  -moz-transform: rotate(216deg);
  -ms-transform: rotate(216deg);
  -webkit-transform: rotate(216deg);
  transform: rotate(216deg);
}

.piece_4 {
  -moz-transform: rotate(288deg);
  -ms-transform: rotate(288deg);
  -webkit-transform: rotate(288deg);
  transform: rotate(288deg);
}

.piece_5 {
  -moz-transform: rotate(360deg);
  -ms-transform: rotate(360deg);
  -webkit-transform: rotate(360deg);
  transform: rotate(360deg);
}
