%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/square-spin.css |
@-webkit-keyframes square-spin { 25% { -webkit-transform: perspective(100px) rotateX(180deg) rotateY(0); transform: perspective(100px) rotateX(180deg) rotateY(0); } 50% { -webkit-transform: perspective(100px) rotateX(180deg) rotateY(180deg); transform: perspective(100px) rotateX(180deg) rotateY(180deg); } 75% { -webkit-transform: perspective(100px) rotateX(0) rotateY(180deg); transform: perspective(100px) rotateX(0) rotateY(180deg); } 100% { -webkit-transform: perspective(100px) rotateX(0) rotateY(0); transform: perspective(100px) rotateX(0) rotateY(0); } } @-moz-keyframes square-spin { 25% { -moz-transform: perspective(100px) rotateX(180deg) rotateY(0); transform: perspective(100px) rotateX(180deg) rotateY(0); } 50% { -moz-transform: perspective(100px) rotateX(180deg) rotateY(180deg); transform: perspective(100px) rotateX(180deg) rotateY(180deg); } 75% { -moz-transform: perspective(100px) rotateX(0) rotateY(180deg); transform: perspective(100px) rotateX(0) rotateY(180deg); } 100% { -moz-transform: perspective(100px) rotateX(0) rotateY(0); transform: perspective(100px) rotateX(0) rotateY(0); } } @-o-keyframes square-spin { 25% { transform: perspective(100px) rotateX(180deg) rotateY(0); } 50% { transform: perspective(100px) rotateX(180deg) rotateY(180deg); } 75% { transform: perspective(100px) rotateX(0) rotateY(180deg); } 100% { transform: perspective(100px) rotateX(0) rotateY(0); } } @keyframes square-spin { 25% { -webkit-transform: perspective(100px) rotateX(180deg) rotateY(0); -moz-transform: perspective(100px) rotateX(180deg) rotateY(0); transform: perspective(100px) rotateX(180deg) rotateY(0); } 50% { -webkit-transform: perspective(100px) rotateX(180deg) rotateY(180deg); -moz-transform: perspective(100px) rotateX(180deg) rotateY(180deg); transform: perspective(100px) rotateX(180deg) rotateY(180deg); } 75% { -webkit-transform: perspective(100px) rotateX(0) rotateY(180deg); -moz-transform: perspective(100px) rotateX(0) rotateY(180deg); transform: perspective(100px) rotateX(0) rotateY(180deg); } 100% { -webkit-transform: perspective(100px) rotateX(0) rotateY(0); -moz-transform: perspective(100px) rotateX(0) rotateY(0); transform: perspective(100px) rotateX(0) rotateY(0); } } .square-spin > div { -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; width: 50px; height: 50px; background: #6B6F82; -webkit-animation: square-spin 3s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite; -moz-animation: square-spin 3s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite; -o-animation: square-spin 3s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite; animation: square-spin 3s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite; }