EDU/Website/NEducation/Content/app-assets/css-rtl/plugins/loaders/animations/cube-transition.css

@-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);
  }
}

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

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

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

.cube-transition {
  position : relative;
  -webkit-transform : translate(25px, -25px);
     -moz-transform : translate(25px, -25px);
      -ms-transform : translate(25px, -25px);
       -o-transform : translate(25px, -25px);
          transform : translate(25px, -25px);
}
.cube-transition > div {
  -webkit-animation-fill-mode : both;
     -moz-animation-fill-mode : both;
       -o-animation-fill-mode : both;
          animation-fill-mode : both;
  width : 10px;
  height : 10px;
  position : absolute;
  top : -5px;
  right : -5px;
  background-color : #55595C;
  -webkit-animation : cube-transition 1.6s 0s infinite ease-in-out;
     -moz-animation : cube-transition 1.6s 0s infinite ease-in-out;
       -o-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;
     -moz-animation-delay : -0.8s;
       -o-animation-delay : -0.8s;
          animation-delay : -0.8s;
}