.animated{animation-duration:1s;animation-fill-mode:both;}
.animated.hinge{animation-duration:2s;}
@keyframes bounce{0%, 20%, 50%, 80%, 100%{transform:translateY(0px);}
40%{transform:translateY(-30px);}
60%{transform:translateY(-15px);}
}
@keyframes bounce{0%, 20%, 50%, 80%, 100%{transform:translateY(0px);}
40%{transform:translateY(-30px);}
60%{transform:translateY(-15px);}
}
.bounce{animation-name:bounce;}
@keyframes flash{0%, 50%, 100%{opacity:1;}
25%, 75%{opacity:0;}
}
@keyframes flash{0%, 50%, 100%{opacity:1;}
25%, 75%{opacity:0;}
}
.flash{animation-name:flash;}
@keyframes pulse{0%{transform:scale(1);}
50%{transform:scale(1.1);}
100%{transform:scale(1);}
}
@keyframes pulse{0%{transform:scale(1);}
50%{transform:scale(1.1);}
100%{transform:scale(1);}
}
.pulse{animation-name:pulse;}
@keyframes shake{0%, 100%{transform:translateX(0px);}
10%, 30%, 50%, 70%, 90%{transform:translateX(-10px);}
20%, 40%, 60%, 80%{transform:translateX(10px);}
}
@keyframes shake{0%, 100%{transform:translateX(0px);}
10%, 30%, 50%, 70%, 90%{transform:translateX(-10px);}
20%, 40%, 60%, 80%{transform:translateX(10px);}
}
.shake{animation-name:shake;}
@keyframes swing{20%{transform:rotate(15deg);}
40%{transform:rotate(-10deg);}
60%{transform:rotate(5deg);}
80%{transform:rotate(-5deg);}
100%{transform:rotate(0deg);}
}
@keyframes swing{20%{transform:rotate(15deg);}
40%{transform:rotate(-10deg);}
60%{transform:rotate(5deg);}
80%{transform:rotate(-5deg);}
100%{transform:rotate(0deg);}
}
.swing{animation-name:swing;transform-origin:center top 0;}
@keyframes tada{0%{transform:scale(1);}
10%, 20%{transform:scale(0.9) rotate(-3deg);}
30%, 50%, 70%, 90%{transform:scale(1.1) rotate(3deg);}
40%, 60%, 80%{transform:scale(1.1) rotate(-3deg);}
100%{transform:scale(1) rotate(0deg);}
}
@keyframes tada{0%{transform:scale(1);}
10%, 20%{transform:scale(0.9) rotate(-3deg);}
30%, 50%, 70%, 90%{transform:scale(1.1) rotate(3deg);}
40%, 60%, 80%{transform:scale(1.1) rotate(-3deg);}
100%{transform:scale(1) rotate(0deg);}
}
.tada{animation-name:tada;}
@keyframes wobble{0%{transform:translateX(0%);}
15%{transform:translateX(-25%) rotate(-5deg);}
30%{transform:translateX(20%) rotate(3deg);}
45%{transform:translateX(-15%) rotate(-3deg);}
60%{transform:translateX(10%) rotate(2deg);}
75%{transform:translateX(-5%) rotate(-1deg);}
100%{transform:translateX(0%);}
}
@keyframes wobble{0%{transform:translateX(0%);}
15%{transform:translateX(-25%) rotate(-5deg);}
30%{transform:translateX(20%) rotate(3deg);}
45%{transform:translateX(-15%) rotate(-3deg);}
60%{transform:translateX(10%) rotate(2deg);}
75%{transform:translateX(-5%) rotate(-1deg);}
100%{transform:translateX(0%);}
}
.wobble{animation-name:wobble;}
@keyframes bounceIn{0%{opacity:0;transform:scale(0.3);}
50%{opacity:1;transform:scale(1.05);}
70%{transform:scale(0.9);}
100%{transform:scale(1);}
}
@keyframes bounceIn{0%{opacity:0;transform:scale(0.3);}
50%{opacity:1;transform:scale(1.05);}
70%{transform:scale(0.9);}
100%{transform:scale(1);}
}
.bounceIn{animation-name:bounceIn;}
@keyframes bounceInDown{0%{opacity:0;transform:translateY(-2000px);}
60%{opacity:1;transform:translateY(30px);}
80%{transform:translateY(-10px);}
100%{transform:translateY(0px);}
}
@keyframes bounceInDown{0%{opacity:0;transform:translateY(-2000px);}
60%{opacity:1;transform:translateY(30px);}
80%{transform:translateY(-10px);}
100%{transform:translateY(0px);}
}
.bounceInDown{animation-name:bounceInDown;}
@keyframes bounceInLeft{0%{opacity:0;transform:translateX(-2000px);}
60%{opacity:1;transform:translateX(30px);}
80%{transform:translateX(-10px);}
100%{transform:translateX(0px);}
}
@keyframes bounceInLeft{0%{opacity:0;transform:translateX(-2000px);}
60%{opacity:1;transform:translateX(30px);}
80%{transform:translateX(-10px);}
100%{transform:translateX(0px);}
}
.bounceInLeft{animation-name:bounceInLeft;}
@keyframes bounceInRight{0%{opacity:0;transform:translateX(2000px);}
60%{opacity:1;transform:translateX(-30px);}
80%{transform:translateX(10px);}
100%{transform:translateX(0px);}
}
@keyframes bounceInRight{0%{opacity:0;transform:translateX(2000px);}
60%{opacity:1;transform:translateX(-30px);}
80%{transform:translateX(10px);}
100%{transform:translateX(0px);}
}
.bounceInRight{animation-name:bounceInRight;}
@keyframes bounceInUp{0%{opacity:0;transform:translateY(2000px);}
60%{opacity:1;transform:translateY(-30px);}
80%{transform:translateY(10px);}
100%{transform:translateY(0px);}
}
@keyframes bounceInUp{0%{opacity:0;transform:translateY(2000px);}
60%{opacity:1;transform:translateY(-30px);}
80%{transform:translateY(10px);}
100%{transform:translateY(0px);}
}
.bounceInUp{animation-name:bounceInUp;}
@keyframes bounceOut{0%{transform:scale(1);}
25%{transform:scale(0.95);}
50%{opacity:1;transform:scale(1.1);}
100%{opacity:0;transform:scale(0.3);}
}
@keyframes bounceOut{0%{transform:scale(1);}
25%{transform:scale(0.95);}
50%{opacity:1;transform:scale(1.1);}
100%{opacity:0;transform:scale(0.3);}
}
.bounceOut{animation-name:bounceOut;}
@keyframes bounceOutDown{0%{transform:translateY(0px);}
20%{opacity:1;transform:translateY(-20px);}
100%{opacity:0;transform:translateY(2000px);}
}
@keyframes bounceOutDown{0%{transform:translateY(0px);}
20%{opacity:1;transform:translateY(-20px);}
100%{opacity:0;transform:translateY(2000px);}
}
.bounceOutDown{animation-name:bounceOutDown;}
@keyframes bounceOutLeft{0%{transform:translateX(0px);}
20%{opacity:1;transform:translateX(20px);}
100%{opacity:0;transform:translateX(-2000px);}
}
@keyframes bounceOutLeft{0%{transform:translateX(0px);}
20%{opacity:1;transform:translateX(20px);}
100%{opacity:0;transform:translateX(-2000px);}
}
.bounceOutLeft{animation-name:bounceOutLeft;}
@keyframes bounceOutRight{0%{transform:translateX(0px);}
20%{opacity:1;transform:translateX(-20px);}
100%{opacity:0;transform:translateX(2000px);}
}
@keyframes bounceOutRight{0%{transform:translateX(0px);}
20%{opacity:1;transform:translateX(-20px);}
100%{opacity:0;transform:translateX(2000px);}
}
.bounceOutRight{animation-name:bounceOutRight;}
@keyframes bounceOutUp{0%{transform:translateY(0px);}
20%{opacity:1;transform:translateY(20px);}
100%{opacity:0;transform:translateY(-2000px);}
}
@keyframes bounceOutUp{0%{transform:translateY(0px);}
20%{opacity:1;transform:translateY(20px);}
100%{opacity:0;transform:translateY(-2000px);}
}
.bounceOutUp{animation-name:bounceOutUp;}
@keyframes fadeIn{0%{opacity:0;}
100%{opacity:1;}
}
@keyframes fadeIn{0%{opacity:0;}
100%{opacity:1;}
}
.fadeIn{animation-name:fadeIn;}
@keyframes fadeInDown{0%{opacity:0;transform:translateY(-20px);}
100%{opacity:1;transform:translateY(0px);}
}
@keyframes fadeInDown{0%{opacity:0;transform:translateY(-20px);}
100%{opacity:1;transform:translateY(0px);}
}
.fadeInDown{animation-name:fadeInDown;}
@keyframes fadeInDownBig{0%{opacity:0;transform:translateY(-2000px);}
100%{opacity:1;transform:translateY(0px);}
}
@keyframes fadeInDownBig{0%{opacity:0;transform:translateY(-2000px);}
100%{opacity:1;transform:translateY(0px);}
}
.fadeInDownBig{animation-name:fadeInDownBig;}
@keyframes fadeInLeft{0%{opacity:0;transform:translateX(-20px);}
100%{opacity:1;transform:translateX(0px);}
}
@keyframes fadeInLeft{0%{opacity:0;transform:translateX(-20px);}
100%{opacity:1;transform:translateX(0px);}
}
.fadeInLeft{animation-name:fadeInLeft;}
@keyframes fadeInLeftBig{0%{opacity:0;transform:translateX(-2000px);}
100%{opacity:1;transform:translateX(0px);}
}
@keyframes fadeInLeftBig{0%{opacity:0;transform:translateX(-2000px);}
100%{opacity:1;transform:translateX(0px);}
}
.fadeInLeftBig{animation-name:fadeInLeftBig;}
@keyframes fadeInRight{0%{opacity:0;transform:translateX(20px);}
100%{opacity:1;transform:translateX(0px);}
}
@keyframes fadeInRight{0%{opacity:0;transform:translateX(20px);}
100%{opacity:1;transform:translateX(0px);}
}
.fadeInRight{animation-name:fadeInRight;}
@keyframes fadeInRightBig{0%{opacity:0;transform:translateX(2000px);}
100%{opacity:1;transform:translateX(0px);}
}
@keyframes fadeInRightBig{0%{opacity:0;transform:translateX(2000px);}
100%{opacity:1;transform:translateX(0px);}
}
.fadeInRightBig{animation-name:fadeInRightBig;}
@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px);}
100%{opacity:1;transform:translateY(0px);}
}
@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px);}
100%{opacity:1;transform:translateY(0px);}
}
.fadeInUp{animation-name:fadeInUp;}
@keyframes fadeInUpBig{0%{opacity:0;transform:translateY(2000px);}
100%{opacity:1;transform:translateY(0px);}
}
@keyframes fadeInUpBig{0%{opacity:0;transform:translateY(2000px);}
100%{opacity:1;transform:translateY(0px);}
}
.fadeInUpBig{animation-name:fadeInUpBig;}
@keyframes fadeOut{0%{opacity:1;}
100%{opacity:0;}
}
@keyframes fadeOut{0%{opacity:1;}
100%{opacity:0;}
}
.fadeOut{animation-name:fadeOut;}
@keyframes fadeOutDown{0%{opacity:1;transform:translateY(0px);}
100%{opacity:0;transform:translateY(20px);}
}
@keyframes fadeOutDown{0%{opacity:1;transform:translateY(0px);}
100%{opacity:0;transform:translateY(20px);}
}
.fadeOutDown{animation-name:fadeOutDown;}
@keyframes fadeOutDownBig{0%{opacity:1;transform:translateY(0px);}
100%{opacity:0;transform:translateY(2000px);}
}
@keyframes fadeOutDownBig{0%{opacity:1;transform:translateY(0px);}
100%{opacity:0;transform:translateY(2000px);}
}
.fadeOutDownBig{animation-name:fadeOutDownBig;}
@keyframes fadeOutLeft{0%{opacity:1;transform:translateX(0px);}
100%{opacity:0;transform:translateX(-20px);}
}
@keyframes fadeOutLeft{0%{opacity:1;transform:translateX(0px);}
100%{opacity:0;transform:translateX(-20px);}
}
.fadeOutLeft{animation-name:fadeOutLeft;}
@keyframes fadeOutLeftBig{0%{opacity:1;transform:translateX(0px);}
100%{opacity:0;transform:translateX(-2000px);}
}
@keyframes fadeOutLeftBig{0%{opacity:1;transform:translateX(0px);}
100%{opacity:0;transform:translateX(-2000px);}
}
.fadeOutLeftBig{animation-name:fadeOutLeftBig;}
@keyframes fadeOutRight{0%{opacity:1;transform:translateX(0px);}
100%{opacity:0;transform:translateX(20px);}
}
@keyframes fadeOutRight{0%{opacity:1;transform:translateX(0px);}
100%{opacity:0;transform:translateX(20px);}
}
.fadeOutRight{animation-name:fadeOutRight;}
@keyframes fadeOutRightBig{0%{opacity:1;transform:translateX(0px);}
100%{opacity:0;transform:translateX(2000px);}
}
@keyframes fadeOutRightBig{0%{opacity:1;transform:translateX(0px);}
100%{opacity:0;transform:translateX(2000px);}
}
.fadeOutRightBig{animation-name:fadeOutRightBig;}
@keyframes fadeOutUp{0%{opacity:1;transform:translateY(0px);}
100%{opacity:0;transform:translateY(-20px);}
}
@keyframes fadeOutUp{0%{opacity:1;transform:translateY(0px);}
100%{opacity:0;transform:translateY(-20px);}
}
.fadeOutUp{animation-name:fadeOutUp;}
@keyframes fadeOutUpBig{0%{opacity:1;transform:translateY(0px);}
100%{opacity:0;transform:translateY(-2000px);}
}
@keyframes fadeOutUpBig{0%{opacity:1;transform:translateY(0px);}
100%{opacity:0;transform:translateY(-2000px);}
}
.fadeOutUpBig{animation-name:fadeOutUpBig;}
@keyframes flip{0%{animation-timing-function:ease-out;transform:perspective(400px) translateZ(0px) rotateY(0deg) scale(1);}
40%{animation-timing-function:ease-out;transform:perspective(400px) translateZ(150px) rotateY(170deg) scale(1);}
50%{animation-timing-function:ease-in;transform:perspective(400px) translateZ(150px) rotateY(190deg) scale(1);}
80%{animation-timing-function:ease-in;transform:perspective(400px) translateZ(0px) rotateY(360deg) scale(0.95);}
100%{animation-timing-function:ease-in;transform:perspective(400px) translateZ(0px) rotateY(360deg) scale(1);}
}
@keyframes flip{0%{animation-timing-function:ease-out;transform:perspective(400px) translateZ(0px) rotateY(0deg) scale(1);}
40%{animation-timing-function:ease-out;transform:perspective(400px) translateZ(150px) rotateY(170deg) scale(1);}
50%{animation-timing-function:ease-in;transform:perspective(400px) translateZ(150px) rotateY(190deg) scale(1);}
80%{animation-timing-function:ease-in;transform:perspective(400px) translateZ(0px) rotateY(360deg) scale(0.95);}
100%{animation-timing-function:ease-in;transform:perspective(400px) translateZ(0px) rotateY(360deg) scale(1);}
}
.animated.flip{animation-name:flip;backface-visibility:visible;}
@keyframes flipInX{0%{opacity:0;transform:perspective(400px) rotateX(90deg);}
40%{transform:perspective(400px) rotateX(-10deg);}
70%{transform:perspective(400px) rotateX(10deg);}
100%{opacity:1;transform:perspective(400px) rotateX(0deg);}
}
@keyframes flipInX{0%{opacity:0;transform:perspective(400px) rotateX(90deg);}
40%{transform:perspective(400px) rotateX(-10deg);}
70%{transform:perspective(400px) rotateX(10deg);}
100%{opacity:1;transform:perspective(400px) rotateX(0deg);}
}
.flipInX{animation-name:flipInX;backface-visibility:visible !important;}
@keyframes flipInY{0%{opacity:0;transform:perspective(400px) rotateY(90deg);}
40%{transform:perspective(400px) rotateY(-10deg);}
70%{transform:perspective(400px) rotateY(10deg);}
100%{opacity:1;transform:perspective(400px) rotateY(0deg);}
}
@keyframes flipInY{0%{opacity:0;transform:perspective(400px) rotateY(90deg);}
40%{transform:perspective(400px) rotateY(-10deg);}
70%{transform:perspective(400px) rotateY(10deg);}
100%{opacity:1;transform:perspective(400px) rotateY(0deg);}
}
.flipInY{animation-name:flipInY;backface-visibility:visible !important;}
@keyframes flipOutX{0%{opacity:1;transform:perspective(400px) rotateX(0deg);}
100%{opacity:0;transform:perspective(400px) rotateX(90deg);}
}
@keyframes flipOutX{0%{opacity:1;transform:perspective(400px) rotateX(0deg);}
100%{opacity:0;transform:perspective(400px) rotateX(90deg);}
}
.flipOutX{animation-name:flipOutX;backface-visibility:visible !important;}
@keyframes flipOutY{0%{opacity:1;transform:perspective(400px) rotateY(0deg);}
100%{opacity:0;transform:perspective(400px) rotateY(90deg);}
}
@keyframes flipOutY{0%{opacity:1;transform:perspective(400px) rotateY(0deg);}
100%{opacity:0;transform:perspective(400px) rotateY(90deg);}
}
.flipOutY{animation-name:flipOutY;backface-visibility:visible !important;}
@keyframes lightSpeedIn{0%{opacity:0;transform:translateX(100%) skewX(-30deg);}
60%{opacity:1;transform:translateX(-20%) skewX(30deg);}
80%{opacity:1;transform:translateX(0%) skewX(-15deg);}
100%{opacity:1;transform:translateX(0%) skewX(0deg);}
}
@keyframes lightSpeedIn{0%{opacity:0;transform:translateX(100%) skewX(-30deg);}
60%{opacity:1;transform:translateX(-20%) skewX(30deg);}
80%{opacity:1;transform:translateX(0%) skewX(-15deg);}
100%{opacity:1;transform:translateX(0%) skewX(0deg);}
}
.lightSpeedIn{animation-name:lightSpeedIn;animation-timing-function:ease-out;}
@keyframes lightSpeedOut{0%{opacity:1;transform:translateX(0%) skewX(0deg);}
100%{opacity:0;transform:translateX(100%) skewX(-30deg);}
}
@keyframes lightSpeedOut{0%{opacity:1;transform:translateX(0%) skewX(0deg);}
100%{opacity:0;transform:translateX(100%) skewX(-30deg);}
}
.lightSpeedOut{animation-name:lightSpeedOut;animation-timing-function:ease-in;}
@keyframes rotateIn{0%{opacity:0;transform:rotate(-200deg);transform-origin:center center 0;}
100%{opacity:1;transform:rotate(0deg);transform-origin:center center 0;}
}
@keyframes rotateIn{0%{opacity:0;transform:rotate(-200deg);transform-origin:center center 0;}
100%{opacity:1;transform:rotate(0deg);transform-origin:center center 0;}
}
.rotateIn{animation-name:rotateIn;}
@keyframes rotateInDownLeft{0%{opacity:0;transform:rotate(-90deg);transform-origin:left bottom 0;}
100%{opacity:1;transform:rotate(0deg);transform-origin:left bottom 0;}
}
@keyframes rotateInDownLeft{0%{opacity:0;transform:rotate(-90deg);transform-origin:left bottom 0;}
100%{opacity:1;transform:rotate(0deg);transform-origin:left bottom 0;}
}
.rotateInDownLeft{animation-name:rotateInDownLeft;}
@keyframes rotateInDownRight{0%{opacity:0;transform:rotate(90deg);transform-origin:right bottom 0;}
100%{opacity:1;transform:rotate(0deg);transform-origin:right bottom 0;}
}
@keyframes rotateInDownRight{0%{opacity:0;transform:rotate(90deg);transform-origin:right bottom 0;}
100%{opacity:1;transform:rotate(0deg);transform-origin:right bottom 0;}
}
.rotateInDownRight{animation-name:rotateInDownRight;}
@keyframes rotateInUpLeft{0%{opacity:0;transform:rotate(90deg);transform-origin:left bottom 0;}
100%{opacity:1;transform:rotate(0deg);transform-origin:left bottom 0;}
}
@keyframes rotateInUpLeft{0%{opacity:0;transform:rotate(90deg);transform-origin:left bottom 0;}
100%{opacity:1;transform:rotate(0deg);transform-origin:left bottom 0;}
}
.rotateInUpLeft{animation-name:rotateInUpLeft;}
@keyframes rotateInUpRight{0%{opacity:0;transform:rotate(-90deg);transform-origin:right bottom 0;}
100%{opacity:1;transform:rotate(0deg);transform-origin:right bottom 0;}
}
@keyframes rotateInUpRight{0%{opacity:0;transform:rotate(-90deg);transform-origin:right bottom 0;}
100%{opacity:1;transform:rotate(0deg);transform-origin:right bottom 0;}
}
.rotateInUpRight{animation-name:rotateInUpRight;}
@keyframes rotateOut{0%{opacity:1;transform:rotate(0deg);transform-origin:center center 0;}
100%{opacity:0;transform:rotate(200deg);transform-origin:center center 0;}
}
@keyframes rotateOut{0%{opacity:1;transform:rotate(0deg);transform-origin:center center 0;}
100%{opacity:0;transform:rotate(200deg);transform-origin:center center 0;}
}
.rotateOut{animation-name:rotateOut;}
@keyframes rotateOutDownLeft{0%{opacity:1;transform:rotate(0deg);transform-origin:left bottom 0;}
100%{opacity:0;transform:rotate(90deg);transform-origin:left bottom 0;}
}
@keyframes rotateOutDownLeft{0%{opacity:1;transform:rotate(0deg);transform-origin:left bottom 0;}
100%{opacity:0;transform:rotate(90deg);transform-origin:left bottom 0;}
}
.rotateOutDownLeft{animation-name:rotateOutDownLeft;}
@keyframes rotateOutDownRight{0%{opacity:1;transform:rotate(0deg);transform-origin:right bottom 0;}
100%{opacity:0;transform:rotate(-90deg);transform-origin:right bottom 0;}
}
@keyframes rotateOutDownRight{0%{opacity:1;transform:rotate(0deg);transform-origin:right bottom 0;}
100%{opacity:0;transform:rotate(-90deg);transform-origin:right bottom 0;}
}
.rotateOutDownRight{animation-name:rotateOutDownRight;}
@keyframes rotateOutUpLeft{0%{opacity:1;transform:rotate(0deg);transform-origin:left bottom 0;}
100%{opacity:0;transform:rotate(-90deg);transform-origin:left bottom 0;}
}
@keyframes rotateOutUpLeft{0%{opacity:1;transform:rotate(0deg);transform-origin:left bottom 0;}
100%{opacity:0;transform:rotate(-90deg);transform-origin:left bottom 0;}
}
.rotateOutUpLeft{animation-name:rotateOutUpLeft;}
@keyframes rotateOutUpRight{0%{opacity:1;transform:rotate(0deg);transform-origin:right bottom 0;}
100%{opacity:0;transform:rotate(90deg);transform-origin:right bottom 0;}
}
@keyframes rotateOutUpRight{0%{opacity:1;transform:rotate(0deg);transform-origin:right bottom 0;}
100%{opacity:0;transform:rotate(90deg);transform-origin:right bottom 0;}
}
.rotateOutUpRight{animation-name:rotateOutUpRight;}
@keyframes slideInDown{0%{opacity:0;transform:translateY(-2000px);}
100%{transform:translateY(0px);}
}
@keyframes slideInDown{0%{opacity:0;transform:translateY(-2000px);}
100%{transform:translateY(0px);}
}
.slideInDown{animation-name:slideInDown;}
@keyframes slideInLeft{0%{opacity:0;transform:translateX(-2000px);}
100%{transform:translateX(0px);}
}
@keyframes slideInLeft{0%{opacity:0;transform:translateX(-2000px);}
100%{transform:translateX(0px);}
}
.slideInLeft{animation-name:slideInLeft;}
@keyframes slideInRight{0%{opacity:0;transform:translateX(2000px);}
100%{transform:translateX(0px);}
}
@keyframes slideInRight{0%{opacity:0;transform:translateX(2000px);}
100%{transform:translateX(0px);}
}
.slideInRight{animation-name:slideInRight;}
@keyframes slideOutLeft{0%{transform:translateX(0px);}
100%{opacity:0;transform:translateX(-2000px);}
}
@keyframes slideOutLeft{0%{transform:translateX(0px);}
100%{opacity:0;transform:translateX(-2000px);}
}
.slideOutLeft{animation-name:slideOutLeft;}
@keyframes slideOutRight{0%{transform:translateX(0px);}
100%{opacity:0;transform:translateX(2000px);}
}
@keyframes slideOutRight{0%{transform:translateX(0px);}
100%{opacity:0;transform:translateX(2000px);}
}
.slideOutRight{animation-name:slideOutRight;}
@keyframes slideOutUp{0%{transform:translateY(0px);}
100%{opacity:0;transform:translateY(-2000px);}
}
@keyframes slideOutUp{0%{transform:translateY(0px);}
100%{opacity:0;transform:translateY(-2000px);}
}
.slideOutUp{animation-name:slideOutUp;}
@keyframes hinge{0%{animation-timing-function:ease-in-out;transform:rotate(0deg);transform-origin:left top 0;}
20%, 60%{animation-timing-function:ease-in-out;transform:rotate(80deg);transform-origin:left top 0;}
40%{animation-timing-function:ease-in-out;transform:rotate(60deg);transform-origin:left top 0;}
80%{animation-timing-function:ease-in-out;opacity:1;transform:rotate(60deg) translateY(0px);transform-origin:left top 0;}
100%{opacity:0;transform:translateY(700px);}
}
@keyframes hinge{0%{animation-timing-function:ease-in-out;transform:rotate(0deg);transform-origin:left top 0;}
20%, 60%{animation-timing-function:ease-in-out;transform:rotate(80deg);transform-origin:left top 0;}
40%{animation-timing-function:ease-in-out;transform:rotate(60deg);transform-origin:left top 0;}
80%{animation-timing-function:ease-in-out;opacity:1;transform:rotate(60deg) translateY(0px);transform-origin:left top 0;}
100%{opacity:0;transform:translateY(700px);}
}
.hinge{animation-name:hinge;}
@keyframes rollIn{0%{opacity:0;transform:translateX(-100%) rotate(-120deg);}
100%{opacity:1;transform:translateX(0px) rotate(0deg);}
}
@keyframes rollIn{0%{opacity:0;transform:translateX(-100%) rotate(-120deg);}
100%{opacity:1;transform:translateX(0px) rotate(0deg);}
}
.rollIn{animation-name:rollIn;}
@keyframes rollOut{0%{opacity:1;transform:translateX(0px) rotate(0deg);}
100%{opacity:0;transform:translateX(100%) rotate(120deg);}
}
@keyframes rollOut{0%{opacity:1;transform:translateX(0px) rotate(0deg);}
100%{opacity:0;transform:translateX(100%) rotate(120deg);}
}
.rollOut{animation-name:rollOut;}
@keyframes zoomIn{0%{opacity:0;transform:scale3d(0.3, 0.3, 0.3);}
50%{opacity:1;}
}
@keyframes zoomIn{0%{opacity:0;transform:scale3d(0.3, 0.3, 0.3);}
50%{opacity:1;}
}
.zoomIn{animation-name:zoomIn;}
@keyframes zoomInDown{0%{animation-timing-function:cubic-bezier(0.55, 0.055, 0.675, 0.19);opacity:0;transform:scale3d(0.1, 0.1, 0.1) translate3d(0px, -1000px, 0px);}
60%{animation-timing-function:cubic-bezier(0.175, 0.885, 0.32, 1);opacity:1;transform:scale3d(0.475, 0.475, 0.475) translate3d(0px, 60px, 0px);}
}
@keyframes zoomInDown{0%{animation-timing-function:cubic-bezier(0.55, 0.055, 0.675, 0.19);opacity:0;transform:scale3d(0.1, 0.1, 0.1) translate3d(0px, -1000px, 0px);}
60%{animation-timing-function:cubic-bezier(0.175, 0.885, 0.32, 1);opacity:1;transform:scale3d(0.475, 0.475, 0.475) translate3d(0px, 60px, 0px);}
}
.zoomInDown{animation-name:zoomInDown;}
@keyframes zoomInLeft{0%{animation-timing-function:cubic-bezier(0.55, 0.055, 0.675, 0.19);opacity:0;transform:scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0px, 0px);}
60%{animation-timing-function:cubic-bezier(0.175, 0.885, 0.32, 1);opacity:1;transform:scale3d(0.475, 0.475, 0.475) translate3d(10px, 0px, 0px);}
}
@keyframes zoomInLeft{0%{animation-timing-function:cubic-bezier(0.55, 0.055, 0.675, 0.19);opacity:0;transform:scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0px, 0px);}
60%{animation-timing-function:cubic-bezier(0.175, 0.885, 0.32, 1);opacity:1;transform:scale3d(0.475, 0.475, 0.475) translate3d(10px, 0px, 0px);}
}
.zoomInLeft{animation-name:zoomInLeft;}
@keyframes zoomInRight{0%{animation-timing-function:cubic-bezier(0.55, 0.055, 0.675, 0.19);opacity:0;transform:scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0px, 0px);}
60%{animation-timing-function:cubic-bezier(0.175, 0.885, 0.32, 1);opacity:1;transform:scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0px, 0px);}
}
@keyframes zoomInRight{0%{animation-timing-function:cubic-bezier(0.55, 0.055, 0.675, 0.19);opacity:0;transform:scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0px, 0px);}
60%{animation-timing-function:cubic-bezier(0.175, 0.885, 0.32, 1);opacity:1;transform:scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0px, 0px);}
}
.zoomInRight{animation-name:zoomInRight;}
@keyframes zoomInUp{0%{animation-timing-function:cubic-bezier(0.55, 0.055, 0.675, 0.19);opacity:0;transform:scale3d(0.1, 0.1, 0.1) translate3d(0px, 1000px, 0px);}
60%{animation-timing-function:cubic-bezier(0.175, 0.885, 0.32, 1);opacity:1;transform:scale3d(0.475, 0.475, 0.475) translate3d(0px, -60px, 0px);}
}
@keyframes zoomInUp{0%{animation-timing-function:cubic-bezier(0.55, 0.055, 0.675, 0.19);opacity:0;transform:scale3d(0.1, 0.1, 0.1) translate3d(0px, 1000px, 0px);}
60%{animation-timing-function:cubic-bezier(0.175, 0.885, 0.32, 1);opacity:1;transform:scale3d(0.475, 0.475, 0.475) translate3d(0px, -60px, 0px);}
}
.zoomInUp{animation-name:zoomInUp;}
@keyframes zoomOut{0%{opacity:1;}
50%{opacity:0;transform:scale3d(0.3, 0.3, 0.3);}
100%{opacity:0;}
}
@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%{animation-timing-function:cubic-bezier(0.55, 0.055, 0.675, 0.19);opacity:1;transform:scale3d(0.475, 0.475, 0.475) translate3d(0px, -60px, 0px);}
100%{animation-timing-function:cubic-bezier(0.175, 0.885, 0.32, 1);opacity:0;transform:scale3d(0.1, 0.1, 0.1) translate3d(0px, 2000px, 0px);transform-origin:center bottom 0;}
}
@keyframes zoomOutDown{40%{animation-timing-function:cubic-bezier(0.55, 0.055, 0.675, 0.19);opacity:1;transform:scale3d(0.475, 0.475, 0.475) translate3d(0px, -60px, 0px);}
100%{animation-timing-function:cubic-bezier(0.175, 0.885, 0.32, 1);opacity:0;transform:scale3d(0.1, 0.1, 0.1) translate3d(0px, 2000px, 0px);transform-origin:center bottom 0;}
}
.zoomOutDown{animation-name:zoomOutDown;}
@keyframes zoomOutLeft{40%{opacity:1;transform:scale3d(0.475, 0.475, 0.475) translate3d(42px, 0px, 0px);}
100%{opacity:0;transform:scale(0.1) translate3d(-2000px, 0px, 0px);transform-origin:left center 0;}
}
@keyframes zoomOutLeft{40%{opacity:1;transform:scale3d(0.475, 0.475, 0.475) translate3d(42px, 0px, 0px);}
100%{opacity:0;transform:scale(0.1) translate3d(-2000px, 0px, 0px);transform-origin:left center 0;}
}
.zoomOutLeft{animation-name:zoomOutLeft;}
@keyframes zoomOutRight{40%{opacity:1;transform:scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0px, 0px);}
100%{opacity:0;transform:scale(0.1) translate3d(2000px, 0px, 0px);transform-origin:right center 0;}
}
@keyframes zoomOutRight{40%{opacity:1;transform:scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0px, 0px);}
100%{opacity:0;transform:scale(0.1) translate3d(2000px, 0px, 0px);transform-origin:right center 0;}
}
.zoomOutRight{animation-name:zoomOutRight;}
@keyframes zoomOutUp{40%{animation-timing-function:cubic-bezier(0.55, 0.055, 0.675, 0.19);opacity:1;transform:scale3d(0.475, 0.475, 0.475) translate3d(0px, 60px, 0px);}
100%{animation-timing-function:cubic-bezier(0.175, 0.885, 0.32, 1);opacity:0;transform:scale3d(0.1, 0.1, 0.1) translate3d(0px, -2000px, 0px);transform-origin:center bottom 0;}
}
@keyframes zoomOutUp{40%{animation-timing-function:cubic-bezier(0.55, 0.055, 0.675, 0.19);opacity:1;transform:scale3d(0.475, 0.475, 0.475) translate3d(0px, 60px, 0px);}
100%{animation-timing-function:cubic-bezier(0.175, 0.885, 0.32, 1);opacity:0;transform:scale3d(0.1, 0.1, 0.1) translate3d(0px, -2000px, 0px);transform-origin:center bottom 0;}
}
.zoomOutUp{animation-name:zoomOutUp;}