.animated {
animation-duration : 1s;
animation-fill-mode : both;
}
.animated.infinite {
animation-iteration-count : infinite;
}
.animated.hinge {
animation-duration : 2s;
}
@keyframes bounce {
0%, 20%, 53%, 80%, 100% {
transition-timing-function : cubic-bezier(0.215,0.610,0.355,1.000);
transform : translate3d(0,0,0);
}
40%, 43% {
transition-timing-function : cubic-bezier(0.755,0.050,0.855,0.060);
transform : translate3d(0,-30px,0);
}
70% {
transition-timing-function : cubic-bezier(0.755,0.050,0.855,0.060);
transform : translate3d(0,-15px,0);
}
90% {
transform : translate3d(0,-4px,0);
}
}
.bounce {
animation-name : bounce;
transform-origin : center bottom;
}
@keyframes flash {
0%, 50%, 100% {
opacity : 1;
}
25%, 75% {
opacity : 0;
}
}
.flash {
animation-name : flash;
}
@keyframes pulse {
0% {
transform : scale3d(1,1,1);
}
50% {
transform : scale3d(1.05,1.05,1.05);
}
100% {
transform : scale3d(1,1,1);
}
}
.pulse {
animation-name : pulse;
}
@keyframes rubberBand {
0% {
transform : scale3d(1,1,1);
}
30% {
transform : scale3d(1.25,0.75,1);
}
40% {
transform : scale3d(0.75,1.25,1);
}
50% {
transform : scale3d(1.15,0.85,1);
}
65% {
transform : scale3d(0.95,1.05,1);
}
75% {
transform : scale3d(1.05,0.95,1);
}
100% {
transform : scale3d(1,1,1);
}
}
.rubberBand {
animation-name : rubberBand;
}
@keyframes shake {
0%, 100% {
transform : translate3d(0,0,0);
}
10%, 30%, 50%, 70%, 90% {
transform : translate3d(-10px,0,0);
}
20%, 40%, 60%, 80% {
transform : translate3d(10px,0,0);
}
}
.shake {
animation-name : shake;
}
@keyframes swing {
20% {
transform : rotate3d(0,0,1,15deg);
}
40% {
transform : rotate3d(0,0,1,-10deg);
}
60% {
transform : rotate3d(0,0,1,5deg);
}
80% {
transform : rotate3d(0,0,1,-5deg);
}
100% {
transform : rotate3d(0,0,1,0deg);
}
}
.swing {
transform-origin : top center;
animation-name : swing;
}
@keyframes tada {
0% {
transform : scale3d(1,1,1);
}
10%, 20% {
transform : scale3d(1,1,1);
}
30%, 50%, 70%, 90% {
transform : scale3d(1,1,1);
}
40%, 60%, 80% {
transform : scale3d(1,1,1);
}
100% {
transform : scale3d(1,1,1);
}
}
.tada {
animation-name : tada;
}
@keyframes wobble {
0% {
transform : none;
}
15% {
transform : none;
}
30% {
transform : none;
}
45% {
transform : none;
}
60% {
transform : none;
}
75% {
transform : none;
}
100% {
transform : none;
}
}
.wobble {
animation-name : wobble;
}
@keyframes bounceIn {
0%, 20%, 40%, 60%, 80%, 100% {
transition-timing-function : cubic-bezier(0.215,0.610,0.355,1.000);
}
0% {
opacity : 0;
transform : scale3d(0.3,0.3,0.3);
}
20% {
transform : scale3d(1.1,1.1,1.1);
}
40% {
transform : scale3d(0.9,0.9,0.9);
}
60% {
opacity : 1;
transform : scale3d(1.03,1.03,1.03);
}
80% {
transform : scale3d(0.97,0.97,0.97);
}
100% {
opacity : 1;
transform : scale3d(1,1,1);
}
}
.bounceIn {
animation-name : bounceIn;
animation-duration : 0.75s;
}
@keyframes bounceInDown {
0%, 60%, 75%, 90%, 100% {
transition-timing-function : cubic-bezier(0.215,0.610,0.355,1.000);
}
0% {
opacity : 0;
transform : translate3d(0,-3000px,0);
}
60% {
opacity : 1;
transform : translate3d(0,25px,0);
}
75% {
transform : translate3d(0,-10px,0);
}
90% {
transform : translate3d(0,5px,0);
}
100% {
transform : none;
}
}
.bounceInDown {
animation-name : bounceInDown;
}
@keyframes bounceInLeft {
0%, 60%, 75%, 90%, 100% {
transition-timing-function : cubic-bezier(0.215,0.610,0.355,1.000);
}
0% {
opacity : 0;
transform : translate3d(-3000px,0,0);
}
60% {
opacity : 1;
transform : translate3d(25px,0,0);
}
75% {
transform : translate3d(-10px,0,0);
}
90% {
transform : translate3d(5px,0,0);
}
100% {
transform : none;
}
}
.bounceInLeft {
animation-name : bounceInLeft;
}
@keyframes bounceInRight {
0%, 60%, 75%, 90%, 100% {
transition-timing-function : cubic-bezier(0.215,0.610,0.355,1.000);
}
0% {
opacity : 0;
transform : translate3d(3000px,0,0);
}
60% {
opacity : 1;
transform : translate3d(-25px,0,0);
}
75% {
transform : translate3d(10px,0,0);
}
90% {
transform : translate3d(-5px,0,0);
}
100% {
transform : none;
}
}
.bounceInRight {
animation-name : bounceInRight;
}
@keyframes bounceInUp {
0%, 60%, 75%, 90%, 100% {
transition-timing-function : cubic-bezier(0.215,0.610,0.355,1.000);
}
0% {
opacity : 0;
transform : translate3d(0,3000px,0);
}
60% {
opacity : 1;
transform : translate3d(0,-20px,0);
}
75% {
transform : translate3d(0,10px,0);
}
90% {
transform : translate3d(0,-5px,0);
}
100% {
transform : translate3d(0,0,0);
}
}
.bounceInUp {
animation-name : bounceInUp;
}
@keyframes bounceOut {
20% {
transform : scale3d(0.9,0.9,0.9);
}
50%, 55% {
opacity : 1;
transform : scale3d(1.1,1.1,1.1);
}
100% {
opacity : 0;
transform : scale3d(0.3,0.3,0.3);
}
}
.bounceOut {
animation-name : bounceOut;
animation-duration : 0.75s;
}
@keyframes bounceOutDown {
20% {
transform : translate3d(0,10px,0);
}
40%, 45% {
opacity : 1;
transform : translate3d(0,-20px,0);
}
100% {
opacity : 0;
transform : translate3d(0,2000px,0);
}
}
.bounceOutDown {
animation-name : bounceOutDown;
}
@keyframes bounceOutLeft {
20% {
opacity : 1;
transform : translate3d(20px,0,0);
}
100% {
opacity : 0;
transform : translate3d(-2000px,0,0);
}
}
.bounceOutLeft {
animation-name : bounceOutLeft;
}
@keyframes bounceOutRight {
20% {
opacity : 1;
transform : translate3d(-20px,0,0);
}
100% {
opacity : 0;
transform : translate3d(2000px,0,0);
}
}
.bounceOutRight {
animation-name : bounceOutRight;
}
@keyframes bounceOutUp {
20% {
transform : translate3d(0,-10px,0);
}
40%, 45% {
opacity : 1;
transform : translate3d(0,20px,0);
}
100% {
opacity : 0;
transform : translate3d(0,-2000px,0);
}
}
.bounceOutUp {
animation-name : bounceOutUp;
}
@keyframes fadeIn {
0% {
opacity : 0;
}
100% {
opacity : 1;
}
}
.fadeIn {
animation-name : fadeIn;
}
@keyframes fadeInDown {
0% {
opacity : 0;
transform : translate3d(0,-100%,0);
}
100% {
opacity : 1;
transform : none;
}
}
.fadeInDown {
animation-name : fadeInDown;
}
@keyframes fadeInDownBig {
0% {
opacity : 0;
transform : translate3d(0,-2000px,0);
}
100% {
opacity : 1;
transform : none;
}
}
.fadeInDownBig {
animation-name : fadeInDownBig;
}
@keyframes fadeInLeft {
0% {
opacity : 0;
transform : translate3d(-100%,0,0);
}
100% {
opacity : 1;
transform : none;
}
}
.fadeInLeft {
animation-name : fadeInLeft;
}
@keyframes fadeInLeftBig {
0% {
opacity : 0;
transform : translate3d(-2000px,0,0);
}
100% {
opacity : 1;
transform : none;
}
}
.fadeInLeftBig {
animation-name : fadeInLeftBig;
}
@keyframes fadeInRight {
0% {
opacity : 0;
transform : translate3d(100%,0,0);
}
100% {
opacity : 1;
transform : none;
}
}
.fadeInRight {
animation-name : fadeInRight;
}
@keyframes fadeInRightBig {
0% {
opacity : 0;
transform : translate3d(2000px,0,0);
}
100% {
opacity : 1;
transform : none;
}
}
.fadeInRightBig {
animation-name : fadeInRightBig;
}
@keyframes fadeInUp {
0% {
opacity : 0;
transform : translate3d(0,100%,0);
}
100% {
opacity : 1;
transform : none;
}
}
.fadeInUp {
animation-name : fadeInUp;
}
@keyframes fadeInUpBig {
0% {
opacity : 0;
transform : translate3d(0,2000px,0);
}
100% {
opacity : 1;
transform : none;
}
}
.fadeInUpBig {
animation-name : fadeInUpBig;
}
@keyframes fadeOut {
0% {
opacity : 1;
}
100% {
opacity : 0;
}
}
.fadeOut {
animation-name : fadeOut;
}
@keyframes fadeOutDown {
0% {
opacity : 1;
}
100% {
opacity : 0;
transform : translate3d(0,100%,0);
}
}
.fadeOutDown {
animation-name : fadeOutDown;
}
@keyframes fadeOutDownBig {
0% {
opacity : 1;
}
100% {
opacity : 0;
transform : translate3d(0,2000px,0);
}
}
.fadeOutDownBig {
animation-name : fadeOutDownBig;
}
@keyframes fadeOutLeft {
0% {
opacity : 1;
}
100% {
opacity : 0;
transform : translate3d(-100%,0,0);
}
}
.fadeOutLeft {
animation-name : fadeOutLeft;
}
@keyframes fadeOutLeftBig {
0% {
opacity : 1;
}
100% {
opacity : 0;
transform : translate3d(-2000px,0,0);
}
}
.fadeOutLeftBig {
animation-name : fadeOutLeftBig;
}
@keyframes fadeOutRight {
0% {
opacity : 1;
}
100% {
opacity : 0;
transform : translate3d(100%,0,0);
}
}
.fadeOutRight {
animation-name : fadeOutRight;
}
@keyframes fadeOutRightBig {
0% {
opacity : 1;
}
100% {
opacity : 0;
transform : translate3d(2000px,0,0);
}
}
.fadeOutRightBig {
animation-name : fadeOutRightBig;
}
@keyframes fadeOutUp {
0% {
opacity : 1;
}
100% {
opacity : 0;
transform : translate3d(0,-100%,0);
}
}
.fadeOutUp {
animation-name : fadeOutUp;
}
@keyframes fadeOutUpBig {
0% {
opacity : 1;
}
100% {
opacity : 0;
transform : translate3d(0,-2000px,0);
}
}
.fadeOutUpBig {
animation-name : fadeOutUpBig;
}
@keyframes flip {
0% {
animation-timing-function : ease-out;
}
40% {
animation-timing-function : ease-out;
}
50% {
animation-timing-function : ease-in;
}
80% {
animation-timing-function : ease-in;
}
100% {
transform : perspective(400px);
animation-timing-function : ease-in;
}
}
.animated.flip {
backface-visibility : visible;
animation-name : flip;
}
@keyframes flipInX {
0% {
transition-timing-function : ease-in;
opacity : 0;
}
40% {
transition-timing-function : ease-in;
}
60% {
opacity : 1;
}
80% {
opacity : 1;
}
100% {
transform : perspective(400px);
}
}
.flipInX {
backface-visibility : visible !important ;
animation-name : flipInX;
}
@keyframes flipInY {
0% {
transition-timing-function : ease-in;
opacity : 0;
}
40% {
transition-timing-function : ease-in;
}
60% {
opacity : 1;
}
80% {
opacity : 1;
}
100% {
transform : perspective(400px);
}
}
.flipInY {
backface-visibility : visible !important ;
animation-name : flipInY;
}
@keyframes flipOutX {
0% {
transform : perspective(400px);
}
30% {
opacity : 1;
}
100% {
opacity : 0;
}
}
.flipOutX {
animation-name : flipOutX;
animation-duration : 0.75s;
backface-visibility : visible !important ;
}
@keyframes flipOutY {
0% {
transform : perspective(400px);
}
30% {
opacity : 1;
}
100% {
opacity : 0;
}
}
.flipOutY {
backface-visibility : visible !important ;
animation-name : flipOutY;
animation-duration : 0.75s;
}
@keyframes lightSpeedIn {
0% {
opacity : 0;
}
60% {
transform : skewX(20deg);
opacity : 1;
}
80% {
transform : skewX(-5deg);
opacity : 1;
}
100% {
transform : none;
opacity : 1;
}
}
.lightSpeedIn {
animation-name : lightSpeedIn;
animation-timing-function : ease-out;
}
@keyframes lightSpeedOut {
0% {
opacity : 1;
}
100% {
opacity : 0;
}
}
.lightSpeedOut {
animation-name : lightSpeedOut;
animation-timing-function : ease-in;
}
@keyframes rotateIn {
0% {
transform-origin : center;
transform : rotate3d(0,0,1,-200deg);
opacity : 0;
}
100% {
transform-origin : center;
transform : none;
opacity : 1;
}
}
.rotateIn {
animation-name : rotateIn;
}
@keyframes rotateInDownLeft {
0% {
transform-origin : left bottom;
transform : rotate3d(0,0,1,-45deg);
opacity : 0;
}
100% {
transform-origin : left bottom;
transform : none;
opacity : 1;
}
}
.rotateInDownLeft {
animation-name : rotateInDownLeft;
}
@keyframes rotateInDownRight {
0% {
transform-origin : right bottom;
transform : rotate3d(0,0,1,45deg);
opacity : 0;
}
100% {
transform-origin : right bottom;
transform : none;
opacity : 1;
}
}
.rotateInDownRight {
animation-name : rotateInDownRight;
}
@keyframes rotateInUpLeft {
0% {
transform-origin : left bottom;
transform : rotate3d(0,0,1,45deg);
opacity : 0;
}
100% {
transform-origin : left bottom;
transform : none;
opacity : 1;
}
}
.rotateInUpLeft {
animation-name : rotateInUpLeft;
}
@keyframes rotateInUpRight {
0% {
transform-origin : right bottom;
transform : rotate3d(0,0,1,-90deg);
opacity : 0;
}
100% {
transform-origin : right bottom;
transform : none;
opacity : 1;
}
}
.rotateInUpRight {
animation-name : rotateInUpRight;
}
@keyframes rotateOut {
0% {
transform-origin : center;
opacity : 1;
}
100% {
transform-origin : center;
transform : rotate3d(0,0,1,200deg);
opacity : 0;
}
}
.rotateOut {
animation-name : rotateOut;
}
@keyframes rotateOutDownLeft {
0% {
transform-origin : left bottom;
opacity : 1;
}
100% {
transform-origin : left bottom;
transform : rotate3d(0,0,1,45deg);
opacity : 0;
}
}
.rotateOutDownLeft {
animation-name : rotateOutDownLeft;
}
@keyframes rotateOutDownRight {
0% {
transform-origin : right bottom;
opacity : 1;
}
100% {
transform-origin : right bottom;
transform : rotate3d(0,0,1,-45deg);
opacity : 0;
}
}
.rotateOutDownRight {
animation-name : rotateOutDownRight;
}
@keyframes rotateOutUpLeft {
0% {
transform-origin : left bottom;
opacity : 1;
}
100% {
transform-origin : left bottom;
transform : rotate3d(0,0,1,-45deg);
opacity : 0;
}
}
.rotateOutUpLeft {
animation-name : rotateOutUpLeft;
}
@keyframes rotateOutUpRight {
0% {
transform-origin : right bottom;
opacity : 1;
}
100% {
transform-origin : right bottom;
transform : rotate3d(0,0,1,90deg);
opacity : 0;
}
}
.rotateOutUpRight {
animation-name : rotateOutUpRight;
}
@keyframes hinge {
0% {
transform-origin : top left;
animation-timing-function : ease-in-out;
}
20%, 60% {
transform : rotate3d(0,0,1,80deg);
transform-origin : top left;
animation-timing-function : ease-in-out;
}
40%, 80% {
transform : rotate3d(0,0,1,60deg);
transform-origin : top left;
animation-timing-function : ease-in-out;
opacity : 1;
}
100% {
transform : translate3d(0,700px,0);
opacity : 0;
}
}
.hinge {
animation-name : hinge;
}
@keyframes rollIn {
0% {
opacity : 0;
}
100% {
opacity : 1;
transform : none;
}
}
.rollIn {
animation-name : rollIn;
}
@keyframes rollOut {
0% {
opacity : 1;
}
100% {
opacity : 0;
}
}
.rollOut {
animation-name : rollOut;
}
@keyframes zoomIn {
0% {
opacity : 0;
transform : scale3d(0.3,0.3,0.3);
}
50% {
opacity : 1;
}
}
.zoomIn {
animation-name : zoomIn;
}
@keyframes zoomInDown {
0% {
opacity : 0;
animation-timing-function : cubic-bezier(0.550,0.055,0.675,0.190);
}
60% {
opacity : 1;
animation-timing-function : cubic-bezier(0.175,0.885,0.320,1);
}
}
.zoomInDown {
animation-name : zoomInDown;
}
@keyframes zoomInLeft {
0% {
opacity : 0;
animation-timing-function : cubic-bezier(0.550,0.055,0.675,0.190);
}
60% {
opacity : 1;
animation-timing-function : cubic-bezier(0.175,0.885,0.320,1);
}
}
.zoomInLeft {
animation-name : zoomInLeft;
}
@keyframes zoomInRight {
0% {
opacity : 0;
animation-timing-function : cubic-bezier(0.550,0.055,0.675,0.190);
}
60% {
opacity : 1;
animation-timing-function : cubic-bezier(0.175,0.885,0.320,1);
}
}
.zoomInRight {
animation-name : zoomInRight;
}
@keyframes zoomInUp {
0% {
opacity : 0;
animation-timing-function : cubic-bezier(0.550,0.055,0.675,0.190);
}
60% {
opacity : 1;
animation-timing-function : cubic-bezier(0.175,0.885,0.320,1);
}
}
.zoomInUp {
animation-name : zoomInUp;
}
@keyframes zoomOut {
0% {
opacity : 1;
}
50% {
opacity : 0;
transform : scale3d(0.3,0.3,0.3);
}
100% {
opacity : 0;
}
}
.zoomOut {
animation-name : zoomOut;
}
@keyframes zoomOutDown {
40% {
opacity : 1;
animation-timing-function : cubic-bezier(0.550,0.055,0.675,0.190);
}
100% {
opacity : 0;
transform-origin : center bottom;
animation-timing-function : cubic-bezier(0.175,0.885,0.320,1);
}
}
.zoomOutDown {
animation-name : zoomOutDown;
}
@keyframes zoomOutLeft {
40% {
opacity : 1;
}
100% {
opacity : 0;
transform-origin : left center;
}
}
.zoomOutLeft {
animation-name : zoomOutLeft;
}
@keyframes zoomOutRight {
40% {
opacity : 1;
}
100% {
opacity : 0;
transform-origin : right center;
}
}
.zoomOutRight {
animation-name : zoomOutRight;
}
@keyframes zoomOutUp {
40% {
opacity : 1;
animation-timing-function : cubic-bezier(0.550,0.055,0.675,0.190);
}
100% {
opacity : 0;
transform-origin : center bottom;
animation-timing-function : cubic-bezier(0.175,0.885,0.320,1);
}
}
.zoomOutUp {
animation-name : zoomOutUp;
}
@keyframes slideInDown {
0% {
transform : translateY(-100%);
visibility : visible;
}
100% {
transform : translateY(0);
}
}
.slideInDown {
animation-name : slideInDown;
}
@keyframes slideInLeft {
0% {
transform : translateX(-100%);
visibility : visible;
}
100% {
transform : translateX(0);
}
}
.slideInLeft {
animation-name : slideInLeft;
}
@keyframes slideInRight {
0% {
transform : translateX(100%);
visibility : visible;
}
100% {
transform : translateX(0);
}
}
.slideInRight {
animation-name : slideInRight;
}
@keyframes slideInUp {
0% {
transform : translateY(100%);
visibility : visible;
}
100% {
transform : translateY(0);
}
}
.slideInUp {
animation-name : slideInUp;
}
@keyframes slideOutDown {
0% {
transform : translateY(0);
}
100% {
visibility : hidden;
transform : translateY(100%);
}
}
.slideOutDown {
animation-name : slideOutDown;
}
@keyframes slideOutLeft {
0% {
transform : translateX(0);
}
100% {
visibility : hidden;
transform : translateX(-100%);
}
}
.slideOutLeft {
animation-name : slideOutLeft;
}
@keyframes slideOutRight {
0% {
transform : translateX(0);
}
100% {
visibility : hidden;
transform : translateX(100%);
}
}
.slideOutRight {
animation-name : slideOutRight;
}
@keyframes slideOutUp {
0% {
transform : translateY(0);
}
100% {
visibility : hidden;
transform : translateY(-100%);
}
}
.slideOutUp {
animation-name : slideOutUp;
}
@keyframes fadeInDownMenu {
0% {
opacity : 0;
transform : translateY(-20px);
}
100% {
opacity : 1;
transform : translateY(0);
}
}
@keyframes fadeInUpMenu {
0% {
opacity : 1;
transform : translateY(0);
}
100% {
opacity : 0;
transform : translateY(-20px);
}
}
.slideUp {
animation-name : slideUp;
}
@keyframes slideUp {
0% {
opacity : 0;
transition : all 0.6s ease;
transform : translate3d(0,90px,0);
}
100% {
opacity : 1;
transform : translate3d(0,0,0);
}
}
@keyframes hvr-ripple-out {
100% {
top : -12px;
right : -12px;
bottom : -12px;
left : -12px;
opacity : 0;
}
}
.hvr-ripple-out {
display : inline-block;
vertical-align : middle;
transform : translateZ(0);
box-shadow : 0 0 1px rgba(0, 0, 0, 0);
backface-visibility : hidden;
position : relative;
}
.hvr-ripple-out:after {
content : '';
position : absolute;
border : #e1e1e1 solid 6px;
border-radius : 100%;
top : 0;
right : 0;
bottom : 0;
left : 0;
animation-duration : 1s;
}