%PDF- %PDF-
| Direktori : /home/opti/workflow/src/public/app-assets/css-rtl/plugins/loaders/animations/ |
| Current File : /home/opti/workflow/src/public/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: #6B6F82;
-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; }