Edit File - File Manager

Edit File: cube-transition.css

/*========================================================
        DARK LAYOUT
=========================================================*/
@-webkit-keyframes cube-transition {
  25% {
    -webkit-transform : translateX(50px) scale(0.5) rotate(-90deg);
            transform : translateX(50px) scale(0.5) rotate(-90deg);
  }
  50% {
    -webkit-transform : translate(50px, 50px) rotate(-180deg);
            transform : translate(50px, 50px) rotate(-180deg);
  }
  75% {
    -webkit-transform : translateY(50px) scale(0.5) rotate(-270deg);
            transform : translateY(50px) scale(0.5) rotate(-270deg);
  }
  100% {
    -webkit-transform : rotate(-360deg);
            transform : rotate(-360deg);
  }
}
@keyframes cube-transition {
  25% {
    -webkit-transform : translateX(50px) scale(0.5) rotate(-90deg);
            transform : translateX(50px) scale(0.5) rotate(-90deg);
  }
  50% {
    -webkit-transform : translate(50px, 50px) rotate(-180deg);
            transform : translate(50px, 50px) rotate(-180deg);
  }
  75% {
    -webkit-transform : translateY(50px) scale(0.5) rotate(-270deg);
            transform : translateY(50px) scale(0.5) rotate(-270deg);
  }
  100% {
    -webkit-transform : rotate(-360deg);
            transform : rotate(-360deg);
  }
}

.cube-transition {
  position : relative;
  -webkit-transform : translate(-25px, -25px);
      -ms-transform : translate(-25px, -25px);
          transform : translate(-25px, -25px);
}
.cube-transition > div {
  -webkit-animation-fill-mode : both;
          animation-fill-mode : both;
  width : 10px;
  height : 10px;
  position : absolute;
  top : -5px;
  left : -5px;
  background-color : #B8C2CC;
  -webkit-animation : cube-transition 1.6s 0s infinite ease-in-out;
          animation : cube-transition 1.6s 0s infinite ease-in-out;
}
.cube-transition > div:last-child {
  -webkit-animation-delay : -0.8s;
          animation-delay : -0.8s;
}

Back to File Manager