mirror of
https://github.com/usmannasir/cyberpanel.git
synced 2025-11-08 14:26:16 +01:00
3679 lines
77 KiB
CSS
3679 lines
77 KiB
CSS
|
|
@-webkit-keyframes bounce {
|
||
|
|
0%, 20%, 53%, 80%, 100% {
|
||
|
|
-webkit-transition-timing-function: cubic-bezier(.215, .610, .355, 1.000);
|
||
|
|
transition-timing-function: cubic-bezier(.215, .610, .355, 1.000);
|
||
|
|
-webkit-transform: translate3d(0, 0, 0);
|
||
|
|
transform: translate3d(0, 0, 0);
|
||
|
|
}
|
||
|
|
|
||
|
|
40%, 43% {
|
||
|
|
-webkit-transition-timing-function: cubic-bezier(.755, .050, .855, .060);
|
||
|
|
transition-timing-function: cubic-bezier(.755, .050, .855, .060);
|
||
|
|
-webkit-transform: translate3d(0, -30px, 0);
|
||
|
|
transform: translate3d(0, -30px, 0);
|
||
|
|
}
|
||
|
|
|
||
|
|
70% {
|
||
|
|
-webkit-transition-timing-function: cubic-bezier(.755, .050, .855, .060);
|
||
|
|
transition-timing-function: cubic-bezier(.755, .050, .855, .060);
|
||
|
|
-webkit-transform: translate3d(0, -15px, 0);
|
||
|
|
transform: translate3d(0, -15px, 0);
|
||
|
|
}
|
||
|
|
|
||
|
|
90% {
|
||
|
|
-webkit-transform: translate3d(0, -4px, 0);
|
||
|
|
transform: translate3d(0, -4px, 0);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes bounce {
|
||
|
|
0%, 20%, 53%, 80%, 100% {
|
||
|
|
-webkit-transition-timing-function: cubic-bezier(.215, .610, .355, 1.000);
|
||
|
|
transition-timing-function: cubic-bezier(.215, .610, .355, 1.000);
|
||
|
|
-webkit-transform: translate3d(0, 0, 0);
|
||
|
|
-ms-transform: translate3d(0, 0, 0);
|
||
|
|
transform: translate3d(0, 0, 0);
|
||
|
|
}
|
||
|
|
|
||
|
|
40%, 43% {
|
||
|
|
-webkit-transition-timing-function: cubic-bezier(.755, .050, .855, .060);
|
||
|
|
transition-timing-function: cubic-bezier(.755, .050, .855, .060);
|
||
|
|
-webkit-transform: translate3d(0, -30px, 0);
|
||
|
|
-ms-transform: translate3d(0, -30px, 0);
|
||
|
|
transform: translate3d(0, -30px, 0);
|
||
|
|
}
|
||
|
|
|
||
|
|
70% {
|
||
|
|
-webkit-transition-timing-function: cubic-bezier(.755, .050, .855, .060);
|
||
|
|
transition-timing-function: cubic-bezier(.755, .050, .855, .060);
|
||
|
|
-webkit-transform: translate3d(0, -15px, 0);
|
||
|
|
-ms-transform: translate3d(0, -15px, 0);
|
||
|
|
transform: translate3d(0, -15px, 0);
|
||
|
|
}
|
||
|
|
|
||
|
|
90% {
|
||
|
|
-webkit-transform: translate3d(0, -4px, 0);
|
||
|
|
-ms-transform: translate3d(0, -4px, 0);
|
||
|
|
transform: translate3d(0, -4px, 0);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@-webkit-keyframes flash {
|
||
|
|
0%, 50%, 100% {
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
25%, 75% {
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes flash {
|
||
|
|
0%, 50%, 100% {
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
25%, 75% {
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
|
||
|
|
|
||
|
|
@-webkit-keyframes pulse {
|
||
|
|
0% {
|
||
|
|
-webkit-transform: scale3d(1, 1, 1);
|
||
|
|
transform: scale3d(1, 1, 1);
|
||
|
|
}
|
||
|
|
|
||
|
|
50% {
|
||
|
|
-webkit-transform: scale3d(1.05, 1.05, 1.05);
|
||
|
|
transform: scale3d(1.05, 1.05, 1.05);
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
-webkit-transform: scale3d(1, 1, 1);
|
||
|
|
transform: scale3d(1, 1, 1);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes pulse {
|
||
|
|
0% {
|
||
|
|
-webkit-transform: scale3d(1, 1, 1);
|
||
|
|
-ms-transform: scale3d(1, 1, 1);
|
||
|
|
transform: scale3d(1, 1, 1);
|
||
|
|
}
|
||
|
|
|
||
|
|
50% {
|
||
|
|
-webkit-transform: scale3d(1.05, 1.05, 1.05);
|
||
|
|
-ms-transform: scale3d(1.05, 1.05, 1.05);
|
||
|
|
transform: scale3d(1.05, 1.05, 1.05);
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
-webkit-transform: scale3d(1, 1, 1);
|
||
|
|
-ms-transform: scale3d(1, 1, 1);
|
||
|
|
transform: scale3d(1, 1, 1);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@-webkit-keyframes rubberBand {
|
||
|
|
0% {
|
||
|
|
-webkit-transform: scale3d(1, 1, 1);
|
||
|
|
transform: scale3d(1, 1, 1);
|
||
|
|
}
|
||
|
|
|
||
|
|
30% {
|
||
|
|
-webkit-transform: scale3d(1.25, .75, 1);
|
||
|
|
transform: scale3d(1.25, .75, 1);
|
||
|
|
}
|
||
|
|
|
||
|
|
40% {
|
||
|
|
-webkit-transform: scale3d(.75, 1.25, 1);
|
||
|
|
transform: scale3d(.75, 1.25, 1);
|
||
|
|
}
|
||
|
|
|
||
|
|
50% {
|
||
|
|
-webkit-transform: scale3d(1.15, .85, 1);
|
||
|
|
transform: scale3d(1.15, .85, 1);
|
||
|
|
}
|
||
|
|
|
||
|
|
65% {
|
||
|
|
-webkit-transform: scale3d(.95, 1.05, 1);
|
||
|
|
transform: scale3d(.95, 1.05, 1);
|
||
|
|
}
|
||
|
|
|
||
|
|
75% {
|
||
|
|
-webkit-transform: scale3d(1.05, .95, 1);
|
||
|
|
transform: scale3d(1.05, .95, 1);
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
-webkit-transform: scale3d(1, 1, 1);
|
||
|
|
transform: scale3d(1, 1, 1);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes rubberBand {
|
||
|
|
0% {
|
||
|
|
-webkit-transform: scale3d(1, 1, 1);
|
||
|
|
-ms-transform: scale3d(1, 1, 1);
|
||
|
|
transform: scale3d(1, 1, 1);
|
||
|
|
}
|
||
|
|
|
||
|
|
30% {
|
||
|
|
-webkit-transform: scale3d(1.25, .75, 1);
|
||
|
|
-ms-transform: scale3d(1.25, .75, 1);
|
||
|
|
transform: scale3d(1.25, .75, 1);
|
||
|
|
}
|
||
|
|
|
||
|
|
40% {
|
||
|
|
-webkit-transform: scale3d(.75, 1.25, 1);
|
||
|
|
-ms-transform: scale3d(.75, 1.25, 1);
|
||
|
|
transform: scale3d(.75, 1.25, 1);
|
||
|
|
}
|
||
|
|
|
||
|
|
50% {
|
||
|
|
-webkit-transform: scale3d(1.15, .85, 1);
|
||
|
|
-ms-transform: scale3d(1.15, .85, 1);
|
||
|
|
transform: scale3d(1.15, .85, 1);
|
||
|
|
}
|
||
|
|
|
||
|
|
65% {
|
||
|
|
-webkit-transform: scale3d(.95, 1.05, 1);
|
||
|
|
-ms-transform: scale3d(.95, 1.05, 1);
|
||
|
|
transform: scale3d(.95, 1.05, 1);
|
||
|
|
}
|
||
|
|
|
||
|
|
75% {
|
||
|
|
-webkit-transform: scale3d(1.05, .95, 1);
|
||
|
|
-ms-transform: scale3d(1.05, .95, 1);
|
||
|
|
transform: scale3d(1.05, .95, 1);
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
-webkit-transform: scale3d(1, 1, 1);
|
||
|
|
-ms-transform: scale3d(1, 1, 1);
|
||
|
|
transform: scale3d(1, 1, 1);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@-webkit-keyframes shake {
|
||
|
|
0%, 100% {
|
||
|
|
-webkit-transform: translate3d(0, 0, 0);
|
||
|
|
transform: translate3d(0, 0, 0);
|
||
|
|
}
|
||
|
|
|
||
|
|
10%, 30%, 50%, 70%, 90% {
|
||
|
|
-webkit-transform: translate3d(-10px, 0, 0);
|
||
|
|
transform: translate3d(-10px, 0, 0);
|
||
|
|
}
|
||
|
|
|
||
|
|
20%, 40%, 60%, 80% {
|
||
|
|
-webkit-transform: translate3d(10px, 0, 0);
|
||
|
|
transform: translate3d(10px, 0, 0);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes shake {
|
||
|
|
0%, 100% {
|
||
|
|
-webkit-transform: translate3d(0, 0, 0);
|
||
|
|
-ms-transform: translate3d(0, 0, 0);
|
||
|
|
transform: translate3d(0, 0, 0);
|
||
|
|
}
|
||
|
|
|
||
|
|
10%, 30%, 50%, 70%, 90% {
|
||
|
|
-webkit-transform: translate3d(-10px, 0, 0);
|
||
|
|
-ms-transform: translate3d(-10px, 0, 0);
|
||
|
|
transform: translate3d(-10px, 0, 0);
|
||
|
|
}
|
||
|
|
|
||
|
|
20%, 40%, 60%, 80% {
|
||
|
|
-webkit-transform: translate3d(10px, 0, 0);
|
||
|
|
-ms-transform: translate3d(10px, 0, 0);
|
||
|
|
transform: translate3d(10px, 0, 0);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@-webkit-keyframes swing {
|
||
|
|
20% {
|
||
|
|
-webkit-transform: rotate3d(0, 0, 1, 15deg);
|
||
|
|
transform: rotate3d(0, 0, 1, 15deg);
|
||
|
|
}
|
||
|
|
|
||
|
|
40% {
|
||
|
|
-webkit-transform: rotate3d(0, 0, 1, -10deg);
|
||
|
|
transform: rotate3d(0, 0, 1, -10deg);
|
||
|
|
}
|
||
|
|
|
||
|
|
60% {
|
||
|
|
-webkit-transform: rotate3d(0, 0, 1, 5deg);
|
||
|
|
transform: rotate3d(0, 0, 1, 5deg);
|
||
|
|
}
|
||
|
|
|
||
|
|
80% {
|
||
|
|
-webkit-transform: rotate3d(0, 0, 1, -5deg);
|
||
|
|
transform: rotate3d(0, 0, 1, -5deg);
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
-webkit-transform: rotate3d(0, 0, 1, 0deg);
|
||
|
|
transform: rotate3d(0, 0, 1, 0deg);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes swing {
|
||
|
|
20% {
|
||
|
|
-webkit-transform: rotate3d(0, 0, 1, 15deg);
|
||
|
|
-ms-transform: rotate3d(0, 0, 1, 15deg);
|
||
|
|
transform: rotate3d(0, 0, 1, 15deg);
|
||
|
|
}
|
||
|
|
|
||
|
|
40% {
|
||
|
|
-webkit-transform: rotate3d(0, 0, 1, -10deg);
|
||
|
|
-ms-transform: rotate3d(0, 0, 1, -10deg);
|
||
|
|
transform: rotate3d(0, 0, 1, -10deg);
|
||
|
|
}
|
||
|
|
|
||
|
|
60% {
|
||
|
|
-webkit-transform: rotate3d(0, 0, 1, 5deg);
|
||
|
|
-ms-transform: rotate3d(0, 0, 1, 5deg);
|
||
|
|
transform: rotate3d(0, 0, 1, 5deg);
|
||
|
|
}
|
||
|
|
|
||
|
|
80% {
|
||
|
|
-webkit-transform: rotate3d(0, 0, 1, -5deg);
|
||
|
|
-ms-transform: rotate3d(0, 0, 1, -5deg);
|
||
|
|
transform: rotate3d(0, 0, 1, -5deg);
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
-webkit-transform: rotate3d(0, 0, 1, 0deg);
|
||
|
|
-ms-transform: rotate3d(0, 0, 1, 0deg);
|
||
|
|
transform: rotate3d(0, 0, 1, 0deg);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@-webkit-keyframes tada {
|
||
|
|
0% {
|
||
|
|
-webkit-transform: scale3d(1, 1, 1);
|
||
|
|
transform: scale3d(1, 1, 1);
|
||
|
|
}
|
||
|
|
|
||
|
|
10%, 20% {
|
||
|
|
-webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
|
||
|
|
transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
|
||
|
|
}
|
||
|
|
|
||
|
|
30%, 50%, 70%, 90% {
|
||
|
|
-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
|
||
|
|
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
|
||
|
|
}
|
||
|
|
|
||
|
|
40%, 60%, 80% {
|
||
|
|
-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
|
||
|
|
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
-webkit-transform: scale3d(1, 1, 1);
|
||
|
|
transform: scale3d(1, 1, 1);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes tada {
|
||
|
|
0% {
|
||
|
|
-webkit-transform: scale3d(1, 1, 1);
|
||
|
|
-ms-transform: scale3d(1, 1, 1);
|
||
|
|
transform: scale3d(1, 1, 1);
|
||
|
|
}
|
||
|
|
|
||
|
|
10%, 20% {
|
||
|
|
-webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
|
||
|
|
-ms-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
|
||
|
|
transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
|
||
|
|
}
|
||
|
|
|
||
|
|
30%, 50%, 70%, 90% {
|
||
|
|
-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
|
||
|
|
-ms-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
|
||
|
|
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
|
||
|
|
}
|
||
|
|
|
||
|
|
40%, 60%, 80% {
|
||
|
|
-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
|
||
|
|
-ms-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
|
||
|
|
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
-webkit-transform: scale3d(1, 1, 1);
|
||
|
|
-ms-transform: scale3d(1, 1, 1);
|
||
|
|
transform: scale3d(1, 1, 1);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
|
||
|
|
|
||
|
|
@-webkit-keyframes wobble {
|
||
|
|
0% {
|
||
|
|
-webkit-transform: none;
|
||
|
|
transform: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
15% {
|
||
|
|
-webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
|
||
|
|
transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
|
||
|
|
}
|
||
|
|
|
||
|
|
30% {
|
||
|
|
-webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
|
||
|
|
transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
|
||
|
|
}
|
||
|
|
|
||
|
|
45% {
|
||
|
|
-webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
|
||
|
|
transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
|
||
|
|
}
|
||
|
|
|
||
|
|
60% {
|
||
|
|
-webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
|
||
|
|
transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
|
||
|
|
}
|
||
|
|
|
||
|
|
75% {
|
||
|
|
-webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
|
||
|
|
transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
-webkit-transform: none;
|
||
|
|
transform: none;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes wobble {
|
||
|
|
0% {
|
||
|
|
-webkit-transform: none;
|
||
|
|
-ms-transform: none;
|
||
|
|
transform: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
15% {
|
||
|
|
-webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
|
||
|
|
-ms-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
|
||
|
|
transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
|
||
|
|
}
|
||
|
|
|
||
|
|
30% {
|
||
|
|
-webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
|
||
|
|
-ms-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
|
||
|
|
transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
|
||
|
|
}
|
||
|
|
|
||
|
|
45% {
|
||
|
|
-webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
|
||
|
|
-ms-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
|
||
|
|
transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
|
||
|
|
}
|
||
|
|
|
||
|
|
60% {
|
||
|
|
-webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
|
||
|
|
-ms-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
|
||
|
|
transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
|
||
|
|
}
|
||
|
|
|
||
|
|
75% {
|
||
|
|
-webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
|
||
|
|
-ms-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
|
||
|
|
transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
-webkit-transform: none;
|
||
|
|
-ms-transform: none;
|
||
|
|
transform: none;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@-webkit-keyframes bounceIn {
|
||
|
|
0%, 20%, 40%, 60%, 80%, 100% {
|
||
|
|
-webkit-transition-timing-function: cubic-bezier(.215, .610, .355, 1.000);
|
||
|
|
transition-timing-function: cubic-bezier(.215, .610, .355, 1.000);
|
||
|
|
}
|
||
|
|
|
||
|
|
0% {
|
||
|
|
-webkit-transform: scale3d(.3, .3, .3);
|
||
|
|
transform: scale3d(.3, .3, .3);
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
20% {
|
||
|
|
-webkit-transform: scale3d(1.1, 1.1, 1.1);
|
||
|
|
transform: scale3d(1.1, 1.1, 1.1);
|
||
|
|
}
|
||
|
|
|
||
|
|
40% {
|
||
|
|
-webkit-transform: scale3d(.9, .9, .9);
|
||
|
|
transform: scale3d(.9, .9, .9);
|
||
|
|
}
|
||
|
|
|
||
|
|
60% {
|
||
|
|
-webkit-transform: scale3d(1.03, 1.03, 1.03);
|
||
|
|
transform: scale3d(1.03, 1.03, 1.03);
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
80% {
|
||
|
|
-webkit-transform: scale3d(.97, .97, .97);
|
||
|
|
transform: scale3d(.97, .97, .97);
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
-webkit-transform: scale3d(1, 1, 1);
|
||
|
|
transform: scale3d(1, 1, 1);
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes bounceIn {
|
||
|
|
0%, 20%, 40%, 60%, 80%, 100% {
|
||
|
|
-webkit-transition-timing-function: cubic-bezier(.215, .610, .355, 1.000);
|
||
|
|
transition-timing-function: cubic-bezier(.215, .610, .355, 1.000);
|
||
|
|
}
|
||
|
|
|
||
|
|
0% {
|
||
|
|
-webkit-transform: scale3d(.3, .3, .3);
|
||
|
|
-ms-transform: scale3d(.3, .3, .3);
|
||
|
|
transform: scale3d(.3, .3, .3);
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
20% {
|
||
|
|
-webkit-transform: scale3d(1.1, 1.1, 1.1);
|
||
|
|
-ms-transform: scale3d(1.1, 1.1, 1.1);
|
||
|
|
transform: scale3d(1.1, 1.1, 1.1);
|
||
|
|
}
|
||
|
|
|
||
|
|
40% {
|
||
|
|
-webkit-transform: scale3d(.9, .9, .9);
|
||
|
|
-ms-transform: scale3d(.9, .9, .9);
|
||
|
|
transform: scale3d(.9, .9, .9);
|
||
|
|
}
|
||
|
|
|
||
|
|
60% {
|
||
|
|
-webkit-transform: scale3d(1.03, 1.03, 1.03);
|
||
|
|
-ms-transform: scale3d(1.03, 1.03, 1.03);
|
||
|
|
transform: scale3d(1.03, 1.03, 1.03);
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
80% {
|
||
|
|
-webkit-transform: scale3d(.97, .97, .97);
|
||
|
|
-ms-transform: scale3d(.97, .97, .97);
|
||
|
|
transform: scale3d(.97, .97, .97);
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
-webkit-transform: scale3d(1, 1, 1);
|
||
|
|
-ms-transform: scale3d(1, 1, 1);
|
||
|
|
transform: scale3d(1, 1, 1);
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@-webkit-keyframes bounceInDown {
|
||
|
|
0%, 60%, 75%, 90%, 100% {
|
||
|
|
-webkit-transition-timing-function: cubic-bezier(.215, .610, .355, 1.000);
|
||
|
|
transition-timing-function: cubic-bezier(.215, .610, .355, 1.000);
|
||
|
|
}
|
||
|
|
|
||
|
|
0% {
|
||
|
|
-webkit-transform: translate3d(0, -3000px, 0);
|
||
|
|
transform: translate3d(0, -3000px, 0);
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
60% {
|
||
|
|
-webkit-transform: translate3d(0, 25px, 0);
|
||
|
|
transform: translate3d(0, 25px, 0);
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
75% {
|
||
|
|
-webkit-transform: translate3d(0, -10px, 0);
|
||
|
|
transform: translate3d(0, -10px, 0);
|
||
|
|
}
|
||
|
|
|
||
|
|
90% {
|
||
|
|
-webkit-transform: translate3d(0, 5px, 0);
|
||
|
|
transform: translate3d(0, 5px, 0);
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
-webkit-transform: none;
|
||
|
|
transform: none;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes bounceInDown {
|
||
|
|
0%, 60%, 75%, 90%, 100% {
|
||
|
|
-webkit-transition-timing-function: cubic-bezier(.215, .610, .355, 1.000);
|
||
|
|
transition-timing-function: cubic-bezier(.215, .610, .355, 1.000);
|
||
|
|
}
|
||
|
|
|
||
|
|
0% {
|
||
|
|
-webkit-transform: translate3d(0, -3000px, 0);
|
||
|
|
-ms-transform: translate3d(0, -3000px, 0);
|
||
|
|
transform: translate3d(0, -3000px, 0);
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
60% {
|
||
|
|
-webkit-transform: translate3d(0, 25px, 0);
|
||
|
|
-ms-transform: translate3d(0, 25px, 0);
|
||
|
|
transform: translate3d(0, 25px, 0);
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
75% {
|
||
|
|
-webkit-transform: translate3d(0, -10px, 0);
|
||
|
|
-ms-transform: translate3d(0, -10px, 0);
|
||
|
|
transform: translate3d(0, -10px, 0);
|
||
|
|
}
|
||
|
|
|
||
|
|
90% {
|
||
|
|
-webkit-transform: translate3d(0, 5px, 0);
|
||
|
|
-ms-transform: translate3d(0, 5px, 0);
|
||
|
|
transform: translate3d(0, 5px, 0);
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
-webkit-transform: none;
|
||
|
|
-ms-transform: none;
|
||
|
|
transform: none;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@-webkit-keyframes bounceInLeft {
|
||
|
|
0%, 60%, 75%, 90%, 100% {
|
||
|
|
-webkit-transition-timing-function: cubic-bezier(.215, .610, .355, 1.000);
|
||
|
|
transition-timing-function: cubic-bezier(.215, .610, .355, 1.000);
|
||
|
|
}
|
||
|
|
|
||
|
|
0% {
|
||
|
|
-webkit-transform: translate3d(-3000px, 0, 0);
|
||
|
|
transform: translate3d(-3000px, 0, 0);
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
60% {
|
||
|
|
-webkit-transform: translate3d(25px, 0, 0);
|
||
|
|
transform: translate3d(25px, 0, 0);
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
75% {
|
||
|
|
-webkit-transform: translate3d(-10px, 0, 0);
|
||
|
|
transform: translate3d(-10px, 0, 0);
|
||
|
|
}
|
||
|
|
|
||
|
|
90% {
|
||
|
|
-webkit-transform: translate3d(5px, 0, 0);
|
||
|
|
transform: translate3d(5px, 0, 0);
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
-webkit-transform: none;
|
||
|
|
transform: none;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes bounceInLeft {
|
||
|
|
0%, 60%, 75%, 90%, 100% {
|
||
|
|
-webkit-transition-timing-function: cubic-bezier(.215, .610, .355, 1.000);
|
||
|
|
transition-timing-function: cubic-bezier(.215, .610, .355, 1.000);
|
||
|
|
}
|
||
|
|
|
||
|
|
0% {
|
||
|
|
-webkit-transform: translate3d(-3000px, 0, 0);
|
||
|
|
-ms-transform: translate3d(-3000px, 0, 0);
|
||
|
|
transform: translate3d(-3000px, 0, 0);
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
60% {
|
||
|
|
-webkit-transform: translate3d(25px, 0, 0);
|
||
|
|
-ms-transform: translate3d(25px, 0, 0);
|
||
|
|
transform: translate3d(25px, 0, 0);
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
75% {
|
||
|
|
-webkit-transform: translate3d(-10px, 0, 0);
|
||
|
|
-ms-transform: translate3d(-10px, 0, 0);
|
||
|
|
transform: translate3d(-10px, 0, 0);
|
||
|
|
}
|
||
|
|
|
||
|
|
90% {
|
||
|
|
-webkit-transform: translate3d(5px, 0, 0);
|
||
|
|
-ms-transform: translate3d(5px, 0, 0);
|
||
|
|
transform: translate3d(5px, 0, 0);
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
-webkit-transform: none;
|
||
|
|
-ms-transform: none;
|
||
|
|
transform: none;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@-webkit-keyframes bounceInRight {
|
||
|
|
0%, 60%, 75%, 90%, 100% {
|
||
|
|
-webkit-transition-timing-function: cubic-bezier(.215, .610, .355, 1.000);
|
||
|
|
transition-timing-function: cubic-bezier(.215, .610, .355, 1.000);
|
||
|
|
}
|
||
|
|
|
||
|
|
0% {
|
||
|
|
-webkit-transform: translate3d(3000px, 0, 0);
|
||
|
|
transform: translate3d(3000px, 0, 0);
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
60% {
|
||
|
|
-webkit-transform: translate3d(-25px, 0, 0);
|
||
|
|
transform: translate3d(-25px, 0, 0);
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
75% {
|
||
|
|
-webkit-transform: translate3d(10px, 0, 0);
|
||
|
|
transform: translate3d(10px, 0, 0);
|
||
|
|
}
|
||
|
|
|
||
|
|
90% {
|
||
|
|
-webkit-transform: translate3d(-5px, 0, 0);
|
||
|
|
transform: translate3d(-5px, 0, 0);
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
-webkit-transform: none;
|
||
|
|
transform: none;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes bounceInRight {
|
||
|
|
0%, 60%, 75%, 90%, 100% {
|
||
|
|
-webkit-transition-timing-function: cubic-bezier(.215, .610, .355, 1.000);
|
||
|
|
transition-timing-function: cubic-bezier(.215, .610, .355, 1.000);
|
||
|
|
}
|
||
|
|
|
||
|
|
0% {
|
||
|
|
-webkit-transform: translate3d(3000px, 0, 0);
|
||
|
|
-ms-transform: translate3d(3000px, 0, 0);
|
||
|
|
transform: translate3d(3000px, 0, 0);
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
60% {
|
||
|
|
-webkit-transform: translate3d(-25px, 0, 0);
|
||
|
|
-ms-transform: translate3d(-25px, 0, 0);
|
||
|
|
transform: translate3d(-25px, 0, 0);
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
75% {
|
||
|
|
-webkit-transform: translate3d(10px, 0, 0);
|
||
|
|
-ms-transform: translate3d(10px, 0, 0);
|
||
|
|
transform: translate3d(10px, 0, 0);
|
||
|
|
}
|
||
|
|
|
||
|
|
90% {
|
||
|
|
-webkit-transform: translate3d(-5px, 0, 0);
|
||
|
|
-ms-transform: translate3d(-5px, 0, 0);
|
||
|
|
transform: translate3d(-5px, 0, 0);
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
-webkit-transform: none;
|
||
|
|
-ms-transform: none;
|
||
|
|
transform: none;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@-webkit-keyframes bounceInUp {
|
||
|
|
0%, 60%, 75%, 90%, 100% {
|
||
|
|
-webkit-transition-timing-function: cubic-bezier(.215, .610, .355, 1.000);
|
||
|
|
transition-timing-function: cubic-bezier(.215, .610, .355, 1.000);
|
||
|
|
}
|
||
|
|
|
||
|
|
0% {
|
||
|
|
-webkit-transform: translate3d(0, 3000px, 0);
|
||
|
|
transform: translate3d(0, 3000px, 0);
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
60% {
|
||
|
|
-webkit-transform: translate3d(0, -20px, 0);
|
||
|
|
transform: translate3d(0, -20px, 0);
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
75% {
|
||
|
|
-webkit-transform: translate3d(0, 10px, 0);
|
||
|
|
transform: translate3d(0, 10px, 0);
|
||
|
|
}
|
||
|
|
|
||
|
|
90% {
|
||
|
|
-webkit-transform: translate3d(0, -5px, 0);
|
||
|
|
transform: translate3d(0, -5px, 0);
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
-webkit-transform: translate3d(0, 0, 0);
|
||
|
|
transform: translate3d(0, 0, 0);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes bounceInUp {
|
||
|
|
0%, 60%, 75%, 90%, 100% {
|
||
|
|
-webkit-transition-timing-function: cubic-bezier(.215, .610, .355, 1.000);
|
||
|
|
transition-timing-function: cubic-bezier(.215, .610, .355, 1.000);
|
||
|
|
}
|
||
|
|
|
||
|
|
0% {
|
||
|
|
-webkit-transform: translate3d(0, 3000px, 0);
|
||
|
|
-ms-transform: translate3d(0, 3000px, 0);
|
||
|
|
transform: translate3d(0, 3000px, 0);
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
60% {
|
||
|
|
-webkit-transform: translate3d(0, -20px, 0);
|
||
|
|
-ms-transform: translate3d(0, -20px, 0);
|
||
|
|
transform: translate3d(0, -20px, 0);
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
75% {
|
||
|
|
-webkit-transform: translate3d(0, 10px, 0);
|
||
|
|
-ms-transform: translate3d(0, 10px, 0);
|
||
|
|
transform: translate3d(0, 10px, 0);
|
||
|
|
}
|
||
|
|
|
||
|
|
90% {
|
||
|
|
-webkit-transform: translate3d(0, -5px, 0);
|
||
|
|
-ms-transform: translate3d(0, -5px, 0);
|
||
|
|
transform: translate3d(0, -5px, 0);
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
-webkit-transform: translate3d(0, 0, 0);
|
||
|
|
-ms-transform: translate3d(0, 0, 0);
|
||
|
|
transform: translate3d(0, 0, 0);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@-webkit-keyframes bounceOut {
|
||
|
|
20% {
|
||
|
|
-webkit-transform: scale3d(.9, .9, .9);
|
||
|
|
transform: scale3d(.9, .9, .9);
|
||
|
|
}
|
||
|
|
|
||
|
|
50%, 55% {
|
||
|
|
-webkit-transform: scale3d(1.1, 1.1, 1.1);
|
||
|
|
transform: scale3d(1.1, 1.1, 1.1);
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
-webkit-transform: scale3d(.3, .3, .3);
|
||
|
|
transform: scale3d(.3, .3, .3);
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes bounceOut {
|
||
|
|
20% {
|
||
|
|
-webkit-transform: scale3d(.9, .9, .9);
|
||
|
|
-ms-transform: scale3d(.9, .9, .9);
|
||
|
|
transform: scale3d(.9, .9, .9);
|
||
|
|
}
|
||
|
|
|
||
|
|
50%, 55% {
|
||
|
|
-webkit-transform: scale3d(1.1, 1.1, 1.1);
|
||
|
|
-ms-transform: scale3d(1.1, 1.1, 1.1);
|
||
|
|
transform: scale3d(1.1, 1.1, 1.1);
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
-webkit-transform: scale3d(.3, .3, .3);
|
||
|
|
-ms-transform: scale3d(.3, .3, .3);
|
||
|
|
transform: scale3d(.3, .3, .3);
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@-webkit-keyframes bounceOutDown {
|
||
|
|
20% {
|
||
|
|
-webkit-transform: translate3d(0, 10px, 0);
|
||
|
|
transform: translate3d(0, 10px, 0);
|
||
|
|
}
|
||
|
|
|
||
|
|
40%, 45% {
|
||
|
|
-webkit-transform: translate3d(0, -20px, 0);
|
||
|
|
transform: translate3d(0, -20px, 0);
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
-webkit-transform: translate3d(0, 2000px, 0);
|
||
|
|
transform: translate3d(0, 2000px, 0);
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes bounceOutDown {
|
||
|
|
20% {
|
||
|
|
-webkit-transform: translate3d(0, 10px, 0);
|
||
|
|
-ms-transform: translate3d(0, 10px, 0);
|
||
|
|
transform: translate3d(0, 10px, 0);
|
||
|
|
}
|
||
|
|
|
||
|
|
40%, 45% {
|
||
|
|
-webkit-transform: translate3d(0, -20px, 0);
|
||
|
|
-ms-transform: translate3d(0, -20px, 0);
|
||
|
|
transform: translate3d(0, -20px, 0);
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
-webkit-transform: translate3d(0, 2000px, 0);
|
||
|
|
-ms-transform: translate3d(0, 2000px, 0);
|
||
|
|
transform: translate3d(0, 2000px, 0);
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@-webkit-keyframes bounceOutLeft {
|
||
|
|
20% {
|
||
|
|
-webkit-transform: translate3d(20px, 0, 0);
|
||
|
|
transform: translate3d(20px, 0, 0);
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
-webkit-transform: translate3d(-2000px, 0, 0);
|
||
|
|
transform: translate3d(-2000px, 0, 0);
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes bounceOutLeft {
|
||
|
|
20% {
|
||
|
|
-webkit-transform: translate3d(20px, 0, 0);
|
||
|
|
-ms-transform: translate3d(20px, 0, 0);
|
||
|
|
transform: translate3d(20px, 0, 0);
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
-webkit-transform: translate3d(-2000px, 0, 0);
|
||
|
|
-ms-transform: translate3d(-2000px, 0, 0);
|
||
|
|
transform: translate3d(-2000px, 0, 0);
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@-webkit-keyframes bounceOutRight {
|
||
|
|
20% {
|
||
|
|
-webkit-transform: translate3d(-20px, 0, 0);
|
||
|
|
transform: translate3d(-20px, 0, 0);
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
-webkit-transform: translate3d(2000px, 0, 0);
|
||
|
|
transform: translate3d(2000px, 0, 0);
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes bounceOutRight {
|
||
|
|
20% {
|
||
|
|
-webkit-transform: translate3d(-20px, 0, 0);
|
||
|
|
-ms-transform: translate3d(-20px, 0, 0);
|
||
|
|
transform: translate3d(-20px, 0, 0);
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
-webkit-transform: translate3d(2000px, 0, 0);
|
||
|
|
-ms-transform: translate3d(2000px, 0, 0);
|
||
|
|
transform: translate3d(2000px, 0, 0);
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@-webkit-keyframes bounceOutUp {
|
||
|
|
20% {
|
||
|
|
-webkit-transform: translate3d(0, -10px, 0);
|
||
|
|
transform: translate3d(0, -10px, 0);
|
||
|
|
}
|
||
|
|
|
||
|
|
40%, 45% {
|
||
|
|
-webkit-transform: translate3d(0, 20px, 0);
|
||
|
|
transform: translate3d(0, 20px, 0);
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
-webkit-transform: translate3d(0, -2000px, 0);
|
||
|
|
transform: translate3d(0, -2000px, 0);
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes bounceOutUp {
|
||
|
|
20% {
|
||
|
|
-webkit-transform: translate3d(0, -10px, 0);
|
||
|
|
-ms-transform: translate3d(0, -10px, 0);
|
||
|
|
transform: translate3d(0, -10px, 0);
|
||
|
|
}
|
||
|
|
|
||
|
|
40%, 45% {
|
||
|
|
-webkit-transform: translate3d(0, 20px, 0);
|
||
|
|
-ms-transform: translate3d(0, 20px, 0);
|
||
|
|
transform: translate3d(0, 20px, 0);
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
-webkit-transform: translate3d(0, -2000px, 0);
|
||
|
|
-ms-transform: translate3d(0, -2000px, 0);
|
||
|
|
transform: translate3d(0, -2000px, 0);
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@-webkit-keyframes fadeIn {
|
||
|
|
0% {
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes fadeIn {
|
||
|
|
0% {
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@-webkit-keyframes fadeInDown {
|
||
|
|
0% {
|
||
|
|
-webkit-transform: translate3d(0, -100%, 0);
|
||
|
|
transform: translate3d(0, -100%, 0);
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
-webkit-transform: none;
|
||
|
|
transform: none;
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes fadeInDown {
|
||
|
|
0% {
|
||
|
|
-webkit-transform: translate3d(0, -100%, 0);
|
||
|
|
-ms-transform: translate3d(0, -100%, 0);
|
||
|
|
transform: translate3d(0, -100%, 0);
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
-webkit-transform: none;
|
||
|
|
-ms-transform: none;
|
||
|
|
transform: none;
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@-webkit-keyframes fadeInDownBig {
|
||
|
|
0% {
|
||
|
|
-webkit-transform: translate3d(0, -2000px, 0);
|
||
|
|
transform: translate3d(0, -2000px, 0);
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
-webkit-transform: none;
|
||
|
|
transform: none;
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes fadeInDownBig {
|
||
|
|
0% {
|
||
|
|
-webkit-transform: translate3d(0, -2000px, 0);
|
||
|
|
-ms-transform: translate3d(0, -2000px, 0);
|
||
|
|
transform: translate3d(0, -2000px, 0);
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
-webkit-transform: none;
|
||
|
|
-ms-transform: none;
|
||
|
|
transform: none;
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@-webkit-keyframes fadeInLeft {
|
||
|
|
0% {
|
||
|
|
-webkit-transform: translate3d(-100%, 0, 0);
|
||
|
|
transform: translate3d(-100%, 0, 0);
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
-webkit-transform: none;
|
||
|
|
transform: none;
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes fadeInLeft {
|
||
|
|
0% {
|
||
|
|
-webkit-transform: translate3d(-100%, 0, 0);
|
||
|
|
-ms-transform: translate3d(-100%, 0, 0);
|
||
|
|
transform: translate3d(-100%, 0, 0);
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
-webkit-transform: none;
|
||
|
|
-ms-transform: none;
|
||
|
|
transform: none;
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@-webkit-keyframes fadeInLeftBig {
|
||
|
|
0% {
|
||
|
|
-webkit-transform: translate3d(-2000px, 0, 0);
|
||
|
|
transform: translate3d(-2000px, 0, 0);
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
-webkit-transform: none;
|
||
|
|
transform: none;
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes fadeInLeftBig {
|
||
|
|
0% {
|
||
|
|
-webkit-transform: translate3d(-2000px, 0, 0);
|
||
|
|
-ms-transform: translate3d(-2000px, 0, 0);
|
||
|
|
transform: translate3d(-2000px, 0, 0);
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
-webkit-transform: none;
|
||
|
|
-ms-transform: none;
|
||
|
|
transform: none;
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@-webkit-keyframes fadeInRight {
|
||
|
|
0% {
|
||
|
|
-webkit-transform: translate3d(100%, 0, 0);
|
||
|
|
transform: translate3d(100%, 0, 0);
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
-webkit-transform: none;
|
||
|
|
transform: none;
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes fadeInRight {
|
||
|
|
0% {
|
||
|
|
-webkit-transform: translate3d(100%, 0, 0);
|
||
|
|
-ms-transform: translate3d(100%, 0, 0);
|
||
|
|
transform: translate3d(100%, 0, 0);
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
-webkit-transform: none;
|
||
|
|
-ms-transform: none;
|
||
|
|
transform: none;
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@-webkit-keyframes fadeInRightBig {
|
||
|
|
0% {
|
||
|
|
-webkit-transform: translate3d(2000px, 0, 0);
|
||
|
|
transform: translate3d(2000px, 0, 0);
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
-webkit-transform: none;
|
||
|
|
transform: none;
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes fadeInRightBig {
|
||
|
|
0% {
|
||
|
|
-webkit-transform: translate3d(2000px, 0, 0);
|
||
|
|
-ms-transform: translate3d(2000px, 0, 0);
|
||
|
|
transform: translate3d(2000px, 0, 0);
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
-webkit-transform: none;
|
||
|
|
-ms-transform: none;
|
||
|
|
transform: none;
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@-webkit-keyframes fadeInUp {
|
||
|
|
0% {
|
||
|
|
-webkit-transform: translate3d(0, 100%, 0);
|
||
|
|
transform: translate3d(0, 100%, 0);
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
-webkit-transform: none;
|
||
|
|
transform: none;
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes fadeInUp {
|
||
|
|
0% {
|
||
|
|
-webkit-transform: translate3d(0, 100%, 0);
|
||
|
|
-ms-transform: translate3d(0, 100%, 0);
|
||
|
|
transform: translate3d(0, 100%, 0);
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
-webkit-transform: none;
|
||
|
|
-ms-transform: none;
|
||
|
|
transform: none;
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@-webkit-keyframes fadeInUpBig {
|
||
|
|
0% {
|
||
|
|
-webkit-transform: translate3d(0, 2000px, 0);
|
||
|
|
transform: translate3d(0, 2000px, 0);
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
-webkit-transform: none;
|
||
|
|
transform: none;
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes fadeInUpBig {
|
||
|
|
0% {
|
||
|
|
-webkit-transform: translate3d(0, 2000px, 0);
|
||
|
|
-ms-transform: translate3d(0, 2000px, 0);
|
||
|
|
transform: translate3d(0, 2000px, 0);
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
-webkit-transform: none;
|
||
|
|
-ms-transform: none;
|
||
|
|
transform: none;
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@-webkit-keyframes fadeOut {
|
||
|
|
0% {
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes fadeOut {
|
||
|
|
0% {
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@-webkit-keyframes fadeOutDown {
|
||
|
|
0% {
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
-webkit-transform: translate3d(0, 100%, 0);
|
||
|
|
transform: translate3d(0, 100%, 0);
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes fadeOutDown {
|
||
|
|
0% {
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
-webkit-transform: translate3d(0, 100%, 0);
|
||
|
|
-ms-transform: translate3d(0, 100%, 0);
|
||
|
|
transform: translate3d(0, 100%, 0);
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@-webkit-keyframes fadeOutDownBig {
|
||
|
|
0% {
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
-webkit-transform: translate3d(0, 2000px, 0);
|
||
|
|
transform: translate3d(0, 2000px, 0);
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes fadeOutDownBig {
|
||
|
|
0% {
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
-webkit-transform: translate3d(0, 2000px, 0);
|
||
|
|
-ms-transform: translate3d(0, 2000px, 0);
|
||
|
|
transform: translate3d(0, 2000px, 0);
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@-webkit-keyframes fadeOutLeft {
|
||
|
|
0% {
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
-webkit-transform: translate3d(-100%, 0, 0);
|
||
|
|
transform: translate3d(-100%, 0, 0);
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes fadeOutLeft {
|
||
|
|
0% {
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
-webkit-transform: translate3d(-100%, 0, 0);
|
||
|
|
-ms-transform: translate3d(-100%, 0, 0);
|
||
|
|
transform: translate3d(-100%, 0, 0);
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@-webkit-keyframes fadeOutLeftBig {
|
||
|
|
0% {
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
-webkit-transform: translate3d(-2000px, 0, 0);
|
||
|
|
transform: translate3d(-2000px, 0, 0);
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes fadeOutLeftBig {
|
||
|
|
0% {
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
-webkit-transform: translate3d(-2000px, 0, 0);
|
||
|
|
-ms-transform: translate3d(-2000px, 0, 0);
|
||
|
|
transform: translate3d(-2000px, 0, 0);
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@-webkit-keyframes fadeOutRight {
|
||
|
|
0% {
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
-webkit-transform: translate3d(100%, 0, 0);
|
||
|
|
transform: translate3d(100%, 0, 0);
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes fadeOutRight {
|
||
|
|
0% {
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
-webkit-transform: translate3d(100%, 0, 0);
|
||
|
|
-ms-transform: translate3d(100%, 0, 0);
|
||
|
|
transform: translate3d(100%, 0, 0);
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@-webkit-keyframes fadeOutRightBig {
|
||
|
|
0% {
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
-webkit-transform: translate3d(2000px, 0, 0);
|
||
|
|
transform: translate3d(2000px, 0, 0);
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes fadeOutRightBig {
|
||
|
|
0% {
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
-webkit-transform: translate3d(2000px, 0, 0);
|
||
|
|
-ms-transform: translate3d(2000px, 0, 0);
|
||
|
|
transform: translate3d(2000px, 0, 0);
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@-webkit-keyframes fadeOutUp {
|
||
|
|
0% {
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
-webkit-transform: translate3d(0, -100%, 0);
|
||
|
|
transform: translate3d(0, -100%, 0);
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes fadeOutUp {
|
||
|
|
0% {
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
-webkit-transform: translate3d(0, -100%, 0);
|
||
|
|
-ms-transform: translate3d(0, -100%, 0);
|
||
|
|
transform: translate3d(0, -100%, 0);
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@-webkit-keyframes fadeOutUpBig {
|
||
|
|
0% {
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
-webkit-transform: translate3d(0, -2000px, 0);
|
||
|
|
transform: translate3d(0, -2000px, 0);
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes fadeOutUpBig {
|
||
|
|
0% {
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
-webkit-transform: translate3d(0, -2000px, 0);
|
||
|
|
-ms-transform: translate3d(0, -2000px, 0);
|
||
|
|
transform: translate3d(0, -2000px, 0);
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@-webkit-keyframes flip {
|
||
|
|
0% {
|
||
|
|
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
|
||
|
|
transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
|
||
|
|
-webkit-animation-timing-function: ease-out;
|
||
|
|
animation-timing-function: ease-out;
|
||
|
|
}
|
||
|
|
|
||
|
|
40% {
|
||
|
|
-webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
|
||
|
|
transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
|
||
|
|
-webkit-animation-timing-function: ease-out;
|
||
|
|
animation-timing-function: ease-out;
|
||
|
|
}
|
||
|
|
|
||
|
|
50% {
|
||
|
|
-webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
|
||
|
|
transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
|
||
|
|
-webkit-animation-timing-function: ease-in;
|
||
|
|
animation-timing-function: ease-in;
|
||
|
|
}
|
||
|
|
|
||
|
|
80% {
|
||
|
|
-webkit-transform: perspective(400px) scale3d(.95, .95, .95);
|
||
|
|
transform: perspective(400px) scale3d(.95, .95, .95);
|
||
|
|
-webkit-animation-timing-function: ease-in;
|
||
|
|
animation-timing-function: ease-in;
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
-webkit-transform: perspective(400px);
|
||
|
|
transform: perspective(400px);
|
||
|
|
-webkit-animation-timing-function: ease-in;
|
||
|
|
animation-timing-function: ease-in;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes flip {
|
||
|
|
0% {
|
||
|
|
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
|
||
|
|
-ms-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
|
||
|
|
transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
|
||
|
|
-webkit-animation-timing-function: ease-out;
|
||
|
|
animation-timing-function: ease-out;
|
||
|
|
}
|
||
|
|
|
||
|
|
40% {
|
||
|
|
-webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
|
||
|
|
-ms-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
|
||
|
|
transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
|
||
|
|
-webkit-animation-timing-function: ease-out;
|
||
|
|
animation-timing-function: ease-out;
|
||
|
|
}
|
||
|
|
|
||
|
|
50% {
|
||
|
|
-webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
|
||
|
|
-ms-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
|
||
|
|
transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
|
||
|
|
-webkit-animation-timing-function: ease-in;
|
||
|
|
animation-timing-function: ease-in;
|
||
|
|
}
|
||
|
|
|
||
|
|
80% {
|
||
|
|
-webkit-transform: perspective(400px) scale3d(.95, .95, .95);
|
||
|
|
-ms-transform: perspective(400px) scale3d(.95, .95, .95);
|
||
|
|
transform: perspective(400px) scale3d(.95, .95, .95);
|
||
|
|
-webkit-animation-timing-function: ease-in;
|
||
|
|
animation-timing-function: ease-in;
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
-webkit-transform: perspective(400px);
|
||
|
|
-ms-transform: perspective(400px);
|
||
|
|
transform: perspective(400px);
|
||
|
|
-webkit-animation-timing-function: ease-in;
|
||
|
|
animation-timing-function: ease-in;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@-webkit-keyframes flipInX {
|
||
|
|
0% {
|
||
|
|
-webkit-transition-timing-function: ease-in;
|
||
|
|
transition-timing-function: ease-in;
|
||
|
|
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
|
||
|
|
transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
40% {
|
||
|
|
-webkit-transition-timing-function: ease-in;
|
||
|
|
transition-timing-function: ease-in;
|
||
|
|
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
|
||
|
|
transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
|
||
|
|
}
|
||
|
|
|
||
|
|
60% {
|
||
|
|
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
|
||
|
|
transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
80% {
|
||
|
|
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
|
||
|
|
transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
-webkit-transform: perspective(400px);
|
||
|
|
transform: perspective(400px);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes flipInX {
|
||
|
|
0% {
|
||
|
|
-webkit-transition-timing-function: ease-in;
|
||
|
|
transition-timing-function: ease-in;
|
||
|
|
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
|
||
|
|
-ms-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
|
||
|
|
transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
40% {
|
||
|
|
-webkit-transition-timing-function: ease-in;
|
||
|
|
transition-timing-function: ease-in;
|
||
|
|
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
|
||
|
|
-ms-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
|
||
|
|
transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
|
||
|
|
}
|
||
|
|
|
||
|
|
60% {
|
||
|
|
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
|
||
|
|
-ms-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
|
||
|
|
transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
80% {
|
||
|
|
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
|
||
|
|
-ms-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
|
||
|
|
transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
-webkit-transform: perspective(400px);
|
||
|
|
-ms-transform: perspective(400px);
|
||
|
|
transform: perspective(400px);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@-webkit-keyframes flipInY {
|
||
|
|
0% {
|
||
|
|
-webkit-transition-timing-function: ease-in;
|
||
|
|
transition-timing-function: ease-in;
|
||
|
|
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
|
||
|
|
transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
40% {
|
||
|
|
-webkit-transition-timing-function: ease-in;
|
||
|
|
transition-timing-function: ease-in;
|
||
|
|
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
|
||
|
|
transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
|
||
|
|
}
|
||
|
|
|
||
|
|
60% {
|
||
|
|
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
|
||
|
|
transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
80% {
|
||
|
|
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
|
||
|
|
transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
-webkit-transform: perspective(400px);
|
||
|
|
transform: perspective(400px);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes flipInY {
|
||
|
|
0% {
|
||
|
|
-webkit-transition-timing-function: ease-in;
|
||
|
|
transition-timing-function: ease-in;
|
||
|
|
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
|
||
|
|
-ms-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
|
||
|
|
transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
40% {
|
||
|
|
-webkit-transition-timing-function: ease-in;
|
||
|
|
transition-timing-function: ease-in;
|
||
|
|
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
|
||
|
|
-ms-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
|
||
|
|
transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
|
||
|
|
}
|
||
|
|
|
||
|
|
60% {
|
||
|
|
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
|
||
|
|
-ms-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
|
||
|
|
transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
80% {
|
||
|
|
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
|
||
|
|
-ms-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
|
||
|
|
transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
-webkit-transform: perspective(400px);
|
||
|
|
-ms-transform: perspective(400px);
|
||
|
|
transform: perspective(400px);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@-webkit-keyframes flipOutX {
|
||
|
|
0% {
|
||
|
|
-webkit-transform: perspective(400px);
|
||
|
|
transform: perspective(400px);
|
||
|
|
}
|
||
|
|
|
||
|
|
30% {
|
||
|
|
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
|
||
|
|
transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
|
||
|
|
transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes flipOutX {
|
||
|
|
0% {
|
||
|
|
-webkit-transform: perspective(400px);
|
||
|
|
-ms-transform: perspective(400px);
|
||
|
|
transform: perspective(400px);
|
||
|
|
}
|
||
|
|
|
||
|
|
30% {
|
||
|
|
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
|
||
|
|
-ms-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
|
||
|
|
transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
|
||
|
|
-ms-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
|
||
|
|
transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@-webkit-keyframes flipOutY {
|
||
|
|
0% {
|
||
|
|
-webkit-transform: perspective(400px);
|
||
|
|
transform: perspective(400px);
|
||
|
|
}
|
||
|
|
|
||
|
|
30% {
|
||
|
|
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
|
||
|
|
transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
|
||
|
|
transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes flipOutY {
|
||
|
|
0% {
|
||
|
|
-webkit-transform: perspective(400px);
|
||
|
|
-ms-transform: perspective(400px);
|
||
|
|
transform: perspective(400px);
|
||
|
|
}
|
||
|
|
|
||
|
|
30% {
|
||
|
|
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
|
||
|
|
-ms-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
|
||
|
|
transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
|
||
|
|
-ms-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
|
||
|
|
transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@-webkit-keyframes lightSpeedIn {
|
||
|
|
0% {
|
||
|
|
-webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
|
||
|
|
transform: translate3d(100%, 0, 0) skewX(-30deg);
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
60% {
|
||
|
|
-webkit-transform: skewX(20deg);
|
||
|
|
transform: skewX(20deg);
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
80% {
|
||
|
|
-webkit-transform: skewX(-5deg);
|
||
|
|
transform: skewX(-5deg);
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
-webkit-transform: none;
|
||
|
|
transform: none;
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes lightSpeedIn {
|
||
|
|
0% {
|
||
|
|
-webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
|
||
|
|
-ms-transform: translate3d(100%, 0, 0) skewX(-30deg);
|
||
|
|
transform: translate3d(100%, 0, 0) skewX(-30deg);
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
60% {
|
||
|
|
-webkit-transform: skewX(20deg);
|
||
|
|
-ms-transform: skewX(20deg);
|
||
|
|
transform: skewX(20deg);
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
80% {
|
||
|
|
-webkit-transform: skewX(-5deg);
|
||
|
|
-ms-transform: skewX(-5deg);
|
||
|
|
transform: skewX(-5deg);
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
-webkit-transform: none;
|
||
|
|
-ms-transform: none;
|
||
|
|
transform: none;
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@-webkit-keyframes lightSpeedOut {
|
||
|
|
0% {
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
-webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
|
||
|
|
transform: translate3d(100%, 0, 0) skewX(30deg);
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes lightSpeedOut {
|
||
|
|
0% {
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
-webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
|
||
|
|
-ms-transform: translate3d(100%, 0, 0) skewX(30deg);
|
||
|
|
transform: translate3d(100%, 0, 0) skewX(30deg);
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@-webkit-keyframes rotateIn {
|
||
|
|
0% {
|
||
|
|
-webkit-transform: rotate3d(0, 0, 1, -200deg);
|
||
|
|
transform: rotate3d(0, 0, 1, -200deg);
|
||
|
|
-webkit-transform-origin: center;
|
||
|
|
transform-origin: center;
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
-webkit-transform: none;
|
||
|
|
transform: none;
|
||
|
|
-webkit-transform-origin: center;
|
||
|
|
transform-origin: center;
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes rotateIn {
|
||
|
|
0% {
|
||
|
|
-webkit-transform: rotate3d(0, 0, 1, -200deg);
|
||
|
|
-ms-transform: rotate3d(0, 0, 1, -200deg);
|
||
|
|
transform: rotate3d(0, 0, 1, -200deg);
|
||
|
|
-webkit-transform-origin: center;
|
||
|
|
-ms-transform-origin: center;
|
||
|
|
transform-origin: center;
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
-webkit-transform: none;
|
||
|
|
-ms-transform: none;
|
||
|
|
transform: none;
|
||
|
|
-webkit-transform-origin: center;
|
||
|
|
-ms-transform-origin: center;
|
||
|
|
transform-origin: center;
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@-webkit-keyframes rotateInDownLeft {
|
||
|
|
0% {
|
||
|
|
-webkit-transform: rotate3d(0, 0, 1, -45deg);
|
||
|
|
transform: rotate3d(0, 0, 1, -45deg);
|
||
|
|
-webkit-transform-origin: left bottom;
|
||
|
|
transform-origin: left bottom;
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
-webkit-transform: none;
|
||
|
|
transform: none;
|
||
|
|
-webkit-transform-origin: left bottom;
|
||
|
|
transform-origin: left bottom;
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes rotateInDownLeft {
|
||
|
|
0% {
|
||
|
|
-webkit-transform: rotate3d(0, 0, 1, -45deg);
|
||
|
|
-ms-transform: rotate3d(0, 0, 1, -45deg);
|
||
|
|
transform: rotate3d(0, 0, 1, -45deg);
|
||
|
|
-webkit-transform-origin: left bottom;
|
||
|
|
-ms-transform-origin: left bottom;
|
||
|
|
transform-origin: left bottom;
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
-webkit-transform: none;
|
||
|
|
-ms-transform: none;
|
||
|
|
transform: none;
|
||
|
|
-webkit-transform-origin: left bottom;
|
||
|
|
-ms-transform-origin: left bottom;
|
||
|
|
transform-origin: left bottom;
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@-webkit-keyframes rotateInDownRight {
|
||
|
|
0% {
|
||
|
|
-webkit-transform: rotate3d(0, 0, 1, 45deg);
|
||
|
|
transform: rotate3d(0, 0, 1, 45deg);
|
||
|
|
-webkit-transform-origin: right bottom;
|
||
|
|
transform-origin: right bottom;
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
-webkit-transform: none;
|
||
|
|
transform: none;
|
||
|
|
-webkit-transform-origin: right bottom;
|
||
|
|
transform-origin: right bottom;
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes rotateInDownRight {
|
||
|
|
0% {
|
||
|
|
-webkit-transform: rotate3d(0, 0, 1, 45deg);
|
||
|
|
-ms-transform: rotate3d(0, 0, 1, 45deg);
|
||
|
|
transform: rotate3d(0, 0, 1, 45deg);
|
||
|
|
-webkit-transform-origin: right bottom;
|
||
|
|
-ms-transform-origin: right bottom;
|
||
|
|
transform-origin: right bottom;
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
-webkit-transform: none;
|
||
|
|
-ms-transform: none;
|
||
|
|
transform: none;
|
||
|
|
-webkit-transform-origin: right bottom;
|
||
|
|
-ms-transform-origin: right bottom;
|
||
|
|
transform-origin: right bottom;
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@-webkit-keyframes rotateInUpLeft {
|
||
|
|
0% {
|
||
|
|
-webkit-transform: rotate3d(0, 0, 1, 45deg);
|
||
|
|
transform: rotate3d(0, 0, 1, 45deg);
|
||
|
|
-webkit-transform-origin: left bottom;
|
||
|
|
transform-origin: left bottom;
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
-webkit-transform: none;
|
||
|
|
transform: none;
|
||
|
|
-webkit-transform-origin: left bottom;
|
||
|
|
transform-origin: left bottom;
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes rotateInUpLeft {
|
||
|
|
0% {
|
||
|
|
-webkit-transform: rotate3d(0, 0, 1, 45deg);
|
||
|
|
-ms-transform: rotate3d(0, 0, 1, 45deg);
|
||
|
|
transform: rotate3d(0, 0, 1, 45deg);
|
||
|
|
-webkit-transform-origin: left bottom;
|
||
|
|
-ms-transform-origin: left bottom;
|
||
|
|
transform-origin: left bottom;
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
-webkit-transform: none;
|
||
|
|
-ms-transform: none;
|
||
|
|
transform: none;
|
||
|
|
-webkit-transform-origin: left bottom;
|
||
|
|
-ms-transform-origin: left bottom;
|
||
|
|
transform-origin: left bottom;
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@-webkit-keyframes rotateInUpRight {
|
||
|
|
0% {
|
||
|
|
-webkit-transform: rotate3d(0, 0, 1, -90deg);
|
||
|
|
transform: rotate3d(0, 0, 1, -90deg);
|
||
|
|
-webkit-transform-origin: right bottom;
|
||
|
|
transform-origin: right bottom;
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
-webkit-transform: none;
|
||
|
|
transform: none;
|
||
|
|
-webkit-transform-origin: right bottom;
|
||
|
|
transform-origin: right bottom;
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes rotateInUpRight {
|
||
|
|
0% {
|
||
|
|
-webkit-transform: rotate3d(0, 0, 1, -90deg);
|
||
|
|
-ms-transform: rotate3d(0, 0, 1, -90deg);
|
||
|
|
transform: rotate3d(0, 0, 1, -90deg);
|
||
|
|
-webkit-transform-origin: right bottom;
|
||
|
|
-ms-transform-origin: right bottom;
|
||
|
|
transform-origin: right bottom;
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
-webkit-transform: none;
|
||
|
|
-ms-transform: none;
|
||
|
|
transform: none;
|
||
|
|
-webkit-transform-origin: right bottom;
|
||
|
|
-ms-transform-origin: right bottom;
|
||
|
|
transform-origin: right bottom;
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@-webkit-keyframes rotateOut {
|
||
|
|
0% {
|
||
|
|
-webkit-transform-origin: center;
|
||
|
|
transform-origin: center;
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
-webkit-transform: rotate3d(0, 0, 1, 200deg);
|
||
|
|
transform: rotate3d(0, 0, 1, 200deg);
|
||
|
|
-webkit-transform-origin: center;
|
||
|
|
transform-origin: center;
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes rotateOut {
|
||
|
|
0% {
|
||
|
|
-webkit-transform-origin: center;
|
||
|
|
-ms-transform-origin: center;
|
||
|
|
transform-origin: center;
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
-webkit-transform: rotate3d(0, 0, 1, 200deg);
|
||
|
|
-ms-transform: rotate3d(0, 0, 1, 200deg);
|
||
|
|
transform: rotate3d(0, 0, 1, 200deg);
|
||
|
|
-webkit-transform-origin: center;
|
||
|
|
-ms-transform-origin: center;
|
||
|
|
transform-origin: center;
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@-webkit-keyframes rotateOutDownLeft {
|
||
|
|
0% {
|
||
|
|
-webkit-transform-origin: left bottom;
|
||
|
|
transform-origin: left bottom;
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
-webkit-transform: rotate(0, 0, 1, 45deg);
|
||
|
|
transform: rotate(0, 0, 1, 45deg);
|
||
|
|
-webkit-transform-origin: left bottom;
|
||
|
|
transform-origin: left bottom;
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes rotateOutDownLeft {
|
||
|
|
0% {
|
||
|
|
-webkit-transform-origin: left bottom;
|
||
|
|
-ms-transform-origin: left bottom;
|
||
|
|
transform-origin: left bottom;
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
-webkit-transform: rotate(0, 0, 1, 45deg);
|
||
|
|
-ms-transform: rotate(0, 0, 1, 45deg);
|
||
|
|
transform: rotate(0, 0, 1, 45deg);
|
||
|
|
-webkit-transform-origin: left bottom;
|
||
|
|
-ms-transform-origin: left bottom;
|
||
|
|
transform-origin: left bottom;
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@-webkit-keyframes rotateOutDownRight {
|
||
|
|
0% {
|
||
|
|
-webkit-transform-origin: right bottom;
|
||
|
|
transform-origin: right bottom;
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
-webkit-transform: rotate3d(0, 0, 1, -45deg);
|
||
|
|
transform: rotate3d(0, 0, 1, -45deg);
|
||
|
|
-webkit-transform-origin: right bottom;
|
||
|
|
transform-origin: right bottom;
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes rotateOutDownRight {
|
||
|
|
0% {
|
||
|
|
-webkit-transform-origin: right bottom;
|
||
|
|
-ms-transform-origin: right bottom;
|
||
|
|
transform-origin: right bottom;
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
-webkit-transform: rotate3d(0, 0, 1, -45deg);
|
||
|
|
-ms-transform: rotate3d(0, 0, 1, -45deg);
|
||
|
|
transform: rotate3d(0, 0, 1, -45deg);
|
||
|
|
-webkit-transform-origin: right bottom;
|
||
|
|
-ms-transform-origin: right bottom;
|
||
|
|
transform-origin: right bottom;
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@-webkit-keyframes rotateOutUpLeft {
|
||
|
|
0% {
|
||
|
|
-webkit-transform-origin: left bottom;
|
||
|
|
transform-origin: left bottom;
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
-webkit-transform: rotate3d(0, 0, 1, -45deg);
|
||
|
|
transform: rotate3d(0, 0, 1, -45deg);
|
||
|
|
-webkit-transform-origin: left bottom;
|
||
|
|
transform-origin: left bottom;
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes rotateOutUpLeft {
|
||
|
|
0% {
|
||
|
|
-webkit-transform-origin: left bottom;
|
||
|
|
-ms-transform-origin: left bottom;
|
||
|
|
transform-origin: left bottom;
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
-webkit-transform: rotate3d(0, 0, 1, -45deg);
|
||
|
|
-ms-transform: rotate3d(0, 0, 1, -45deg);
|
||
|
|
transform: rotate3d(0, 0, 1, -45deg);
|
||
|
|
-webkit-transform-origin: left bottom;
|
||
|
|
-ms-transform-origin: left bottom;
|
||
|
|
transform-origin: left bottom;
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@-webkit-keyframes rotateOutUpRight {
|
||
|
|
0% {
|
||
|
|
-webkit-transform-origin: right bottom;
|
||
|
|
transform-origin: right bottom;
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
-webkit-transform: rotate3d(0, 0, 1, 90deg);
|
||
|
|
transform: rotate3d(0, 0, 1, 90deg);
|
||
|
|
-webkit-transform-origin: right bottom;
|
||
|
|
transform-origin: right bottom;
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes rotateOutUpRight {
|
||
|
|
0% {
|
||
|
|
-webkit-transform-origin: right bottom;
|
||
|
|
-ms-transform-origin: right bottom;
|
||
|
|
transform-origin: right bottom;
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
-webkit-transform: rotate3d(0, 0, 1, 90deg);
|
||
|
|
-ms-transform: rotate3d(0, 0, 1, 90deg);
|
||
|
|
transform: rotate3d(0, 0, 1, 90deg);
|
||
|
|
-webkit-transform-origin: right bottom;
|
||
|
|
-ms-transform-origin: right bottom;
|
||
|
|
transform-origin: right bottom;
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@-webkit-keyframes hinge {
|
||
|
|
0% {
|
||
|
|
-webkit-transform-origin: top left;
|
||
|
|
transform-origin: top left;
|
||
|
|
-webkit-animation-timing-function: ease-in-out;
|
||
|
|
animation-timing-function: ease-in-out;
|
||
|
|
}
|
||
|
|
|
||
|
|
20%, 60% {
|
||
|
|
-webkit-transform: rotate3d(0, 0, 1, 80deg);
|
||
|
|
transform: rotate3d(0, 0, 1, 80deg);
|
||
|
|
-webkit-transform-origin: top left;
|
||
|
|
transform-origin: top left;
|
||
|
|
-webkit-animation-timing-function: ease-in-out;
|
||
|
|
animation-timing-function: ease-in-out;
|
||
|
|
}
|
||
|
|
|
||
|
|
40%, 80% {
|
||
|
|
-webkit-transform: rotate3d(0, 0, 1, 60deg);
|
||
|
|
transform: rotate3d(0, 0, 1, 60deg);
|
||
|
|
-webkit-transform-origin: top left;
|
||
|
|
transform-origin: top left;
|
||
|
|
-webkit-animation-timing-function: ease-in-out;
|
||
|
|
animation-timing-function: ease-in-out;
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
-webkit-transform: translate3d(0, 700px, 0);
|
||
|
|
transform: translate3d(0, 700px, 0);
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes hinge {
|
||
|
|
0% {
|
||
|
|
-webkit-transform-origin: top left;
|
||
|
|
-ms-transform-origin: top left;
|
||
|
|
transform-origin: top left;
|
||
|
|
-webkit-animation-timing-function: ease-in-out;
|
||
|
|
animation-timing-function: ease-in-out;
|
||
|
|
}
|
||
|
|
|
||
|
|
20%, 60% {
|
||
|
|
-webkit-transform: rotate3d(0, 0, 1, 80deg);
|
||
|
|
-ms-transform: rotate3d(0, 0, 1, 80deg);
|
||
|
|
transform: rotate3d(0, 0, 1, 80deg);
|
||
|
|
-webkit-transform-origin: top left;
|
||
|
|
-ms-transform-origin: top left;
|
||
|
|
transform-origin: top left;
|
||
|
|
-webkit-animation-timing-function: ease-in-out;
|
||
|
|
animation-timing-function: ease-in-out;
|
||
|
|
}
|
||
|
|
|
||
|
|
40%, 80% {
|
||
|
|
-webkit-transform: rotate3d(0, 0, 1, 60deg);
|
||
|
|
-ms-transform: rotate3d(0, 0, 1, 60deg);
|
||
|
|
transform: rotate3d(0, 0, 1, 60deg);
|
||
|
|
-webkit-transform-origin: top left;
|
||
|
|
-ms-transform-origin: top left;
|
||
|
|
transform-origin: top left;
|
||
|
|
-webkit-animation-timing-function: ease-in-out;
|
||
|
|
animation-timing-function: ease-in-out;
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
-webkit-transform: translate3d(0, 700px, 0);
|
||
|
|
-ms-transform: translate3d(0, 700px, 0);
|
||
|
|
transform: translate3d(0, 700px, 0);
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
|
||
|
|
|
||
|
|
@-webkit-keyframes rollIn {
|
||
|
|
0% {
|
||
|
|
-webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
|
||
|
|
transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
-webkit-transform: none;
|
||
|
|
transform: none;
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes rollIn {
|
||
|
|
0% {
|
||
|
|
-webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
|
||
|
|
-ms-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
|
||
|
|
transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
-webkit-transform: none;
|
||
|
|
-ms-transform: none;
|
||
|
|
transform: none;
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
|
||
|
|
|
||
|
|
@-webkit-keyframes rollOut {
|
||
|
|
0% {
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
-webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
|
||
|
|
transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes rollOut {
|
||
|
|
0% {
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
-webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
|
||
|
|
-ms-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
|
||
|
|
transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@-webkit-keyframes zoomIn {
|
||
|
|
0% {
|
||
|
|
-webkit-transform: scale3d(.3, .3, .3);
|
||
|
|
transform: scale3d(.3, .3, .3);
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
50% {
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes zoomIn {
|
||
|
|
0% {
|
||
|
|
-webkit-transform: scale3d(.3, .3, .3);
|
||
|
|
-ms-transform: scale3d(.3, .3, .3);
|
||
|
|
transform: scale3d(.3, .3, .3);
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
50% {
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@-webkit-keyframes zoomInDown {
|
||
|
|
0% {
|
||
|
|
-webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
|
||
|
|
transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
|
||
|
|
-webkit-animation-timing-function: cubic-bezier(.550, .055, .675, .190);
|
||
|
|
animation-timing-function: cubic-bezier(.550, .055, .675, .190);
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
60% {
|
||
|
|
-webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
|
||
|
|
transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
|
||
|
|
-webkit-animation-timing-function: cubic-bezier(.175, .885, .320, 1);
|
||
|
|
animation-timing-function: cubic-bezier(.175, .885, .320, 1);
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes zoomInDown {
|
||
|
|
0% {
|
||
|
|
-webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
|
||
|
|
-ms-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
|
||
|
|
transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
|
||
|
|
-webkit-animation-timing-function: cubic-bezier(.550, .055, .675, .190);
|
||
|
|
animation-timing-function: cubic-bezier(.550, .055, .675, .190);
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
60% {
|
||
|
|
-webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
|
||
|
|
-ms-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
|
||
|
|
transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
|
||
|
|
-webkit-animation-timing-function: cubic-bezier(.175, .885, .320, 1);
|
||
|
|
animation-timing-function: cubic-bezier(.175, .885, .320, 1);
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@-webkit-keyframes zoomInLeft {
|
||
|
|
0% {
|
||
|
|
-webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
|
||
|
|
transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
|
||
|
|
-webkit-animation-timing-function: cubic-bezier(.550, .055, .675, .190);
|
||
|
|
animation-timing-function: cubic-bezier(.550, .055, .675, .190);
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
60% {
|
||
|
|
-webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
|
||
|
|
transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
|
||
|
|
-webkit-animation-timing-function: cubic-bezier(.175, .885, .320, 1);
|
||
|
|
animation-timing-function: cubic-bezier(.175, .885, .320, 1);
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes zoomInLeft {
|
||
|
|
0% {
|
||
|
|
-webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
|
||
|
|
-ms-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
|
||
|
|
transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
|
||
|
|
-webkit-animation-timing-function: cubic-bezier(.550, .055, .675, .190);
|
||
|
|
animation-timing-function: cubic-bezier(.550, .055, .675, .190);
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
60% {
|
||
|
|
-webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
|
||
|
|
-ms-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
|
||
|
|
transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
|
||
|
|
-webkit-animation-timing-function: cubic-bezier(.175, .885, .320, 1);
|
||
|
|
animation-timing-function: cubic-bezier(.175, .885, .320, 1);
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@-webkit-keyframes zoomInRight {
|
||
|
|
0% {
|
||
|
|
-webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
|
||
|
|
transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
|
||
|
|
-webkit-animation-timing-function: cubic-bezier(.550, .055, .675, .190);
|
||
|
|
animation-timing-function: cubic-bezier(.550, .055, .675, .190);
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
60% {
|
||
|
|
-webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
|
||
|
|
transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
|
||
|
|
-webkit-animation-timing-function: cubic-bezier(.175, .885, .320, 1);
|
||
|
|
animation-timing-function: cubic-bezier(.175, .885, .320, 1);
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes zoomInRight {
|
||
|
|
0% {
|
||
|
|
-webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
|
||
|
|
-ms-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
|
||
|
|
transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
|
||
|
|
-webkit-animation-timing-function: cubic-bezier(.550, .055, .675, .190);
|
||
|
|
animation-timing-function: cubic-bezier(.550, .055, .675, .190);
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
60% {
|
||
|
|
-webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
|
||
|
|
-ms-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
|
||
|
|
transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
|
||
|
|
-webkit-animation-timing-function: cubic-bezier(.175, .885, .320, 1);
|
||
|
|
animation-timing-function: cubic-bezier(.175, .885, .320, 1);
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@-webkit-keyframes zoomInUp {
|
||
|
|
0% {
|
||
|
|
-webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
|
||
|
|
transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
|
||
|
|
-webkit-animation-timing-function: cubic-bezier(.550, .055, .675, .190);
|
||
|
|
animation-timing-function: cubic-bezier(.550, .055, .675, .190);
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
60% {
|
||
|
|
-webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
|
||
|
|
transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
|
||
|
|
-webkit-animation-timing-function: cubic-bezier(.175, .885, .320, 1);
|
||
|
|
animation-timing-function: cubic-bezier(.175, .885, .320, 1);
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes zoomInUp {
|
||
|
|
0% {
|
||
|
|
-webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
|
||
|
|
-ms-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
|
||
|
|
transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
|
||
|
|
-webkit-animation-timing-function: cubic-bezier(.550, .055, .675, .190);
|
||
|
|
animation-timing-function: cubic-bezier(.550, .055, .675, .190);
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
60% {
|
||
|
|
-webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
|
||
|
|
-ms-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
|
||
|
|
transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
|
||
|
|
-webkit-animation-timing-function: cubic-bezier(.175, .885, .320, 1);
|
||
|
|
animation-timing-function: cubic-bezier(.175, .885, .320, 1);
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@-webkit-keyframes zoomOut {
|
||
|
|
0% {
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
50% {
|
||
|
|
-webkit-transform: scale3d(.3, .3, .3);
|
||
|
|
transform: scale3d(.3, .3, .3);
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes zoomOut {
|
||
|
|
0% {
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
50% {
|
||
|
|
-webkit-transform: scale3d(.3, .3, .3);
|
||
|
|
-ms-transform: scale3d(.3, .3, .3);
|
||
|
|
transform: scale3d(.3, .3, .3);
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@-webkit-keyframes zoomOutDown {
|
||
|
|
40% {
|
||
|
|
-webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
|
||
|
|
transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
|
||
|
|
-webkit-animation-timing-function: cubic-bezier(.550, .055, .675, .190);
|
||
|
|
animation-timing-function: cubic-bezier(.550, .055, .675, .190);
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
-webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
|
||
|
|
transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
|
||
|
|
-webkit-transform-origin: center bottom;
|
||
|
|
transform-origin: center bottom;
|
||
|
|
-webkit-animation-timing-function: cubic-bezier(.175, .885, .320, 1);
|
||
|
|
animation-timing-function: cubic-bezier(.175, .885, .320, 1);
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes zoomOutDown {
|
||
|
|
40% {
|
||
|
|
-webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
|
||
|
|
-ms-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
|
||
|
|
transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
|
||
|
|
-webkit-animation-timing-function: cubic-bezier(.550, .055, .675, .190);
|
||
|
|
animation-timing-function: cubic-bezier(.550, .055, .675, .190);
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
-webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
|
||
|
|
-ms-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
|
||
|
|
transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
|
||
|
|
-webkit-transform-origin: center bottom;
|
||
|
|
-ms-transform-origin: center bottom;
|
||
|
|
transform-origin: center bottom;
|
||
|
|
-webkit-animation-timing-function: cubic-bezier(.175, .885, .320, 1);
|
||
|
|
animation-timing-function: cubic-bezier(.175, .885, .320, 1);
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@-webkit-keyframes zoomOutLeft {
|
||
|
|
40% {
|
||
|
|
-webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
|
||
|
|
transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
-webkit-transform: scale(.1) translate3d(-2000px, 0, 0);
|
||
|
|
transform: scale(.1) translate3d(-2000px, 0, 0);
|
||
|
|
-webkit-transform-origin: left center;
|
||
|
|
transform-origin: left center;
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes zoomOutLeft {
|
||
|
|
40% {
|
||
|
|
-webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
|
||
|
|
-ms-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
|
||
|
|
transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
-webkit-transform: scale(.1) translate3d(-2000px, 0, 0);
|
||
|
|
-ms-transform: scale(.1) translate3d(-2000px, 0, 0);
|
||
|
|
transform: scale(.1) translate3d(-2000px, 0, 0);
|
||
|
|
-webkit-transform-origin: left center;
|
||
|
|
-ms-transform-origin: left center;
|
||
|
|
transform-origin: left center;
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@-webkit-keyframes zoomOutRight {
|
||
|
|
40% {
|
||
|
|
-webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
|
||
|
|
transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
-webkit-transform: scale(.1) translate3d(2000px, 0, 0);
|
||
|
|
transform: scale(.1) translate3d(2000px, 0, 0);
|
||
|
|
-webkit-transform-origin: right center;
|
||
|
|
transform-origin: right center;
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes zoomOutRight {
|
||
|
|
40% {
|
||
|
|
-webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
|
||
|
|
-ms-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
|
||
|
|
transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
-webkit-transform: scale(.1) translate3d(2000px, 0, 0);
|
||
|
|
-ms-transform: scale(.1) translate3d(2000px, 0, 0);
|
||
|
|
transform: scale(.1) translate3d(2000px, 0, 0);
|
||
|
|
-webkit-transform-origin: right center;
|
||
|
|
-ms-transform-origin: right center;
|
||
|
|
transform-origin: right center;
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@-webkit-keyframes zoomOutUp {
|
||
|
|
40% {
|
||
|
|
-webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
|
||
|
|
transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
|
||
|
|
-webkit-animation-timing-function: cubic-bezier(.550, .055, .675, .190);
|
||
|
|
animation-timing-function: cubic-bezier(.550, .055, .675, .190);
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
-webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
|
||
|
|
transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
|
||
|
|
-webkit-transform-origin: center bottom;
|
||
|
|
transform-origin: center bottom;
|
||
|
|
-webkit-animation-timing-function: cubic-bezier(.175, .885, .320, 1);
|
||
|
|
animation-timing-function: cubic-bezier(.175, .885, .320, 1);
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes zoomOutUp {
|
||
|
|
40% {
|
||
|
|
-webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
|
||
|
|
-ms-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
|
||
|
|
transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
|
||
|
|
-webkit-animation-timing-function: cubic-bezier(.550, .055, .675, .190);
|
||
|
|
animation-timing-function: cubic-bezier(.550, .055, .675, .190);
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
-webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
|
||
|
|
-ms-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
|
||
|
|
transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
|
||
|
|
-webkit-transform-origin: center bottom;
|
||
|
|
-ms-transform-origin: center bottom;
|
||
|
|
transform-origin: center bottom;
|
||
|
|
-webkit-animation-timing-function: cubic-bezier(.175, .885, .320, 1);
|
||
|
|
animation-timing-function: cubic-bezier(.175, .885, .320, 1);
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@-moz-keyframes spin {
|
||
|
|
0% {
|
||
|
|
-moz-transform: rotate(0deg);
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
-moz-transform: rotate(359deg);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@-webkit-keyframes spin {
|
||
|
|
0% {
|
||
|
|
-webkit-transform: rotate(0deg);
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
-webkit-transform: rotate(359deg);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@-o-keyframes spin {
|
||
|
|
0% {
|
||
|
|
-o-transform: rotate(0deg);
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
-o-transform: rotate(359deg);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes spin {
|
||
|
|
0% {
|
||
|
|
-webkit-transform: rotate(0deg);
|
||
|
|
transform: rotate(0deg);
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
-webkit-transform: rotate(359deg);
|
||
|
|
transform: rotate(359deg);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes fadebottom {
|
||
|
|
0% {
|
||
|
|
opacity: 1;
|
||
|
|
transform: translateY(0px);
|
||
|
|
-moz-transform: translateY(0px);
|
||
|
|
-o-transform: translateY(0px);
|
||
|
|
}
|
||
|
|
|
||
|
|
25% {
|
||
|
|
opacity: 0;
|
||
|
|
transform: translateY(20px);
|
||
|
|
-moz-transform: translateY(20px);
|
||
|
|
-o-transform: translateY(20px);
|
||
|
|
}
|
||
|
|
|
||
|
|
30% {
|
||
|
|
opacity: 0;
|
||
|
|
transform: translateY(0px);
|
||
|
|
-moz-transform: translateY(0px);
|
||
|
|
-o-transform: translateY(0px);
|
||
|
|
}
|
||
|
|
|
||
|
|
45% {
|
||
|
|
opacity: 1;
|
||
|
|
transform: translateY(0px);
|
||
|
|
-moz-transform: translateY(0px);
|
||
|
|
-o-transform: translateY(0px);
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
opacity: 1;
|
||
|
|
transform: translateY(0px);
|
||
|
|
-moz-transform: translateY(0px);
|
||
|
|
-o-transform: translateY(0px);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@-webkit-keyframes fadebottom {
|
||
|
|
0% {
|
||
|
|
opacity: 1;
|
||
|
|
transform: translateY(0px);
|
||
|
|
-webkit-transform: translateY(0px);
|
||
|
|
}
|
||
|
|
|
||
|
|
25% {
|
||
|
|
opacity: 0;
|
||
|
|
transform: translateY(20px);
|
||
|
|
-webkit-transform: translateY(20px);
|
||
|
|
}
|
||
|
|
|
||
|
|
30% {
|
||
|
|
opacity: 0;
|
||
|
|
transform: translateY(0px);
|
||
|
|
-webkit-transform: translateY(0px);
|
||
|
|
}
|
||
|
|
|
||
|
|
45% {
|
||
|
|
opacity: 1;
|
||
|
|
transform: translateY(0px);
|
||
|
|
-webkit-transform: translateY(0px);
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
opacity: 1;
|
||
|
|
transform: translateY(0px);
|
||
|
|
-webkit-transform: translateY(0px);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Blurred backgrounds */
|
||
|
|
|
||
|
|
/* Polygon backgrounds */
|
||
|
|
|
||
|
|
/* Blurred images */
|
||
|
|
|
||
|
|
/* Full images */
|
||
|
|
|
||
|
|
/* Pattern backgrounds */
|
||
|
|
|
||
|
|
/* Gradients */
|
||
|
|
|
||
|
|
/* Boilerplate */
|
||
|
|
|
||
|
|
[hidden] {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
html {
|
||
|
|
font-family: sans-serif;
|
||
|
|
-webkit-text-size-adjust: 100%;
|
||
|
|
-ms-text-size-adjust: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
body {
|
||
|
|
margin: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
@media print {
|
||
|
|
* {
|
||
|
|
color: #000 !important;
|
||
|
|
background: transparent !important;
|
||
|
|
box-shadow: none !important;
|
||
|
|
text-shadow: none !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
a, a:visited {
|
||
|
|
text-decoration: underline;
|
||
|
|
}
|
||
|
|
|
||
|
|
a[href]:after {
|
||
|
|
content: ' (' attr(href)')';
|
||
|
|
}
|
||
|
|
|
||
|
|
a[href^='javascript:']:after, a[href^='#']:after {
|
||
|
|
content: '';
|
||
|
|
}
|
||
|
|
|
||
|
|
@page {
|
||
|
|
margin: 2cm .5cm;
|
||
|
|
}
|
||
|
|
|
||
|
|
p, h2, h3 {
|
||
|
|
orphans: 3;
|
||
|
|
widows: 3;
|
||
|
|
}
|
||
|
|
|
||
|
|
h2, h3 {
|
||
|
|
page-break-after: avoid;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
a {
|
||
|
|
text-decoration: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
a,a:visited,a:focus,a:active,*:visited,*:focus,*:active {
|
||
|
|
outline: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
html {
|
||
|
|
font-size: 62.5%;
|
||
|
|
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||
|
|
}
|
||
|
|
|
||
|
|
*,*:before,*:after {
|
||
|
|
-webkit-box-sizing: border-box;
|
||
|
|
-moz-box-sizing: border-box;
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Border Radius */
|
||
|
|
|
||
|
|
/* 2px */
|
||
|
|
|
||
|
|
/* 4px */
|
||
|
|
|
||
|
|
/* 6px */
|
||
|
|
|
||
|
|
/* 8px */
|
||
|
|
|
||
|
|
/* 10px */
|
||
|
|
|
||
|
|
/* 100px */
|
||
|
|
|
||
|
|
/* 0px */
|
||
|
|
|
||
|
|
/* Grids */
|
||
|
|
|
||
|
|
[class*='col-'] {
|
||
|
|
-webkit-box-sizing: border-box;
|
||
|
|
-moz-box-sizing: border-box;
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* animation sets */
|
||
|
|
|
||
|
|
/* move from / to */
|
||
|
|
|
||
|
|
/* fade */
|
||
|
|
|
||
|
|
/* move from / to and fade */
|
||
|
|
|
||
|
|
/********************************* keyframes **************************************/
|
||
|
|
|
||
|
|
/* move from / to */
|
||
|
|
|
||
|
|
@-webkit-keyframes moveFromLeft {
|
||
|
|
from {
|
||
|
|
-webkit-transform: translateX(-100%);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@-moz-keyframes moveFromLeft {
|
||
|
|
from {
|
||
|
|
-moz-transform: translateX(-100%);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes moveFromLeft {
|
||
|
|
from {
|
||
|
|
transform: translateX(-100%);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@-webkit-keyframes moveFromRight {
|
||
|
|
from {
|
||
|
|
-webkit-transform: translateX(100%);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@-moz-keyframes moveFromRight {
|
||
|
|
from {
|
||
|
|
-moz-transform: translateX(100%);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes moveFromRight {
|
||
|
|
from {
|
||
|
|
transform: translateX(100%);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@-webkit-keyframes moveFromTop {
|
||
|
|
from {
|
||
|
|
-webkit-transform: translateY(-100%);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@-moz-keyframes moveFromTop {
|
||
|
|
from {
|
||
|
|
-moz-transform: translateY(-100%);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes moveFromTop {
|
||
|
|
from {
|
||
|
|
transform: translateY(-100%);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@-webkit-keyframes moveFromBottom {
|
||
|
|
from {
|
||
|
|
-webkit-transform: translateY(100%);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@-moz-keyframes moveFromBottom {
|
||
|
|
from {
|
||
|
|
-moz-transform: translateY(100%);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes moveFromBottom {
|
||
|
|
from {
|
||
|
|
transform: translateY(100%);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* fade */
|
||
|
|
|
||
|
|
@-webkit-keyframes fade {
|
||
|
|
to {
|
||
|
|
opacity: .3;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@-moz-keyframes fade {
|
||
|
|
to {
|
||
|
|
opacity: .3;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes fade {
|
||
|
|
to {
|
||
|
|
opacity: .3;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* move from / to and fade */
|
||
|
|
|
||
|
|
@-webkit-keyframes moveFromLeftFade {
|
||
|
|
from {
|
||
|
|
-webkit-transform: translateX(-100%);
|
||
|
|
opacity: .3;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@-moz-keyframes moveFromLeftFade {
|
||
|
|
from {
|
||
|
|
-moz-transform: translateX(-100%);
|
||
|
|
opacity: .3;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes moveFromLeftFade {
|
||
|
|
from {
|
||
|
|
transform: translateX(-100%);
|
||
|
|
opacity: .3;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@-webkit-keyframes moveFromRightFade {
|
||
|
|
from {
|
||
|
|
-webkit-transform: translateX(100%);
|
||
|
|
opacity: .3;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@-moz-keyframes moveFromRightFade {
|
||
|
|
from {
|
||
|
|
-moz-transform: translateX(100%);
|
||
|
|
opacity: .3;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes moveFromRightFade {
|
||
|
|
from {
|
||
|
|
transform: translateX(100%);
|
||
|
|
opacity: .3;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@-webkit-keyframes moveFromTopFade {
|
||
|
|
from {
|
||
|
|
-webkit-transform: translateY(-100%);
|
||
|
|
opacity: .3;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@-moz-keyframes moveFromTopFade {
|
||
|
|
from {
|
||
|
|
-moz-transform: translateY(-100%);
|
||
|
|
opacity: .3;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes moveFromTopFade {
|
||
|
|
from {
|
||
|
|
transform: translateY(-100%);
|
||
|
|
opacity: .3;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@-webkit-keyframes moveFromBottomFade {
|
||
|
|
from {
|
||
|
|
-webkit-transform: translateY(100%);
|
||
|
|
opacity: .3;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@-moz-keyframes moveFromBottomFade {
|
||
|
|
from {
|
||
|
|
-moz-transform: translateY(100%);
|
||
|
|
opacity: .3;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes moveFromBottomFade {
|
||
|
|
from {
|
||
|
|
transform: translateY(100%);
|
||
|
|
opacity: .3;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* scale and fade */
|
||
|
|
|
||
|
|
/********************************* keyframes **************************************/
|
||
|
|
|
||
|
|
/* scale and fade */
|
||
|
|
|
||
|
|
@-webkit-keyframes scaleUp {
|
||
|
|
from {
|
||
|
|
-webkit-transform: scale(.8);
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@-moz-keyframes scaleUp {
|
||
|
|
from {
|
||
|
|
-moz-transform: scale(.8);
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes scaleUp {
|
||
|
|
from {
|
||
|
|
transform: scale(.8);
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@-webkit-keyframes scaleUpCenter {
|
||
|
|
from {
|
||
|
|
-webkit-transform: scale(.7);
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@-moz-keyframes scaleUpCenter {
|
||
|
|
from {
|
||
|
|
-moz-transform: scale(.7);
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes scaleUpCenter {
|
||
|
|
from {
|
||
|
|
transform: scale(.7);
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* flip */
|
||
|
|
|
||
|
|
/* pull */
|
||
|
|
|
||
|
|
/* unfold */
|
||
|
|
|
||
|
|
@-webkit-keyframes flipInLeft {
|
||
|
|
from {
|
||
|
|
-webkit-transform: translateZ(-1000px) rotateY(-90deg);
|
||
|
|
opacity: .2;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@-moz-keyframes flipInLeft {
|
||
|
|
from {
|
||
|
|
-moz-transform: translateZ(-1000px) rotateY(-90deg);
|
||
|
|
opacity: .2;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes flipInLeft {
|
||
|
|
from {
|
||
|
|
transform: translateZ(-1000px) rotateY(-90deg);
|
||
|
|
opacity: .2;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@-webkit-keyframes flipInRight {
|
||
|
|
from {
|
||
|
|
-webkit-transform: translateZ(-1000px) rotateY(90deg);
|
||
|
|
opacity: .2;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@-moz-keyframes flipInRight {
|
||
|
|
from {
|
||
|
|
-moz-transform: translateZ(-1000px) rotateY(90deg);
|
||
|
|
opacity: .2;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes flipInRight {
|
||
|
|
from {
|
||
|
|
transform: translateZ(-1000px) rotateY(90deg);
|
||
|
|
opacity: .2;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@-webkit-keyframes flipInBottom {
|
||
|
|
from {
|
||
|
|
-webkit-transform: translateZ(-1000px) rotateX(-90deg);
|
||
|
|
opacity: .2;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@-moz-keyframes flipInBottom {
|
||
|
|
from {
|
||
|
|
-moz-transform: translateZ(-1000px) rotateX(-90deg);
|
||
|
|
opacity: .2;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes flipInBottom {
|
||
|
|
from {
|
||
|
|
transform: translateZ(-1000px) rotateX(-90deg);
|
||
|
|
opacity: .2;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@-webkit-keyframes flipInTop {
|
||
|
|
from {
|
||
|
|
-webkit-transform: translateZ(-1000px) rotateX(90deg);
|
||
|
|
opacity: .2;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@-moz-keyframes flipInTop {
|
||
|
|
from {
|
||
|
|
-moz-transform: translateZ(-1000px) rotateX(90deg);
|
||
|
|
opacity: .2;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes flipInTop {
|
||
|
|
from {
|
||
|
|
transform: translateZ(-1000px) rotateX(90deg);
|
||
|
|
opacity: .2;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* pull */
|
||
|
|
|
||
|
|
@-webkit-keyframes rotatePullRight {
|
||
|
|
from {
|
||
|
|
-webkit-transform: rotateY(-90deg);
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@-moz-keyframes rotatePullRight {
|
||
|
|
from {
|
||
|
|
-moz-transform: rotateY(-90deg);
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes rotatePullRight {
|
||
|
|
from {
|
||
|
|
transform: rotateY(-90deg);
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@-webkit-keyframes rotatePullLeft {
|
||
|
|
from {
|
||
|
|
-webkit-transform: rotateY(90deg);
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@-moz-keyframes rotatePullLeft {
|
||
|
|
from {
|
||
|
|
-moz-transform: rotateY(90deg);
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes rotatePullLeft {
|
||
|
|
from {
|
||
|
|
transform: rotateY(90deg);
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@-webkit-keyframes rotatePullTop {
|
||
|
|
from {
|
||
|
|
-webkit-transform: rotateX(-90deg);
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@-moz-keyframes rotatePullTop {
|
||
|
|
from {
|
||
|
|
-moz-transform: rotateX(-90deg);
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes rotatePullTop {
|
||
|
|
from {
|
||
|
|
transform: rotateX(-90deg);
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@-webkit-keyframes rotatePullBottom {
|
||
|
|
from {
|
||
|
|
-webkit-transform: rotateX(90deg);
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@-moz-keyframes rotatePullBottom {
|
||
|
|
from {
|
||
|
|
-moz-transform: rotateX(90deg);
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes rotatePullBottom {
|
||
|
|
from {
|
||
|
|
transform: rotateX(90deg);
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* unfold */
|
||
|
|
|
||
|
|
@-webkit-keyframes rotateUnfoldLeft {
|
||
|
|
from {
|
||
|
|
-webkit-transform: translateX(-100%) rotateY(-90deg);
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@-moz-keyframes rotateUnfoldLeft {
|
||
|
|
from {
|
||
|
|
-moz-transform: translateX(-100%) rotateY(-90deg);
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes rotateUnfoldLeft {
|
||
|
|
from {
|
||
|
|
transform: translateX(-100%) rotateY(-90deg);
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@-webkit-keyframes rotateUnfoldRight {
|
||
|
|
from {
|
||
|
|
-webkit-transform: translateX(100%) rotateY(90deg);
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@-moz-keyframes rotateUnfoldRight {
|
||
|
|
from {
|
||
|
|
-moz-transform: translateX(100%) rotateY(90deg);
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes rotateUnfoldRight {
|
||
|
|
from {
|
||
|
|
transform: translateX(100%) rotateY(90deg);
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@-webkit-keyframes rotateUnfoldTop {
|
||
|
|
from {
|
||
|
|
-webkit-transform: translateY(-100%) rotateX(90deg);
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@-moz-keyframes rotateUnfoldTop {
|
||
|
|
from {
|
||
|
|
-moz-transform: translateY(-100%) rotateX(90deg);
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes rotateUnfoldTop {
|
||
|
|
from {
|
||
|
|
transform: translateY(-100%) rotateX(90deg);
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@-webkit-keyframes rotateUnfoldBottom {
|
||
|
|
from {
|
||
|
|
-webkit-transform: translateY(100%) rotateX(-90deg);
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@-moz-keyframes rotateUnfoldBottom {
|
||
|
|
from {
|
||
|
|
-moz-transform: translateY(100%) rotateX(-90deg);
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes rotateUnfoldBottom {
|
||
|
|
from {
|
||
|
|
transform: translateY(100%) rotateX(-90deg);
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* animation delay classes */
|
||
|
|
|
||
|
|
/* Paddings */
|
||
|
|
|
||
|
|
/* Remove paddings */
|
||
|
|
|
||
|
|
/* Margins */
|
||
|
|
|
||
|
|
/* Remove margins */
|
||
|
|
|
||
|
|
/* Headings */
|
||
|
|
|
||
|
|
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6 {
|
||
|
|
font-weight: 500;
|
||
|
|
margin: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
h1,.h1 {
|
||
|
|
font-size: 38px;
|
||
|
|
}
|
||
|
|
|
||
|
|
h2,.h2 {
|
||
|
|
font-size: 26px;
|
||
|
|
}
|
||
|
|
|
||
|
|
h3,.h3 {
|
||
|
|
font-size: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
h4,.h4 {
|
||
|
|
font-size: 16px;
|
||
|
|
}
|
||
|
|
|
||
|
|
h5,.h5 {
|
||
|
|
font-size: 14px;
|
||
|
|
}
|
||
|
|
|
||
|
|
h6,.h6 {
|
||
|
|
font-size: 12px;
|
||
|
|
}
|
||
|
|
|
||
|
|
p {
|
||
|
|
line-height: 1.6em;
|
||
|
|
margin: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Titles */
|
||
|
|
|
||
|
|
/* Jumbotron */
|
||
|
|
|
||
|
|
/* Floats */
|
||
|
|
|
||
|
|
/* Font Size */
|
||
|
|
|
||
|
|
.font-size-10 {
|
||
|
|
font-size: 10px !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.font-size-11 {
|
||
|
|
font-size: 11px !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.font-size-12 {
|
||
|
|
font-size: 12px !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.font-size-13 {
|
||
|
|
font-size: 13px !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.font-size-14 {
|
||
|
|
font-size: 14px !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.font-size-15 {
|
||
|
|
font-size: 15px !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.font-size-16 {
|
||
|
|
font-size: 16px !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.font-size-17 {
|
||
|
|
font-size: 17px !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.font-size-18 {
|
||
|
|
font-size: 18px !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.font-size-20 {
|
||
|
|
font-size: 20px !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.font-size-23 {
|
||
|
|
font-size: 23px !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.font-size-26 {
|
||
|
|
font-size: 26px !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.font-size-28 {
|
||
|
|
font-size: 28px !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.font-size-35 {
|
||
|
|
font-size: 35px !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.font-size-50 {
|
||
|
|
font-size: 50px !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Text */
|
||
|
|
|
||
|
|
.text-center {
|
||
|
|
text-align: center !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Text Transform */
|
||
|
|
|
||
|
|
/* Font Weight */
|
||
|
|
|
||
|
|
/* Font Style */
|
||
|
|
|
||
|
|
/* Other */
|
||
|
|
|
||
|
|
.center-margin {
|
||
|
|
float: none !important;
|
||
|
|
margin: 0 auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
.center-div {
|
||
|
|
float: none !important;
|
||
|
|
margin-right: auto !important;
|
||
|
|
margin-left: auto !important;
|
||
|
|
text-align: center !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Sortable placehoder */
|
||
|
|
|
||
|
|
/* Disabled */
|
||
|
|
|
||
|
|
/* Paddings */
|
||
|
|
|
||
|
|
/* Icons */
|
||
|
|
|
||
|
|
/* Resets */
|
||
|
|
|
||
|
|
a {
|
||
|
|
-webkit-transition: all .1s ease-in-out;
|
||
|
|
-moz-transition: all .1s ease-in-out;
|
||
|
|
-ms-transition: all .1s ease-in-out;
|
||
|
|
-o-transition: all .1s ease-in-out;
|
||
|
|
}
|
||
|
|
|
||
|
|
/*.open > .dropdown-menu,.dropdown-sidebar-submenu:hover > .dropdown-menu {
|
||
|
|
-webkit-animation-name: zoomIn;
|
||
|
|
-moz-animation-name: zoomIn;
|
||
|
|
-o-animation-name: zoomIn;
|
||
|
|
animation-name: zoomIn;
|
||
|
|
}
|
||
|
|
.open > .dropdown-menu,.dropdown-sidebar-submenu:hover > .dropdown-menu {
|
||
|
|
-webkit-animation-duration: .4s;
|
||
|
|
-moz-animation-duration: .4s;
|
||
|
|
-o-animation-duration: .4s;
|
||
|
|
animation-duration: .4s;
|
||
|
|
-webkit-animation-fill-mode: both;
|
||
|
|
-moz-animation-fill-mode: both;
|
||
|
|
-o-animation-fill-mode: both;
|
||
|
|
animation-fill-mode: both;
|
||
|
|
}
|
||
|
|
*/
|
||
|
|
|
||
|
|
/* Demo */
|
||
|
|
|
||
|
|
/* Font Colors */
|
||
|
|
|
||
|
|
/* Other Background Colors */
|
||
|
|
|
||
|
|
/* Social buttons */
|
||
|
|
|
||
|
|
/* Background Colors */
|
||
|
|
|
||
|
|
/* Blue */
|
||
|
|
|
||
|
|
/* Red */
|
||
|
|
|
||
|
|
/* Gray */
|
||
|
|
|
||
|
|
/* Gray Alt */
|
||
|
|
|
||
|
|
/* Black */
|
||
|
|
|
||
|
|
/* Black Opacity */
|
||
|
|
|
||
|
|
/* Black Opacity Alt */
|
||
|
|
|
||
|
|
/* Green */
|
||
|
|
|
||
|
|
/* Orange */
|
||
|
|
|
||
|
|
/* White */
|
||
|
|
|
||
|
|
/* White Transparent */
|
||
|
|
|
||
|
|
/* Yellow */
|
||
|
|
|
||
|
|
/* Purple */
|
||
|
|
|
||
|
|
/* Blue Alt */
|
||
|
|
|
||
|
|
/* Azure */
|
||
|
|
|
||
|
|
/* Border Colors */
|
||
|
|
|
||
|
|
/* Box Shadow Colors */
|
||
|
|
|
||
|
|
/*! ========================================================================
|
||
|
|
* Bootstrap Toggle: bootstrap-toggle.css v2.2.0
|
||
|
|
* http://www.bootstraptoggle.com
|
||
|
|
* ========================================================================
|
||
|
|
* Copyright 2014 Min Hur, The New York Times Company
|
||
|
|
* Licensed under MIT
|
||
|
|
* ======================================================================== */
|