.slide {
-webkit-transition: all .25s ease-in-out;
-moz-transition: all .25s ease-in-out;
-o-transition: all .25s ease-in-out;
transition: all .25s ease-in-out;
}
.slide--reset {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
.slide--up {
-webkit-transform: translateY(-100%);
-ms-transform: translateY(-100%);
transform: translateY(-100%);
}
.animated {
-webkit-animation-duration: .5s;
-moz-animation-duration: .5s;
-o-animation-duration: .5s;
animation-duration: .5s;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
}
@-webkit-keyframes slideDown {
0% {
-webkit-transform: translateY(-100%)
}
100% {
-webkit-transform: translateY(0)
}
}
@-moz-keyframes slideDown {
0% {
-moz-transform: translateY(-100%)
}
100% {
-moz-transform: translateY(0)
}
}
@-o-keyframes slideDown {
0% {
-o-transform: translateY(-100%)
}
100% {
-o-transform: translateY(0)
}
}
@keyframes slideDown {
0% {
transform: translateY(-100%)
}
100% {
transform: translateY(0)
}
}
.animated.slideDown {
-webkit-animation-name: slideDown;
-moz-animation-name: slideDown;
-o-animation-name: slideDown;
animation-name: slideDown;
}
@-webkit-keyframes slideUp {
0% {
-webkit-transform: translateY(0)
}
100% {
-webkit-transform: translateY(-100%)
}
}
@-moz-keyframes slideUp {
0% {
-moz-transform: translateY(0)
}
100% {
-moz-transform: translateY(-100%)
}
}
@-o-keyframes slideUp {
0% {
-o-transform: translateY(0)
}
100% {
-o-transform: translateY(-100%)
}
}
@keyframes slideUp {
0% {
transform: translateY(0)
}
100% {
transform: translateY(-100%)
}
}
.animated.slideUp {
-webkit-animation-name: slideUp;
-moz-animation-name: slideUp;
-o-animation-name: slideUp;
animation-name: slideUp;
}
@-webkit-keyframes swingInX {
0% {
-webkit-transform: perspective(400px) rotateX(-90deg)
}
100% {
-webkit-transform: perspective(400px) rotateX(0deg)
}
}
@-moz-keyframes swingInX {
0% {
-moz-transform: perspective(400px) rotateX(-90deg)
}
100% {
-moz-transform: perspective(400px) rotateX(0deg)
}
}
@-o-keyframes swingInX {
0% {
-o-transform: perspective(400px) rotateX(-90deg)
}
100% {
-o-transform: perspective(400px) rotateX(0deg)
}
}
@keyframes swingInX {
0% {
transform: perspective(400px) rotateX(-90deg)
}
100% {
transform: perspective(400px) rotateX(0deg)
}
}
.animated.swingInX {
-webkit-transform-origin: top;
-moz-transform-origin: top;
-ie-transform-origin: top;
-o-transform-origin: top;
transform-origin: top;
-webkit-backface-visibility: visible !important;
-webkit-animation-name: swingInX;
-moz-backface-visibility: visible !important;
-moz-animation-name: swingInX;
-o-backface-visibility: visible !important;
-o-animation-name: swingInX;
backface-visibility: visible !important;
animation-name: swingInX;
}
@-webkit-keyframes swingOutX {
0% {
-webkit-transform: perspective(400px) rotateX(0deg)
}
100% {
-webkit-transform: perspective(400px) rotateX(-90deg)
}
}
@-moz-keyframes swingOutX {
0% {
-moz-transform: perspective(400px) rotateX(0deg)
}
100% {
-moz-transform: perspective(400px) rotateX(-90deg)
}
}
@-o-keyframes swingOutX {
0% {
-o-transform: perspective(400px) rotateX(0deg)
}
100% {
-o-transform: perspective(400px) rotateX(-90deg)
}
}
@keyframes swingOutX {
0% {
transform: perspective(400px) rotateX(0deg)
}
100% {
transform: perspective(400px) rotateX(-90deg)
}
}
.animated.swingOutX {
-webkit-transform-origin: top;
-webkit-animation-name: swingOutX;
-webkit-backface-visibility: visible !important;
-moz-animation-name: swingOutX;
-moz-backface-visibility: visible !important;
-o-animation-name: swingOutX;
-o-backface-visibility: visible !important;
animation-name: swingOutX;
backface-visibility: visible !important
}
@-webkit-keyframes flipInX {
0% {
-webkit-transform: perspective(400px) rotateX(90deg);
opacity: 0
}
100% {
-webkit-transform: perspective(400px) rotateX(0deg);
opacity: 1
}
}
@-moz-keyframes flipInX {
0% {
-moz-transform: perspective(400px) rotateX(90deg);
opacity: 0
}
100% {
-moz-transform: perspective(400px) rotateX(0deg);
opacity: 1
}
}
@-o-keyframes flipInX {
0% {
-o-transform: perspective(400px) rotateX(90deg);
opacity: 0
}
100% {
-o-transform: perspective(400px) rotateX(0deg);
opacity: 1
}
}
@keyframes flipInX {
0% {
transform: perspective(400px) rotateX(90deg);
opacity: 0
}
100% {
transform: perspective(400px) rotateX(0deg);
opacity: 1
}
}
.animated.flipInX {
-webkit-backface-visibility: visible !important;
-webkit-animation-name: flipInX;
-moz-backface-visibility: visible !important;
-moz-animation-name: flipInX;
-o-backface-visibility: visible !important;
-o-animation-name: flipInX;
backface-visibility: visible !important;
animation-name: flipInX;
}
@-webkit-keyframes flipOutX {
0% {
-webkit-transform: perspective(400px) rotateX(0deg);
opacity: 1
}
100% {
-webkit-transform: perspective(400px) rotateX(90deg);
opacity: 0
}
}
@-moz-keyframes flipOutX {
0% {
-moz-transform: perspective(400px) rotateX(0deg);
opacity: 1
}
100% {
-moz-transform: perspective(400px) rotateX(90deg);
opacity: 0
}
}
@-o-keyframes flipOutX {
0% {
-o-transform: perspective(400px) rotateX(0deg);
opacity: 1
}
100% {
-o-transform: perspective(400px) rotateX(90deg);
opacity: 0
}
}
@keyframes flipOutX {
0% {
transform: perspective(400px) rotateX(0deg);
opacity: 1
}
100% {
transform: perspective(400px) rotateX(90deg);
opacity: 0
}
}
.animated.flipOutX {
-webkit-animation-name: flipOutX;
-webkit-backface-visibility: visible !important;
-moz-animation-name: flipOutX;
-moz-backface-visibility: visible !important;
-o-animation-name: flipOutX;
-o-backface-visibility: visible !important;
animation-name: flipOutX;
backface-visibility: visible !important;
}
@-webkit-keyframes bounceInDown {
0% {
opacity: 0;
-webkit-transform: translateY(-200px)
}
60% {
opacity: 1;
-webkit-transform: translateY(30px)
}
80% {
-webkit-transform: translateY(-10px)
}
100% {
-webkit-transform: translateY(0)
}
}
@-moz-keyframes bounceInDown {
0% {
opacity: 0;
-moz-transform: translateY(-200px)
}
60% {
opacity: 1;
-moz-transform: translateY(30px)
}
80% {
-moz-transform: translateY(-10px)
}
100% {
-moz-transform: translateY(0)
}
}
@-o-keyframes bounceInDown {
0% {
opacity: 0;
-o-transform: translateY(-200px)
}
60% {
opacity: 1;
-o-transform: translateY(30px)
}
80% {
-o-transform: translateY(-10px)
}
100% {
-o-transform: translateY(0)
}
}
@keyframes bounceInDown {
0% {
opacity: 0;
transform: translateY(-200px)
}
60% {
opacity: 1;
transform: translateY(30px)
}
80% {
transform: translateY(-10px)
}
100% {
transform: translateY(0)
}
}
.animated.bounceInDown {
-webkit-animation-name: bounceInDown;
-moz-animation-name: bounceInDown;
-o-animation-name: bounceInDown;
animation-name: bounceInDown;
}
@-webkit-keyframes bounceOutUp {
0% {
-webkit-transform: translateY(0)
}
30% {
opacity: 1;
-webkit-transform: translateY(20px)
}
100% {
opacity: 0;
-webkit-transform: translateY(-200px)
}
}
@-moz-keyframes bounceOutUp {
0% {
-moz-transform: translateY(0)
}
30% {
opacity: 1;
-moz-transform: translateY(20px)
}
100% {
opacity: 0;
-moz-transform: translateY(-200px)
}
}
@-o-keyframes bounceOutUp {
0% {
-o-transform: translateY(0)
}
30% {
opacity: 1;
-o-transform: translateY(20px)
}
100% {
opacity: 0;
-o-transform: translateY(-200px)
}
}
@keyframes bounceOutUp {
0% {
transform: translateY(0)
}
30% {
opacity: 1;
transform: translateY(20px)
}
100% {
opacity: 0;
transform: translateY(-200px)
}
}
.animated.bounceOutUp {
-webkit-animation-name: bounceOutUp;
-moz-animation-name: bounceOutUp;
-o-animation-name: bounceOutUp;
animation-name: bounceOutUp;
}