%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; }