You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
158 lines
3.2 KiB
158 lines
3.2 KiB
.mblSwap { |
|
-webkit-animation-duration: 0.6s; |
|
animation-duration: 0.6s; |
|
-webkit-animation-timing-function: linear; |
|
animation-timing-function: linear; |
|
} |
|
.mblSwap.mblOut { |
|
-webkit-animation-name: mblSwapOut; |
|
animation-name: mblSwapOut; |
|
} |
|
.mblSwap.mblIn { |
|
-webkit-animation-name: mblSwapIn; |
|
animation-name: mblSwapIn; |
|
} |
|
.mblSwap.mblOut.mblReverse { |
|
-webkit-animation-name: mblSwapOutReverse; |
|
animation-name: mblSwapOutReverse; |
|
} |
|
.mblSwap.mblIn.mblReverse { |
|
-webkit-animation-name: mblSwapInReverse; |
|
animation-name: mblSwapInReverse; |
|
} |
|
@-webkit-keyframes mblSwapOut { |
|
0% { |
|
z-index: auto; |
|
-webkit-transform: translate3d(0%, 0%, 0px) scale(1); |
|
opacity: 1; |
|
} |
|
50% { |
|
z-index: -60; |
|
-webkit-transform: translate3d(-45%, 5%, 0px) scale(0.6); |
|
opacity: 0.4; |
|
} |
|
100% { |
|
z-index: -100; |
|
-webkit-transform: translate3d(-20%, 10%, 0px) scale(0.4); |
|
opacity: 0; |
|
} |
|
} |
|
@keyframes mblSwapOut { |
|
0% { |
|
z-index: auto; |
|
transform: translate3d(0%, 0%, 0px) scale(1); |
|
opacity: 1; |
|
} |
|
50% { |
|
z-index: -60; |
|
transform: translate3d(-45%, 5%, 0px) scale(0.6); |
|
opacity: 0.4; |
|
} |
|
100% { |
|
z-index: -100; |
|
transform: translate3d(-20%, 10%, 0px) scale(0.4); |
|
opacity: 0; |
|
} |
|
} |
|
@-webkit-keyframes mblSwapIn { |
|
0% { |
|
z-index: -100; |
|
-webkit-transform: translate3d(-20%, 0%, 0px) scale(0.5); |
|
opacity: 0.4; |
|
} |
|
50% { |
|
z-index: -40; |
|
-webkit-transform: translate3d(45%, 0%, 0px) scale(0.7); |
|
opacity: 1; |
|
} |
|
100% { |
|
z-index: auto; |
|
-webkit-transform: translate3d(0%, 0%, 0px) scale(1); |
|
opacity: 1; |
|
} |
|
} |
|
@keyframes mblSwapIn { |
|
0% { |
|
z-index: -100; |
|
transform: translate3d(-20%, 0%, 0px) scale(0.5); |
|
opacity: 0.4; |
|
} |
|
50% { |
|
z-index: -40; |
|
transform: translate3d(45%, 0%, 0px) scale(0.7); |
|
opacity: 1; |
|
} |
|
100% { |
|
z-index: auto; |
|
transform: translate3d(0%, 0%, 0px) scale(1); |
|
opacity: 1; |
|
} |
|
} |
|
@-webkit-keyframes mblSwapOutReverse { |
|
0% { |
|
z-index: auto; |
|
-webkit-transform: translate3d(0%, 0%, 0px) scale(1); |
|
opacity: 1; |
|
} |
|
50% { |
|
z-index: -60; |
|
-webkit-transform: translate3d(45%, 5%, 0px) scale(0.6); |
|
opacity: 0.4; |
|
} |
|
100% { |
|
z-index: -100; |
|
-webkit-transform: translate3d(20%, 10%, 0px) scale(0.4); |
|
opacity: 0; |
|
} |
|
} |
|
@keyframes mblSwapOutReverse { |
|
0% { |
|
z-index: auto; |
|
transform: translate3d(0%, 0%, 0px) scale(1); |
|
opacity: 1; |
|
} |
|
50% { |
|
z-index: -60; |
|
transform: translate3d(45%, 5%, 0px) scale(0.6); |
|
opacity: 0.4; |
|
} |
|
100% { |
|
z-index: -100; |
|
transform: translate3d(20%, 10%, 0px) scale(0.4); |
|
opacity: 0; |
|
} |
|
} |
|
@-webkit-keyframes mblSwapInReverse { |
|
0% { |
|
z-index: -100; |
|
-webkit-transform: translate3d(20%, 0%, 0px) scale(0.5); |
|
opacity: 0.4; |
|
} |
|
50% { |
|
z-index: -40; |
|
-webkit-transform: translate3d(-45%, 0%, 0px) scale(0.7); |
|
opacity: 1; |
|
} |
|
100% { |
|
z-index: auto; |
|
-webkit-transform: translate3d(0%, 0%, 0px) scale(1); |
|
opacity: 1; |
|
} |
|
} |
|
@keyframes mblSwapInReverse { |
|
0% { |
|
z-index: -100; |
|
transform: translate3d(20%, 0%, 0px) scale(0.5); |
|
opacity: 0.4; |
|
} |
|
50% { |
|
z-index: -40; |
|
transform: translate3d(-45%, 0%, 0px) scale(0.7); |
|
opacity: 1; |
|
} |
|
100% { |
|
z-index: auto; |
|
transform: translate3d(0%, 0%, 0px) scale(1); |
|
opacity: 1; |
|
} |
|
}
|
|
|