1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950 |
- /*========================================================
- DARK LAYOUT
- =========================================================*/
- @-webkit-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% {
- 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);
- }
- }
- .square-spin > div {
- -webkit-animation-fill-mode: both;
- animation-fill-mode: both;
- width: 50px;
- height: 50px;
- background: #b8c2cc;
- -webkit-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;
- }
|