.x-animated {
-webkit-animation-duration: 500ms;
-moz-animation-duration: 500ms;
animation-duration: 500ms;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
animation-fill-mode: both;
transform: none;
}
.x-slideInUp {
-webkit-animation-duration: 750ms;
-moz-animation-duration: 750ms;
animation-duration: 750ms;
}
.x-slideInUp-out {
-webkit-animation-duration: 300ms;
-moz-animation-duration: 300ms;
animation-duration: 300ms;
} @-webkit-keyframes x-fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@-moz-keyframes x-fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes x-fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.x-fadeIn {
-webkit-animation-name: x-fadeIn;
-moz-animation-name: x-fadeIn;
animation-name: x-fadeIn;
} @-webkit-keyframes x-fadeIn-out {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
@-moz-keyframes x-fadeIn-out {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
@keyframes x-fadeIn-out {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
.x-fadeIn-out {
-webkit-animation-name: x-fadeIn-out;
-moz-animation-name: x-fadeIn-out;
animation-name: x-fadeIn-out;
} @-webkit-keyframes x-fadeInUp {
from {
opacity: 0;
-webkit-transform: translate3d(0, 50px, 0);
}
to {
opacity: 1;
-webkit-transform: none;
}
}
@-moz-keyframes x-fadeInUp {
from {
opacity: 0;
-moz-transform: translate3d(0, 50px, 0);
}
to {
opacity: 1;
-moz-transform: none;
}
}
@keyframes x-fadeInUp {
from {
opacity: 0;
-webkit-transform: translate3d(0, 50px, 0);
-moz-transform: translate3d(0, 50px, 0);
-ms-transform: translate3d(0, 50px, 0);
-o-transform: translate3d(0, 50px, 0);
transform: translate3d(0, 50px, 0);
}
to {
opacity: 1;
-webkit-transform: none;
-moz-transform: none;
-ms-transform: none;
-o-transform: none;
transform: none;
}
}
.x-fadeInUp {
-webkit-animation-name: x-fadeInUp;
-moz-animation-name: x-fadeInUp;
animation-name: x-fadeInUp;
} @-webkit-keyframes x-fadeInUp-out {
from {
opacity: 1;
-webkit-transform: none;
}
to {
opacity: 0;
-webkit-transform: translate3d(0, 50px, 0);
}
}
@-moz-keyframes x-fadeInUp-out {
from {
opacity: 1;
-moz-transform: none;
}
to {
opacity: 0;
-moz-transform: translate3d(0, 50px, 0);
}
}
@keyframes x-fadeInUp-out {
from {
opacity: 1;
-webkit-transform: none;
-moz-transform: none;
-ms-transform: none;
-o-transform: none;
transform: none;
}
to {
opacity: 0;
-webkit-transform: translate3d(0, 50px, 0);
-moz-transform: translate3d(0, 50px, 0);
-ms-transform: translate3d(0, 50px, 0);
-o-transform: translate3d(0, 50px, 0);
transform: translate3d(0, 50px, 0);
}
}
.x-fadeInUp-out {
-webkit-animation-name: x-fadeInUp-out;
-moz-animation-name: x-fadeInUp-out;
animation-name: x-fadeInUp-out;
} @-webkit-keyframes x-fadeInDown {
from {
opacity: 0;
-webkit-transform: translate3d(0, -50px, 0);
}
to {
opacity: 1;
-webkit-transform: none;
}
}
@-moz-keyframes x-fadeInDown {
from {
opacity: 0;
-moz-transform: translate3d(0, -50px, 0);
}
to {
opacity: 1;
-moz-transform: none;
}
}
@keyframes x-fadeInDown {
from {
opacity: 0;
-webkit-transform: translate3d(0, -50px, 0);
-moz-transform: translate3d(0, -50px, 0);
-ms-transform: translate3d(0, -50px, 0);
-o-transform: translate3d(0, -50px, 0);
transform: translate3d(0, -50px, 0);
}
to {
opacity: 1;
-webkit-transform: none;
-moz-transform: none;
-ms-transform: none;
-o-transform: none;
transform: none;
}
}
.x-fadeInDown {
-webkit-animation-name: x-fadeInDown;
-moz-animation-name: x-fadeInDown;
animation-name: x-fadeInDown;
} @-webkit-keyframes x-fadeInDown-out {
from {
opacity: 1;
-webkit-transform: none;
}
to {
opacity: 0;
-webkit-transform: translate3d(0, -50px, 0);
}
}
@-moz-keyframes x-fadeInDown-out {
from {
opacity: 1;
-moz-transform: none;
}
to {
opacity: 0;
-moz-transform: translate3d(0, -50px, 0);
}
}
@keyframes x-fadeInDown-out {
from {
opacity: 1;
-webkit-transform: none;
-moz-transform: none;
-ms-transform: none;
-o-transform: none;
transform: none;
}
to {
opacity: 0;
-webkit-transform: translate3d(0, -50px, 0);
-moz-transform: translate3d(0, -50px, 0);
-ms-transform: translate3d(0, -50px, 0);
-o-transform: translate3d(0, -50px, 0);
transform: translate3d(0, -50px, 0);
}
}
.x-fadeInDown-out {
-webkit-animation-name: x-fadeInDown-out;
-moz-animation-name: x-fadeInDown-out;
animation-name: x-fadeInDown-out;
} @-webkit-keyframes x-fadeInLeft {
from {
opacity: 0;
-webkit-transform: translate3d(-50px, 0, 0);
}
to {
opacity: 1;
-webkit-transform: none;
}
}
@-moz-keyframes x-fadeInLeft {
from {
opacity: 0;
-moz-transform: translate3d(-50px, 0, 0);
}
to {
opacity: 1;
-moz-transform: none;
}
}
@keyframes x-fadeInLeft {
from {
opacity: 0;
-webkit-transform: translate3d(-50px, 0, 0);
-moz-transform: translate3d(-50px, 0, 0);
-ms-transform: translate3d(-50px, 0, 0);
-o-transform: translate3d(-50px, 0, 0);
transform: translate3d(-50px, 0, 0);
}
to {
opacity: 1;
-webkit-transform: none;
-moz-transform: none;
-ms-transform: none;
-o-transform: none;
transform: none;
}
}
.x-fadeInLeft {
-webkit-animation-name: x-fadeInLeft;
-moz-animation-name: x-fadeInLeft;
animation-name: x-fadeInLeft;
} @-webkit-keyframes x-fadeInLeft-out {
from {
opacity: 1;
-webkit-transform: none;
}
to {
opacity: 0;
-webkit-transform: translate3d(-50px, 0, 0);
}
}
@-moz-keyframes x-fadeInLeft-out {
from {
opacity: 1;
-moz-transform: none;
}
to {
opacity: 0;
-moz-transform: translate3d(-50px, 0, 0);
}
}
@keyframes x-fadeInLeft-out {
from {
opacity: 1;
-webkit-transform: none;
-moz-transform: none;
-ms-transform: none;
-o-transform: none;
transform: none;
}
to {
opacity: 0;
-webkit-transform: translate3d(-50px, 0, 0);
-moz-transform: translate3d(-50px, 0, 0);
-ms-transform: translate3d(-50px, 0, 0);
-o-transform: translate3d(-50px, 0, 0);
transform: translate3d(-50px, 0, 0);
}
}
.x-fadeInLeft-out {
-webkit-animation-name: x-fadeInLeft-out;
-moz-animation-name: x-fadeInLeft-out;
animation-name: x-fadeInLeft-out;
} @-webkit-keyframes x-fadeInRight {
from {
opacity: 0;
-webkit-transform: translate3d(50px, 0, 0);
}
to {
opacity: 1;
-webkit-transform: none;
}
}
@-moz-keyframes x-fadeInRight {
from {
opacity: 0;
-moz-transform: translate3d(50px, 0, 0);
}
to {
opacity: 1;
-moz-transform: none;
}
}
@keyframes x-fadeInRight {
from {
opacity: 0;
-webkit-transform: translate3d(50px, 0, 0);
-moz-transform: translate3d(50px, 0, 0);
-ms-transform: translate3d(50px, 0, 0);
-o-transform: translate3d(50px, 0, 0);
transform: translate3d(50px, 0, 0);
}
to {
opacity: 1;
-webkit-transform: none;
-moz-transform: none;
-ms-transform: none;
-o-transform: none;
transform: none;
}
}
.x-fadeInRight {
-webkit-animation-name: x-fadeInRight;
-moz-animation-name: x-fadeInRight;
animation-name: x-fadeInRight;
} @-webkit-keyframes x-fadeInRight-out {
from {
opacity: 1;
-webkit-transform: none;
}
to {
opacity: 0;
-webkit-transform: translate3d(50px, 0, 0);
}
}
@-moz-keyframes x-fadeInRight-out {
from {
opacity: 1;
-moz-transform: none;
}
to {
opacity: 0;
-moz-transform: translate3d(50px, 0, 0);
}
}
@keyframes x-fadeInRight-out {
from {
opacity: 1;
-webkit-transform: none;
-moz-transform: none;
-ms-transform: none;
-o-transform: none;
transform: none;
}
to {
opacity: 0;
-webkit-transform: translate3d(50px, 0, 0);
-moz-transform: translate3d(50px, 0, 0);
-ms-transform: translate3d(50px, 0, 0);
-o-transform: translate3d(50px, 0, 0);
transform: translate3d(50px, 0, 0);
}
}
.x-fadeInRight-out {
-webkit-animation-name: x-fadeInRight-out;
-moz-animation-name: x-fadeInRight-out;
animation-name: x-fadeInRight-out;
} @-webkit-keyframes x-flipInX {
from {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -90deg);
}
to {
-webkit-transform: perspective(400px) rotate3d(0, 0, 0, 0deg);
}
}
@-moz-keyframes x-flipInX {
from {
-moz-transform: perspective(400px) rotate3d(1, 0, 0, -90deg);
}
to {
-moz-transform: perspective(400px) rotate3d(0, 0, 0, 0deg);
}
}
@keyframes x-flipInX {
from {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -90deg);
-moz-transform: perspective(400px) rotate3d(1, 0, 0, -90deg);
-ms-transform: perspective(400px) rotate3d(1, 0, 0, -90deg);
-o-transform: perspective(400px) rotate3d(1, 0, 0, -90deg);
transform: perspective(400px) rotate3d(1, 0, 0, -90deg);
}
to {
-webkit-transform: perspective(400px) rotate3d(0, 0, 0, 0deg);
-moz-transform: perspective(400px) rotate3d(0, 0, 0, 0deg);
-ms-transform: perspective(400px) rotate3d(0, 0, 0, 0deg);
-o-transform: perspective(400px) rotate3d(0, 0, 0, 0deg);
transform: perspective(400px) rotate3d(0, 0, 0, 0deg);
}
}
.x-flipInX {
-webkit-backface-visibility: visible !important;
backface-visibility: visible !important;
-webkit-animation-name: x-flipInX;
-moz-animation-name: x-flipInX;
animation-name: x-flipInX;
-webkit-transform-origin: 50% 0;
-moz-transform-origin: 50% 0;
-ms-transform-origin: 50% 0;
-o-transform-origin: 50% 0;
transform-origin: 50% 0;
} @-webkit-keyframes x-flipInX-out {
from {
-webkit-transform: perspective(400px) rotate3d(0, 0, 0, 0deg);
}
to {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -90deg);
}
}
@-moz-keyframes x-flipInX-out {
from {
-moz-transform: perspective(400px) rotate3d(0, 0, 0, 0deg);
}
to {
-moz-transform: perspective(400px) rotate3d(1, 0, 0, -90deg);
}
}
@keyframes x-flipInX-out {
from {
-webkit-transform: perspective(400px) rotate3d(0, 0, 0, 0deg);
-moz-transform: perspective(400px) rotate3d(0, 0, 0, 0deg);
-ms-transform: perspective(400px) rotate3d(0, 0, 0, 0deg);
-o-transform: perspective(400px) rotate3d(0, 0, 0, 0deg);
transform: perspective(400px) rotate3d(0, 0, 0, 0deg);
}
to {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -90deg);
-moz-transform: perspective(400px) rotate3d(1, 0, 0, -90deg);
-ms-transform: perspective(400px) rotate3d(1, 0, 0, -90deg);
-o-transform: perspective(400px) rotate3d(1, 0, 0, -90deg);
transform: perspective(400px) rotate3d(1, 0, 0, -90deg);
}
}
.x-flipInX-out {
-webkit-backface-visibility: visible !important;
backface-visibility: visible !important;
-webkit-animation-name: x-flipInX-out;
-moz-animation-name: x-flipInX-out;
animation-name: x-flipInX-out;
-webkit-transform-origin: 50% 0;
-moz-transform-origin: 50% 0;
-ms-transform-origin: 50% 0;
-o-transform-origin: 50% 0;
transform-origin: 50% 0;
} @-webkit-keyframes x-slideInUp {
from {
-webkit-transform: perspective(0) rotate3d(1, 0, 0, -90deg);
}
to {
-webkit-transform: perspective(0) rotate3d(0, 0, 0, 0deg);
}
}
@-moz-keyframes x-slideInUp {
from {
-moz-transform: perspective(0) rotate3d(1, 0, 0, -90deg);
}
to {
-moz-transform: perspective(0) rotate3d(0, 0, 0, 0deg);
}
}
@keyframes x-slideInUp {
from {
-webkit-transform: perspective(0) rotate3d(1, 0, 0, -90deg);
-moz-transform: perspective(0) rotate3d(1, 0, 0, -90deg);
-ms-transform: perspective(0) rotate3d(1, 0, 0, -90deg);
-o-transform: perspective(0) rotate3d(1, 0, 0, -90deg);
transform: perspective(0) rotate3d(1, 0, 0, -90deg);
}
to {
-webkit-transform: perspective(0) rotate3d(0, 0, 0, 0deg);
-moz-transform: perspective(0) rotate3d(0, 0, 0, 0deg);
-ms-transform: perspective(0) rotate3d(0, 0, 0, 0deg);
-o-transform: perspective(0) rotate3d(0, 0, 0, 0deg);
transform: perspective(0) rotate3d(0, 0, 0, 0deg);
}
}
.x-slideInUp {
-webkit-backface-visibility: visible !important;
backface-visibility: visible !important;
-webkit-animation-name: x-slideInUp;
-moz-animation-name: x-slideInUp;
animation-name: x-slideInUp;
-webkit-transform-origin: 50% 0;
-moz-transform-origin: 50% 0;
-ms-transform-origin: 50% 0;
-o-transform-origin: 50% 0;
transform-origin: 50% 0;
} @-webkit-keyframes x-slideInUp-out {
from {
-webkit-transform: perspective(0) rotate3d(0, 0, 0, 0deg);
}
to {
-webkit-transform: perspective(0) rotate3d(1, 0, 0, -90deg);
}
}
@-moz-keyframes x-slideInUp-out {
from {
-moz-transform: perspective(0) rotate3d(0, 0, 0, 0deg);
}
to {
-moz-transform: perspective(0) rotate3d(1, 0, 0, -90deg);
}
}
@keyframes x-slideInUp-out {
from {
-webkit-transform: perspective(0) rotate3d(0, 0, 0, 0deg);
-moz-transform: perspective(0) rotate3d(0, 0, 0, 0deg);
-ms-transform: perspective(0) rotate3d(0, 0, 0, 0deg);
-o-transform: perspective(0) rotate3d(0, 0, 0, 0deg);
transform: perspective(0) rotate3d(0, 0, 0, 0deg);
}
to {
-webkit-transform: perspective(0) rotate3d(1, 0, 0, -90deg);
-moz-transform: perspective(0) rotate3d(1, 0, 0, -90deg);
-ms-transform: perspective(0) rotate3d(1, 0, 0, -90deg);
-o-transform: perspective(0) rotate3d(1, 0, 0, -90deg);
transform: perspective(0) rotate3d(1, 0, 0, -90deg);
}
}
.x-slideInUp-out {
-webkit-backface-visibility: visible !important;
backface-visibility: visible !important;
-webkit-animation-name: x-slideInUp-out;
-moz-animation-name: x-slideInUp-out;
animation-name: x-slideInUp-out;
-webkit-transform-origin: 50% 0;
-moz-transform-origin: 50% 0;
-ms-transform-origin: 50% 0;
-o-transform-origin: 50% 0;
transform-origin: 50% 0;
}