%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/triangle-skew-spin.css |
@-webkit-keyframes triangle-skew-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 triangle-skew-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 triangle-skew-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 triangle-skew-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); } } .triangle-skew-spin > div { -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; width: 0; height: 0; border-right: 20px solid transparent; border-left: 20px solid transparent; border-bottom: 20px solid #6B6F82; -webkit-animation: triangle-skew-spin 3s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite; -moz-animation: triangle-skew-spin 3s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite; -o-animation: triangle-skew-spin 3s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite; animation: triangle-skew-spin 3s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite; }