.animated { animation-duration:1s; animation-fill-mode:both; } .animated.infinite { animation-iteration-count:infinite; } .animated.hinge { animation-duration:2s; } .animated.bounceIn, .animated.bounceOut, .animated.flipOutX, .animated.flipOutY { animation-duration:0.75s; } @keyframes bounce { 20%, 53%, 80%, from, to {  animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);  transform:translate3d(0, 0, 0); } 40%, 43% {  animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);  transform:translate3d(0, -30px, 0); } 70% {  animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);  transform:translate3d(0, -15px, 0); } 90% {  transform:translate3d(0, -4px, 0); } } .bounce { animation-name:bounce; transform-origin:center bottom; } @keyframes flash { 50%, from, to {  opacity:1; } 25%, 75% {  opacity:0; } } .flash { animation-name:flash; } @keyframes pulse { from {  transform:scale3d(1, 1, 1); } 50% {  transform:scale3d(1.05, 1.05, 1.05); } to {  transform:scale3d(1, 1, 1); } } .pulse { animation-name:pulse; } @keyframes rubberBand { from {  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); } to {  transform:scale3d(1, 1, 1); } } .rubberBand { animation-name:rubberBand; } @keyframes shake { from, to {  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 headShake { 0% {  transform:translateX(0); } 6.5% {  transform:translateX(-6px) rotateY(-9deg); } 18.5% {  transform:translateX(5px) rotateY(7deg); } 31.5% {  transform:translateX(-3px) rotateY(-5deg); } 43.5% {  transform:translateX(2px) rotateY(3deg); } 50% {  transform:translateX(0); } } .headShake { animation-timing-function:ease-in-out; animation-name:headShake; } @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); } to {  transform:rotate3d(0, 0, 1, 0deg); } } .swing { transform-origin:top center; animation-name:swing; } @keyframes tada { from {  transform:scale3d(1, 1, 1); } 10%, 20% {  transform:scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); } 30%, 50%, 70%, 90% {  transform:scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); } 40%, 60%, 80% {  transform:scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); } to {  transform:scale3d(1, 1, 1); } } .tada { animation-name:tada; } @keyframes wobble { from {  transform:none; } 15% {  transform:translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); } 30% {  transform:translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); } 45% {  transform:translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); } 60% {  transform:translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); } 75% {  transform:translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); } to {  transform:none; } } .wobble { animation-name:wobble; } @keyframes jello { 11.1%, from, to {  transform:none; } 22.2% {  transform:skewX(-12.5deg) skewY(-12.5deg); } 33.3% {  transform:skewX(6.25deg) skewY(6.25deg); } 44.4% {  transform:skewX(-3.125deg) skewY(-3.125deg); } 55.5% {  transform:skewX(1.5625deg) skewY(1.5625deg); } 66.6% {  transform:skewX(-0.78125deg) skewY(-0.78125deg); } 77.7% {  transform:skewX(0.390625deg) skewY(0.390625deg); } 88.8% {  transform:skewX(-0.1953125deg) skewY(-0.1953125deg); } } .jello { animation-name:jello; transform-origin:center; } @keyframes bounceIn { 20%, 40%, 60%, 80%, from, to {  animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1); } 0% {  opacity:0;  transform:scale3d(0.6, 0.6, 0.6); } 20% {  transform:scale3d(1.05, 1.05, 1.05); } 40% {  transform:scale3d(0.95, 0.95, 0.95); } 60% {  opacity:1;  transform:scale3d(1.02, 1.02, 1.02); } 80% {  transform:scale3d(0.98, 0.98, 0.98); } to {  opacity:1;  transform:scale3d(1, 1, 1); } } .bounceIn { animation-name:bounceIn; } @keyframes bounceInDown { 60%, 75%, 90%, from, to {  animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1); } 0% {  opacity:0;  transform:translate3d(0, -20px, 0); } 60% {  opacity:1;  transform:translate3d(0, 10px, 0); } 75% {  transform:translate3d(0, -5px, 0); } 90% {  transform:translate3d(0, 2px, 0); } to {  transform:none; } } .bounceInDown { animation-name:bounceInDown; } @keyframes bounceInLeft { 60%, 75%, 90%, from, to {  animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1); } 0% {  opacity:0;  transform:translate3d(-20px, 0, 0); } 60% {  opacity:1;  transform:translate3d(10px, 0, 0); } 75% {  transform:translate3d(-5px, 0, 0); } 90% {  transform:translate3d(2px, 0, 0); } to {  transform:none; } } .bounceInLeft { animation-name:bounceInLeft; } @keyframes bounceInRight { 60%, 75%, 90%, from, to {  animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1); } from {  opacity:0;  transform:translate3d(20px, 0, 0); } 60% {  opacity:1;  transform:translate3d(-10px, 0, 0); } 75% {  transform:translate3d(5px, 0, 0); } 90% {  transform:translate3d(-2px, 0, 0); } to {  transform:none; } } .bounceInRight { animation-name:bounceInRight; } @keyframes bounceInUp { 60%, 75%, 90%, from, to {  animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1); } from {  opacity:0;  transform:translate3d(0, 20px, 0); } 60% {  opacity:1;  transform:translate3d(0, -10px, 0); } 75% {  transform:translate3d(0, 5px, 0); } 90% {  transform:translate3d(0, -2px, 0); } to {  transform:translate3d(0, 0, 0); } } .bounceInUp { animation-name:bounceInUp; } @keyframes bounceOut { 20% {  transform:scale3d(0.95, 0.95, 0.95); } 50%, 55% {  opacity:1;  transform:scale3d(1.05, 1.05, 1.05); } to {  opacity:0;  transform:scale3d(0.5, 0.5, 0.5); } } .bounceOut { animation-name:bounceOut; } @keyframes bounceOutDown { 20% {  transform:translate3d(0, 5px, 0); } 40%, 45% {  opacity:1;  transform:translate3d(0, -15px, 0); } to {  opacity:0;  transform:translate3d(0, 100px, 0); } } .bounceOutDown { animation-name:bounceOutDown; } @keyframes bounceOutLeft { 20% {  opacity:1;  transform:translate3d(10px, 0, 0); } to {  opacity:0;  transform:translate3d(-100px, 0, 0); } } .bounceOutLeft { animation-name:bounceOutLeft; } @keyframes bounceOutRight { 20% {  opacity:1;  transform:translate3d(-10px, 0, 0); } to {  opacity:0;  transform:translate3d(100px, 0, 0); } } .bounceOutRight { animation-name:bounceOutRight; } @keyframes bounceOutUp { 20% {  transform:translate3d(0, -5px, 0); } 40%, 45% {  opacity:1;  transform:translate3d(0, 15px, 0); } to {  opacity:0;  transform:translate3d(0, -100px, 0); } } .bounceOutUp { animation-name:bounceOutUp; } @keyframes fadeIn { from {  opacity:0; } to {  opacity:1; } } .fadeIn { animation-name:fadeIn; } @keyframes fadeInDown { from {  opacity:0;  transform:translate3d(0, -40px, 0); } to {  opacity:1;  transform:none; } } .fadeInDown { animation-name:fadeInDown; } @keyframes fadeInDownBig { from {  opacity:0;  transform:translate3d(0, -1000px, 0); } to {  opacity:1;  transform:none; } } .fadeInDownBig { animation-name:fadeInDownBig; } @keyframes fadeInLeft { from {  opacity:0;  transform:translate3d(-40px, 0, 0); } to {  opacity:1;  transform:none; } } .fadeInLeft { animation-name:fadeInLeft; } @keyframes fadeInLeftBig { from {  opacity:0;  transform:translate3d(-1000px, 0, 0); } to {  opacity:1;  transform:none; } } .fadeInLeftBig { animation-name:fadeInLeftBig; } @keyframes fadeInRight { from {  opacity:0;  transform:translate3d(40px, 0, 0); } to {  opacity:1;  transform:none; } } .fadeInRight { animation-name:fadeInRight; } @keyframes fadeInRightBig { from {  opacity:0;  transform:translate3d(1000px, 0, 0); } to {  opacity:1;  transform:none; } } .fadeInRightBig { animation-name:fadeInRightBig; } @keyframes fadeInUp { from {  opacity:0;  transform:translate3d(0, 40px, 0); } to {  opacity:1;  transform:none; } } .fadeInUp { animation-name:fadeInUp; } @keyframes fadeInUpBig { from {  opacity:0;  transform:translate3d(0, 1000px, 0); } to {  opacity:1;  transform:none; } } .fadeInUpBig { animation-name:fadeInUpBig; } @keyframes fadeOut { from {  opacity:1; } to {  opacity:0; } } .fadeOut { animation-name:fadeOut; } @keyframes fadeOutDown { from {  opacity:1; } to {  opacity:0;  transform:translate3d(0, 40px, 0); } } .fadeOutDown { animation-name:fadeOutDown; } @keyframes fadeOutDownBig { from {  opacity:1; } to {  opacity:0;  transform:translate3d(0, 1000px, 0); } } .fadeOutDownBig { animation-name:fadeOutDownBig; } @keyframes fadeOutLeft { from {  opacity:1; } to {  opacity:0;  transform:translate3d(-60px, 0, 0); } } .fadeOutLeft { animation-name:fadeOutLeft; } @keyframes fadeOutLeftBig { from {  opacity:1; } to {  opacity:0;  transform:translate3d(-1000px, 0, 0); } } .fadeOutLeftBig { animation-name:fadeOutLeftBig; } @keyframes fadeOutRight { from {  opacity:1; } to {  opacity:0;  transform:translate3d(60px, 0, 0); } } .fadeOutRight { animation-name:fadeOutRight; } @keyframes fadeOutRightBig { from {  opacity:1; } to {  opacity:0;  transform:translate3d(1000px, 0, 0); } } .fadeOutRightBig { animation-name:fadeOutRightBig; } @keyframes fadeOutUp { from {  opacity:1; } to {  opacity:0;  transform:translate3d(0, -60px, 0); } } .fadeOutUp { animation-name:fadeOutUp; } @keyframes fadeOutUpBig { from {  opacity:1; } to {  opacity:0;  transform:translate3d(0, -1000px, 0); } } .fadeOutUpBig { animation-name:fadeOutUpBig; } @keyframes flip { from {  transform:perspective(1000px) rotate3d(0, 1, 0, -360deg);  animation-timing-function:ease-out; } 40% {  transform:perspective(1000px) translate3d(0, 0, 150px)  rotate3d(0, 1, 0, -190deg);  animation-timing-function:ease-out; } 50% {  transform:perspective(1000px) translate3d(0, 0, 150px)  rotate3d(0, 1, 0, -170deg);  animation-timing-function:ease-in; } 80% {  transform:perspective(1000px) scale3d(0.95, 0.95, 0.95);  animation-timing-function:ease-in; } to {  transform:perspective(1000px);  animation-timing-function:ease-in; } } .animated.flip { -webkit-backface-visibility:visible; backface-visibility:visible; animation-name:flip; } @keyframes flipInX { from {  transform:perspective(400px) rotate3d(1, 0, 0, 60deg);  animation-timing-function:ease-in;  opacity:0; } 40% {  transform:perspective(400px) rotate3d(1, 0, 0, -10deg);  animation-timing-function:ease-in; } 60% {  transform:perspective(400px) rotate3d(1, 0, 0, 5deg);  opacity:1; } 80% {  transform:perspective(400px) rotate3d(1, 0, 0, -2deg); } to {  transform:perspective(400px); } } .flipInX { -webkit-backface-visibility:visible !important; backface-visibility:visible !important; animation-name:flipInX; } @keyframes flipInY { from {  transform:perspective(1000px) rotate3d(0, 1, 0, 60deg);  animation-timing-function:ease-in;  opacity:0; } 40% {  transform:perspective(1000px) rotate3d(0, 1, 0, -10deg);  animation-timing-function:ease-in; } 60% {  transform:perspective(1000px) rotate3d(0, 1, 0, 5deg);  opacity:1; } 80% {  transform:perspective(1000px) rotate3d(0, 1, 0, -2deg); } to {  transform:perspective(1000px); } } .flipInY { -webkit-backface-visibility:visible !important; backface-visibility:visible !important; animation-name:flipInY; } @keyframes flipOutX { from {  transform:perspective(1000px); } 30% {  transform:perspective(1000px) rotate3d(1, 0, 0, -15deg);  opacity:1; } to {  transform:perspective(1000px) rotate3d(1, 0, 0, 60deg);  opacity:0; } } .flipOutX { animation-name:flipOutX; -webkit-backface-visibility:visible !important; backface-visibility:visible !important; } @keyframes flipOutY { from {  transform:perspective(1000px); } 30% {  transform:perspective(1000px) rotate3d(0, 1, 0, -15deg);  opacity:1; } to {  transform:perspective(1000px) rotate3d(0, 1, 0, 60deg);  opacity:0; } } .flipOutY { -webkit-backface-visibility:visible !important; backface-visibility:visible !important; animation-name:flipOutY; } @keyframes lightSpeedIn { from {  transform:translate3d(100px, 0, 0) skewX(-30deg);  opacity:0; } 60% {  transform:skewX(20deg);  opacity:1; } 80% {  transform:skewX(-5deg);  opacity:1; } to {  transform:none;  opacity:1; } } .lightSpeedIn { animation-name:lightSpeedIn; animation-timing-function:ease-out; } @keyframes lightSpeedOut { from {  opacity:1; } to {  transform:translate3d(100%, 0, 0) skewX(30deg);  opacity:0; } } .lightSpeedOut { animation-name:lightSpeedOut; animation-timing-function:ease-in; } @keyframes rotateIn { from {  transform-origin:center;  transform:rotate3d(0, 0, 1, -180deg);  opacity:0; } to {  transform-origin:center;  transform:none;  opacity:1; } } .rotateIn { animation-name:rotateIn; } @keyframes rotateInDownLeft { from {  transform-origin:left bottom;  transform:rotate3d(0, 0, 1, -10deg);  opacity:0; } to {  transform-origin:left bottom;  transform:none;  opacity:1; } } .rotateInDownLeft { animation-name:rotateInDownLeft; } @keyframes rotateInDownRight { from {  transform-origin:right bottom;  transform:rotate3d(0, 0, 1, 10deg);  opacity:0; } to {  transform-origin:right bottom;  transform:none;  opacity:1; } } .rotateInDownRight { animation-name:rotateInDownRight; } @keyframes rotateInUpLeft { from {  transform-origin:left bottom;  transform:rotate3d(0, 0, 1, 10deg);  opacity:0; } to {  transform-origin:left bottom;  transform:none;  opacity:1; } } .rotateInUpLeft { animation-name:rotateInUpLeft; } @keyframes rotateInUpRight { from {  transform-origin:right bottom;  transform:rotate3d(0, 0, 1, -10deg);  opacity:0; } to {  transform-origin:right bottom;  transform:none;  opacity:1; } } .rotateInUpRight { animation-name:rotateInUpRight; } @keyframes rotateOut { from {  transform-origin:center;  opacity:1; } to {  transform-origin:center;  transform:rotate3d(0, 0, 1, 180deg);  opacity:0; } } .rotateOut { animation-name:rotateOut; } @keyframes rotateOutDownLeft { from {  transform-origin:left bottom;  opacity:1; } to {  transform-origin:left bottom;  transform:rotate3d(0, 0, 1, 10deg);  opacity:0; } } .rotateOutDownLeft { animation-name:rotateOutDownLeft; } @keyframes rotateOutDownRight { from {  transform-origin:right bottom;  opacity:1; } to {  transform-origin:right bottom;  transform:rotate3d(0, 0, 1, -10deg);  opacity:0; } } .rotateOutDownRight { animation-name:rotateOutDownRight; } @keyframes rotateOutUpLeft { from {  transform-origin:left bottom;  opacity:1; } to {  transform-origin:left bottom;  transform:rotate3d(0, 0, 1, -10deg);  opacity:0; } } .rotateOutUpLeft { animation-name:rotateOutUpLeft; } @keyframes rotateOutUpRight { from {  transform-origin:right bottom;  opacity:1; } to {  transform-origin:right bottom;  transform:rotate3d(0, 0, 1, 10deg);  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; } to {  transform:translate3d(0, 700px, 0);  opacity:0; } } .hinge { animation-name:hinge; } @keyframes jackInTheBox { from {  opacity:0;  transform:scale(0.1) rotate(30deg);  transform-origin:center bottom; } 50% {  transform:rotate(-10deg); } 70% {  transform:rotate(3deg); } to {  opacity:1;  transform:scale(1); } } .jackInTheBox { animation-name:jackInTheBox; } @keyframes rollIn { from {  opacity:0;  transform:translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); } to {  opacity:1;  transform:none; } } .rollIn { animation-name:rollIn; } @keyframes rollOut { from {  opacity:1; } to {  opacity:0;  transform:translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); } } .rollOut { animation-name:rollOut; } @keyframes zoomIn { from {  opacity:0;  transform:scale3d(0.8, 0.8, 0.8); } 50% {  opacity:1; } } .zoomIn { animation-name:zoomIn; } @keyframes zoomInDown { from {  opacity:0;  transform:scale3d(0.6, 0.6, 0.6) translate3d(0, -200px, 0);  animation-timing-function:cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% {  opacity:1;  transform:scale3d(0.9, 0.9, 0.9) translate3d(0, 10px, 0);  animation-timing-function:cubic-bezier(0.175, 0.885, 0.32, 1); } } .zoomInDown { animation-name:zoomInDown; } @keyframes zoomInLeft { from {  opacity:0;  transform:scale3d(0.6, 0.6, 0.6) translate3d(-500px, 0, 0);  animation-timing-function:cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% {  opacity:1;  transform:scale3d(0.9, 0.9, 0.9) translate3d(10px, 0, 0);  animation-timing-function:cubic-bezier(0.175, 0.885, 0.32, 1); } } .zoomInLeft { animation-name:zoomInLeft; } @keyframes zoomInRight { from {  opacity:0;  transform:scale3d(0.6, 0.6, 0.6) translate3d(500px, 0, 0);  animation-timing-function:cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% {  opacity:1;  transform:scale3d(0.9, 0.9, 0.9) translate3d(-20px, 0, 0);  animation-timing-function:cubic-bezier(0.175, 0.885, 0.32, 1); } } .zoomInRight { animation-name:zoomInRight; } @keyframes zoomInUp { from {  opacity:0;  transform:scale3d(0.6, 0.6, 0.6) translate3d(0, 200px, 0);  animation-timing-function:cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% {  opacity:1;  transform:scale3d(0.9, 0.9, 0.9) translate3d(0, -20px, 0);  animation-timing-function:cubic-bezier(0.175, 0.885, 0.32, 1); } } .zoomInUp { animation-name:zoomInUp; } @keyframes zoomOut { from {  opacity:1; } 50% {  opacity:0;  transform:scale3d(0.8, 0.8, 0.8); } to {  opacity:0; } } .zoomOut { animation-name:zoomOut; } @keyframes zoomOutDown { 40% {  opacity:1;  transform:scale3d(0.9, 0.9, 0.9) translate3d(0, -20px, 0);  animation-timing-function:cubic-bezier(0.55, 0.055, 0.675, 0.19); } to {  opacity:0;  transform:scale3d(0.4, 0.4, 0.4) translate3d(0, 500px, 0);  transform-origin:center bottom;  animation-timing-function:cubic-bezier(0.175, 0.885, 0.32, 1); } } .zoomOutDown { animation-name:zoomOutDown; } @keyframes zoomOutLeft { 40% {  opacity:1;  transform:scale3d(0.9, 0.9, 0.9) translate3d(30px, 0, 0); } to {  opacity:0;  transform:scale(0.3) translate3d(-500px, 0, 0);  transform-origin:left center; } } .zoomOutLeft { animation-name:zoomOutLeft; } @keyframes zoomOutRight { 40% {  opacity:1;  transform:scale3d(0.9, 0.9, 0.9) translate3d(-30px, 0, 0); } to {  opacity:0;  transform:scale(0.3) translate3d(500px, 0, 0);  transform-origin:right center; } } .zoomOutRight { animation-name:zoomOutRight; } @keyframes zoomOutUp { 40% {  opacity:1;  transform:scale3d(0.9, 0.9, 0.9) translate3d(0, 30px, 0);  animation-timing-function:cubic-bezier(0.55, 0.055, 0.675, 0.19); } to {  opacity:0;  transform:scale3d(0.3, 0.3, 0.3) translate3d(0, -500px, 0);  transform-origin:center bottom;  animation-timing-function:cubic-bezier(0.175, 0.885, 0.32, 1); } } .zoomOutUp { animation-name:zoomOutUp; } @keyframes slideInDown { from {  transform:translate3d(0, -100%, 0);  visibility:visible; } to {  transform:translate3d(0, 0, 0); } } .slideInDown { animation-name:slideInDown; } @keyframes slideInLeft { from {  transform:translate3d(-100%, 0, 0);  visibility:visible; } to {  transform:translate3d(0, 0, 0); } } .slideInLeft { animation-name:slideInLeft; } @keyframes slideInRight { from {  transform:translate3d(100%, 0, 0);  visibility:visible; } to {  transform:translate3d(0, 0, 0); } } .slideInRight { animation-name:slideInRight; } @keyframes slideInUp { from {  transform:translate3d(0, 100%, 0);  visibility:visible; } to {  transform:translate3d(0, 0, 0); } } .slideInUp { animation-name:slideInUp; } @keyframes slideOutDown { from {  transform:translate3d(0, 0, 0); } to {  visibility:hidden;  transform:translate3d(0, 100%, 0); } } .slideOutDown { animation-name:slideOutDown; } @keyframes slideOutLeft { from {  transform:translate3d(0, 0, 0); } to {  visibility:hidden;  transform:translate3d(-100%, 0, 0); } } .slideOutLeft { animation-name:slideOutLeft; } @keyframes slideOutRight { from {  transform:translate3d(0, 0, 0); } to {  visibility:hidden;  transform:translate3d(100%, 0, 0); } } .slideOutRight { animation-name:slideOutRight; } @keyframes slideOutUp { from {  transform:translate3d(0, 0, 0); } to {  visibility:hidden;  transform:translate3d(0, -100%, 0); } } .slideOutUp { animation-name:slideOutUp; } @keyframes fadeInUpShort { from {  opacity:0;  transform:translate3d(0, 20px, 0); } to {  opacity:1;  transform:none; } } .fadeInUpShort { animation-name:fadeInUpShort; } @keyframes fadeInDownShort { from {  opacity:0;  transform:translate3d(0, -20px, 0); } to {  opacity:1;  transform:none; } } .fadeInDownShort { animation-name:fadeInDownShort; } @keyframes fadeInLeftShort { from {  opacity:0;  transform:translate3d(-20px, 0, 0); } to {  opacity:1;  transform:none; } } .fadeInLeftShort { animation-name:fadeInLeftShort; } @keyframes fadeInRightShort { from {  opacity:0;  transform:translate3d(20px, 0, 0); } to {  opacity:1;  transform:none; } } .fadeInRightShort { animation-name:fadeInRightShort; } @keyframes zoomInShort { from {  opacity:0;  transform:scale3d(0.97, 0.97, 0.97); } 50% {  opacity:1; } } .zoomInShort { animation-name:zoomInShort; } @keyframes bounceInShort { 20%, 40%, 60%, 80%, from, to {  animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1); } 0% {  opacity:0;  transform:scale3d(0.97, 0.97, 0.97); } 20% {  transform:scale3d(1.03, 1.03, 1.03); } 40% {  transform:scale3d(0.98, 0.98, 0.98); } 60% {  opacity:1;  transform:scale3d(1.02, 1.02, 1.02); } 80% {  transform:scale3d(0.99, 0.99, 0.99); } to {  opacity:1;  transform:scale3d(1, 1, 1); } } .bounceInShort { animation-name:bounceInShort; } @keyframes bounceInDownShort { 60%, 75%, 90%, from, to {  animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1); } 0% {  opacity:0;  transform:translate3d(0, -15px, 0); } 60% {  opacity:1;  transform:translate3d(0, 8px, 0); } 75% {  transform:translate3d(0, -8px, 0); } 90% {  transform:translate3d(0, 4px, 0); } to {  transform:none; } } .bounceInDownShort { animation-name:bounceInDownShort; } @keyframes bounceInLeftShort { 60%, 75%, 90%, from, to {  animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1); } 0% {  opacity:0;  transform:translate3d(-15px, 0, 0); } 60% {  opacity:1;  transform:translate3d(8px, 0, 0); } 75% {  transform:translate3d(-8px, 0, 0); } 90% {  transform:translate3d(4px, 0, 0); } to {  transform:none; } } .bounceInLeftShort { animation-name:bounceInLeftShort; } @keyframes bounceInRightShort { 60%, 75%, 90%, from, to {  animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1); } from {  opacity:0;  transform:translate3d(15px, 0, 0); } 60% {  opacity:1;  transform:translate3d(-8px, 0, 0); } 75% {  transform:translate3d(8px, 0, 0); } 90% {  transform:translate3d(-4px, 0, 0); } to {  transform:none; } } .bounceInRightShort { animation-name:bounceInRightShort; } @keyframes bounceInUpShort { 60%, 75%, 90%, from, to {  animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1); } from {  opacity:0;  transform:translate3d(0, 15px, 0); } 60% {  opacity:1;  transform:translate3d(0, -8px, 0); } 75% {  transform:translate3d(0, 8px, 0); } 90% {  transform:translate3d(0, -4px, 0); } to {  transform:translate3d(0, 0, 0); } } .bounceInUpShort { animation-name:bounceInUpShort; } @keyframes flipInXShort { from {  transform:perspective(2500px) rotate3d(10, 0, 0, 10deg);  animation-timing-function:ease-in;  opacity:0; } 40% {  transform:perspective(2500px) rotate3d(10, 0, 0, -7deg);  animation-timing-function:ease-in; } 60% {  transform:perspective(2500px) rotate3d(10, 0, 0, 5deg);  opacity:1; } 80% {  transform:perspective(2500px) rotate3d(10, 0, 0, -2deg); } to {  transform:perspective(2500px); } } .flipInXShort { -webkit-backface-visibility:visible !important; backface-visibility:visible !important; animation-name:flipInXShort; } @keyframes flipInYShort { from {  transform:perspective(2500px) rotate3d(0, 1, 0, 10deg);  animation-timing-function:ease-in;  opacity:0; } 40% {  transform:perspective(2500px) rotate3d(0, 1, 0, -7deg);  animation-timing-function:ease-in; } 60% {  transform:perspective(2500px) rotate3d(0, 1, 0, 5deg);  opacity:1; } 80% {  transform:perspective(2500px) rotate3d(0, 1, 0, -2deg); } to {  transform:perspective(2500px); } } .flipInYShort { -webkit-backface-visibility:visible !important; backface-visibility:visible !important; animation-name:flipInYShort; } @keyframes jackInTheBoxShort { from {  opacity:0;  transform:scale(0.98) rotate(3deg);  transform-origin:center bottom; } 50% {  transform:rotate(-2deg); } 70% {  transform:rotate(1deg); } to {  opacity:1;  transform:scale(1); } } .jackInTheBoxShort { animation-name:jackInTheBoxShort; } @keyframes rotateInShort { from {  transform-origin:center;  transform:rotate3d(0, 0, 1, -2deg);  opacity:0; } to {  transform-origin:center;  transform:none;  opacity:1; } } .rotateInShort { animation-name:rotateInShort; } @keyframes rotateInDownLeftShort { from {  transform-origin:left bottom;  transform:rotate3d(0, 0, 1, -2deg);  opacity:0; } to {  transform-origin:left bottom;  transform:none;  opacity:1; } } .rotateInDownLeftShort { animation-name:rotateInDownLeftShort; } @keyframes rotateInDownRightShort { from {  transform-origin:right bottom;  transform:rotate3d(0, 0, 1, 2deg);  opacity:0; } to {  transform-origin:right bottom;  transform:none;  opacity:1; } } .rotateInDownRightShort { animation-name:rotateInDownRightShort; } @keyframes rotateInUpLeftShort { from {  transform-origin:left bottom;  transform:rotate3d(0, 0, 1, 2deg);  opacity:0; } to {  transform-origin:left bottom;  transform:none;  opacity:1; } } .rotateInUpLeftShort { animation-name:rotateInUpLeftShort; } @keyframes rotateInUpRightShort { from {  transform-origin:right bottom;  transform:rotate3d(0, 0, 1, -2deg);  opacity:0; } to {  transform-origin:right bottom;  transform:none;  opacity:1; } } .rotateInUpRightShort { animation-name:rotateInUpRightShort; } .animated { -webkit-animation-duration:1s; -webkit-animation-fill-mode:both; } .animated.infinite { -webkit-animation-iteration-count:infinite; } .animated.hinge { -webkit-animation-duration:2s; } .animated.bounceIn, .animated.bounceOut, .animated.flipOutX, .animated.flipOutY { -webkit-animation-duration:0.75s; } @-webkit-keyframes bounce { 20%, 53%, 80%, from, to {  -webkit-animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);  -webkit-transform:translate3d(0, 0, 0); } 40%, 43% {  -webkit-animation-timing-function:cubic-bezier(  0.755,  0.05,  0.855,  0.06  );  -webkit-transform:translate3d(0, -30px, 0); } 70% {  -webkit-animation-timing-function:cubic-bezier(  0.755,  0.05,  0.855,  0.06  );  -webkit-transform:translate3d(0, -15px, 0); } 90% {  -webkit-transform:translate3d(0, -4px, 0); } } .bounce { -webkit-animation-name:bounce; -webkit-transform-origin:center bottom; } @-webkit-keyframes flash { 50%, from, to {  opacity:1; } 25%, 75% {  opacity:0; } } .flash { -webkit-animation-name:flash; } @-webkit-keyframes pulse { from {  -webkit-transform:scale3d(1, 1, 1); } 50% {  -webkit-transform:scale3d(1.05, 1.05, 1.05); } to {  -webkit-transform:scale3d(1, 1, 1); } } .pulse { -webkit-animation-name:pulse; } @-webkit-keyframes rubberBand { from {  -webkit-transform:scale3d(1, 1, 1); } 30% {  -webkit-transform:scale3d(1.25, 0.75, 1); } 40% {  -webkit-transform:scale3d(0.75, 1.25, 1); } 50% {  -webkit-transform:scale3d(1.15, 0.85, 1); } 65% {  -webkit-transform:scale3d(0.95, 1.05, 1); } 75% {  -webkit-transform:scale3d(1.05, 0.95, 1); } to {  -webkit-transform:scale3d(1, 1, 1); } } .rubberBand { -webkit-animation-name:rubberBand; } @-webkit-keyframes shake { from, to {  -webkit-transform:translate3d(0, 0, 0); } 10%, 30%, 50%, 70%, 90% {  -webkit-transform:translate3d(-10px, 0, 0); } 20%, 40%, 60%, 80% {  -webkit-transform:translate3d(10px, 0, 0); } } .shake { -webkit-animation-name:shake; } @-webkit-keyframes headShake { 0% {  -webkit-transform:translateX(0); } 6.5% {  -webkit-transform:translateX(-6px) rotateY(-9deg); } 18.5% {  -webkit-transform:translateX(5px) rotateY(7deg); } 31.5% {  -webkit-transform:translateX(-3px) rotateY(-5deg); } 43.5% {  -webkit-transform:translateX(2px) rotateY(3deg); } 50% {  -webkit-transform:translateX(0); } } .headShake { -webkit-animation-timing-function:ease-in-out; -webkit-animation-name:headShake; } @-webkit-keyframes swing { 20% {  -webkit-transform:rotate3d(0, 0, 1, 15deg); } 40% {  -webkit-transform:rotate3d(0, 0, 1, -10deg); } 60% {  -webkit-transform:rotate3d(0, 0, 1, 5deg); } 80% {  -webkit-transform:rotate3d(0, 0, 1, -5deg); } to {  -webkit-transform:rotate3d(0, 0, 1, 0deg); } } .swing { -webkit-transform-origin:top center; -webkit-animation-name:swing; } @-webkit-keyframes tada { from {  -webkit-transform:scale3d(1, 1, 1); } 10%, 20% {  -webkit-transform:scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); } 30%, 50%, 70%, 90% {  -webkit-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); } to {  -webkit-transform:scale3d(1, 1, 1); } } .tada { -webkit-animation-name:tada; } @-webkit-keyframes wobble { from {  -webkit-transform:none; } 15% {  -webkit-transform:translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); } 30% {  -webkit-transform:translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); } 45% {  -webkit-transform:translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); } 60% {  -webkit-transform:translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); } 75% {  -webkit-transform:translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); } to {  -webkit-transform:none; } } .wobble { -webkit-animation-name:wobble; } @-webkit-keyframes jello { 11.1%, from, to {  -webkit-transform:none; } 22.2% {  -webkit-transform:skewX(-12.5deg) skewY(-12.5deg); } 33.3% {  -webkit-transform:skewX(6.25deg) skewY(6.25deg); } 44.4% {  -webkit-transform:skewX(-3.125deg) skewY(-3.125deg); } 55.5% {  -webkit-transform:skewX(1.5625deg) skewY(1.5625deg); } 66.6% {  -webkit-transform:skewX(-0.78125deg) skewY(-0.78125deg); } 77.7% {  -webkit-transform:skewX(0.390625deg) skewY(0.390625deg); } 88.8% {  -webkit-transform:skewX(-0.1953125deg) skewY(-0.1953125deg); } } .jello { -webkit-animation-name:jello; -webkit-transform-origin:center; } @-webkit-keyframes bounceIn { 20%, 40%, 60%, 80%, from, to {  -webkit-animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1); } 0% {  opacity:0;  -webkit-transform:scale3d(0.3, 0.3, 0.3); } 20% {  -webkit-transform:scale3d(1.1, 1.1, 1.1); } 40% {  -webkit-transform:scale3d(0.9, 0.9, 0.9); } 60% {  opacity:1;  -webkit-transform:scale3d(1.03, 1.03, 1.03); } 80% {  -webkit-transform:scale3d(0.97, 0.97, 0.97); } to {  opacity:1;  -webkit-transform:scale3d(1, 1, 1); } } .bounceIn { -webkit-animation-name:bounceIn; } @-webkit-keyframes bounceInDown { 60%, 75%, 90%, from, to {  -webkit-animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1); } 0% {  opacity:0;  -webkit-transform:translate3d(0, -3000px, 0); } 60% {  opacity:1;  -webkit-transform:translate3d(0, 25px, 0); } 75% {  -webkit-transform:translate3d(0, -10px, 0); } 90% {  -webkit-transform:translate3d(0, 5px, 0); } to {  -webkit-transform:none; } } .bounceInDown { -webkit-animation-name:bounceInDown; } @-webkit-keyframes bounceInLeft { 60%, 75%, 90%, from, to {  -webkit-animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1); } 0% {  opacity:0;  -webkit-transform:translate3d(-3000px, 0, 0); } 60% {  opacity:1;  -webkit-transform:translate3d(25px, 0, 0); } 75% {  -webkit-transform:translate3d(-10px, 0, 0); } 90% {  -webkit-transform:translate3d(5px, 0, 0); } to {  -webkit-transform:none; } } .bounceInLeft { -webkit-animation-name:bounceInLeft; } @-webkit-keyframes bounceInRight { 60%, 75%, 90%, from, to {  -webkit-animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1); } from {  opacity:0;  -webkit-transform:translate3d(3000px, 0, 0); } 60% {  opacity:1;  -webkit-transform:translate3d(-25px, 0, 0); } 75% {  -webkit-transform:translate3d(10px, 0, 0); } 90% {  -webkit-transform:translate3d(-5px, 0, 0); } to {  -webkit-transform:none; } } .bounceInRight { -webkit-animation-name:bounceInRight; } @-webkit-keyframes bounceInUp { 60%, 75%, 90%, from, to {  -webkit-animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1); } from {  opacity:0;  -webkit-transform:translate3d(0, 3000px, 0); } 60% {  opacity:1;  -webkit-transform:translate3d(0, -20px, 0); } 75% {  -webkit-transform:translate3d(0, 10px, 0); } 90% {  -webkit-transform:translate3d(0, -5px, 0); } to {  -webkit-transform:translate3d(0, 0, 0); } } .bounceInUp { -webkit-animation-name:bounceInUp; } @-webkit-keyframes bounceOut { 20% {  -webkit-transform:scale3d(0.9, 0.9, 0.9); } 50%, 55% {  opacity:1;  -webkit-transform:scale3d(1.1, 1.1, 1.1); } to {  opacity:0;  -webkit-transform:scale3d(0.3, 0.3, 0.3); } } .bounceOut { -webkit-animation-name:bounceOut; } @-webkit-keyframes bounceOutDown { 20% {  -webkit-transform:translate3d(0, 10px, 0); } 40%, 45% {  opacity:1;  -webkit-transform:translate3d(0, -20px, 0); } to {  opacity:0;  -webkit-transform:translate3d(0, 2000px, 0); } } .bounceOutDown { -webkit-animation-name:bounceOutDown; } @-webkit-keyframes bounceOutLeft { 20% {  opacity:1;  -webkit-transform:translate3d(20px, 0, 0); } to {  opacity:0;  -webkit-transform:translate3d(-2000px, 0, 0); } } .bounceOutLeft { -webkit-animation-name:bounceOutLeft; } @-webkit-keyframes bounceOutRight { 20% {  opacity:1;  -webkit-transform:translate3d(-20px, 0, 0); } to {  opacity:0;  -webkit-transform:translate3d(2000px, 0, 0); } } .bounceOutRight { -webkit-animation-name:bounceOutRight; } @-webkit-keyframes bounceOutUp { 20% {  -webkit-transform:translate3d(0, -10px, 0); } 40%, 45% {  opacity:1;  -webkit-transform:translate3d(0, 20px, 0); } to {  opacity:0;  -webkit-transform:translate3d(0, -2000px, 0); } } .bounceOutUp { -webkit-animation-name:bounceOutUp; } @-webkit-keyframes fadeIn { from {  opacity:0; } to {  opacity:1; } } .fadeIn { -webkit-animation-name:fadeIn; } @-webkit-keyframes fadeInDown { from {  opacity:0;  -webkit-transform:translate3d(0, -40px, 0); } to {  opacity:1;  -webkit-transform:none; } } .fadeInDown { -webkit-animation-name:fadeInDown; } @-webkit-keyframes fadeInDownBig { from {  opacity:0;  -webkit-transform:translate3d(0, -1000px, 0); } to {  opacity:1;  -webkit-transform:none; } } .fadeInDownBig { -webkit-animation-name:fadeInDownBig; } @-webkit-keyframes fadeInLeft { from {  opacity:0;  -webkit-transform:translate3d(-40px, 0, 0); } to {  opacity:1;  -webkit-transform:none; } } .fadeInLeft { -webkit-animation-name:fadeInLeft; } @-webkit-keyframes fadeInLeftBig { from {  opacity:0;  -webkit-transform:translate3d(-1000px, 0, 0); } to {  opacity:1;  -webkit-transform:none; } } .fadeInLeftBig { -webkit-animation-name:fadeInLeftBig; } @-webkit-keyframes fadeInRight { from {  opacity:0;  -webkit-transform:translate3d(60px, 0, 0); } to {  opacity:1;  -webkit-transform:none; } } .fadeInRight { -webkit-animation-name:fadeInRight; } @-webkit-keyframes fadeInRightBig { from {  opacity:0;  -webkit-transform:translate3d(1000px, 0, 0); } to {  opacity:1;  -webkit-transform:none; } } .fadeInRightBig { -webkit-animation-name:fadeInRightBig; } @-webkit-keyframes fadeInUp { from {  opacity:0;  -webkit-transform:translate3d(0, 40px, 0); } to {  opacity:1;  -webkit-transform:none; } } .fadeInUp { -webkit-animation-name:fadeInUp; } @-webkit-keyframes fadeInUpBig { from {  opacity:0;  -webkit-transform:translate3d(0, 1000px, 0); } to {  opacity:1;  -webkit-transform:none; } } .fadeInUpBig { -webkit-animation-name:fadeInUpBig; } @-webkit-keyframes fadeOut { from {  opacity:1; } to {  opacity:0; } } .fadeOut { -webkit-animation-name:fadeOut; } @-webkit-keyframes fadeOutDown { from {  opacity:1; } to {  opacity:0;  -webkit-transform:translate3d(0, 60px, 0); } } .fadeOutDown { -webkit-animation-name:fadeOutDown; } @-webkit-keyframes fadeOutDownBig { from {  opacity:1; } to {  opacity:0;  -webkit-transform:translate3d(0, 1000px, 0); } } .fadeOutDownBig { -webkit-animation-name:fadeOutDownBig; } @-webkit-keyframes fadeOutLeft { from {  opacity:1; } to {  opacity:0;  -webkit-transform:translate3d(-60px, 0, 0); } } .fadeOutLeft { -webkit-animation-name:fadeOutLeft; } @-webkit-keyframes fadeOutLeftBig { from {  opacity:1; } to {  opacity:0;  -webkit-transform:translate3d(-1000px, 0, 0); } } .fadeOutLeftBig { -webkit-animation-name:fadeOutLeftBig; } @-webkit-keyframes fadeOutRight { from {  opacity:1; } to {  opacity:0;  -webkit-transform:translate3d(60px, 0, 0); } } .fadeOutRight { -webkit-animation-name:fadeOutRight; } @-webkit-keyframes fadeOutRightBig { from {  opacity:1; } to {  opacity:0;  -webkit-transform:translate3d(1000px, 0, 0); } } .fadeOutRightBig { -webkit-animation-name:fadeOutRightBig; } @-webkit-keyframes fadeOutUp { from {  opacity:1; } to {  opacity:0;  -webkit-transform:translate3d(0, -60px, 0); } } .fadeOutUp { -webkit-animation-name:fadeOutUp; } @-webkit-keyframes fadeOutUpBig { from {  opacity:1; } to {  opacity:0;  -webkit-transform:translate3d(0, -1000px, 0); } } .fadeOutUpBig { -webkit-animation-name:fadeOutUpBig; } @-webkit-keyframes flip { from {  -webkit-transform:perspective(400px) rotate3d(0, 1, 0, -360deg);  -webkit-animation-timing-function:ease-out; } 40% {  -webkit-transform:perspective(400px) translate3d(0, 0, 150px)  rotate3d(0, 1, 0, -190deg);  -webkit-animation-timing-function:ease-out; } 50% {  -webkit-transform:perspective(400px) translate3d(0, 0, 150px)  rotate3d(0, 1, 0, -170deg);  -webkit-animation-timing-function:ease-in; } 80% {  -webkit-transform:perspective(400px) scale3d(0.95, 0.95, 0.95);  -webkit-animation-timing-function:ease-in; } to {  -webkit-transform:perspective(400px);  -webkit-animation-timing-function:ease-in; } } .animated.flip { -webkit-backface-visibility:visible; backface-visibility:visible; -webkit-animation-name:flip; } @-webkit-keyframes flipInX { from {  -webkit-transform:perspective(400px) rotate3d(1, 0, 0, 90deg);  -webkit-animation-timing-function:ease-in;  opacity:0; } 40% {  -webkit-transform:perspective(400px) rotate3d(1, 0, 0, -20deg);  -webkit-animation-timing-function:ease-in; } 60% {  -webkit-transform:perspective(400px) rotate3d(1, 0, 0, 10deg);  opacity:1; } 80% {  -webkit-transform:perspective(400px) rotate3d(1, 0, 0, -5deg); } to {  -webkit-transform:perspective(400px); } } .flipInX { -webkit-backface-visibility:visible !important; backface-visibility:visible !important; -webkit-animation-name:flipInX; } @-webkit-keyframes flipInY { from {  -webkit-transform:perspective(400px) rotate3d(0, 1, 0, 90deg);  -webkit-animation-timing-function:ease-in;  opacity:0; } 40% {  -webkit-transform:perspective(400px) rotate3d(0, 1, 0, -20deg);  -webkit-animation-timing-function:ease-in; } 60% {  -webkit-transform:perspective(400px) rotate3d(0, 1, 0, 10deg);  opacity:1; } 80% {  -webkit-transform:perspective(400px) rotate3d(0, 1, 0, -5deg); } to {  -webkit-transform:perspective(400px); } } .flipInY { -webkit-backface-visibility:visible !important; backface-visibility:visible !important; -webkit-animation-name:flipInY; } @-webkit-keyframes flipOutX { from {  -webkit-transform:perspective(400px); } 30% {  -webkit-transform:perspective(400px) rotate3d(1, 0, 0, -20deg);  opacity:1; } to {  -webkit-transform:perspective(400px) rotate3d(1, 0, 0, 90deg);  opacity:0; } } .flipOutX { -webkit-animation-name:flipOutX; -webkit-backface-visibility:visible !important; backface-visibility:visible !important; } @-webkit-keyframes flipOutY { from {  -webkit-transform:perspective(400px); } 30% {  -webkit-transform:perspective(400px) rotate3d(0, 1, 0, -15deg);  opacity:1; } to {  -webkit-transform:perspective(400px) rotate3d(0, 1, 0, 90deg);  opacity:0; } } .flipOutY { -webkit-backface-visibility:visible !important; backface-visibility:visible !important; -webkit-animation-name:flipOutY; } @-webkit-keyframes lightSpeedIn { from {  -webkit-transform:translate3d(100%, 0, 0) skewX(-30deg);  opacity:0; } 60% {  -webkit-transform:skewX(20deg);  opacity:1; } 80% {  -webkit-transform:skewX(-5deg);  opacity:1; } to {  -webkit-transform:none;  opacity:1; } } .lightSpeedIn { -webkit-animation-name:lightSpeedIn; -webkit-animation-timing-function:ease-out; } @-webkit-keyframes lightSpeedOut { from {  opacity:1; } to {  -webkit-transform:translate3d(100%, 0, 0) skewX(30deg);  opacity:0; } } .lightSpeedOut { -webkit-animation-name:lightSpeedOut; -webkit-animation-timing-function:ease-in; } @-webkit-keyframes rotateIn { from {  -webkit-transform-origin:center;  -webkit-transform:rotate3d(0, 0, 1, -200deg);  opacity:0; } to {  -webkit-transform-origin:center;  -webkit-transform:none;  opacity:1; } } .rotateIn { -webkit-animation-name:rotateIn; } @-webkit-keyframes rotateInDownLeft { from {  -webkit-transform-origin:left bottom;  -webkit-transform:rotate3d(0, 0, 1, -10deg);  opacity:0; } to {  -webkit-transform-origin:left bottom;  -webkit-transform:none;  opacity:1; } } .rotateInDownLeft { -webkit-animation-name:rotateInDownLeft; } @-webkit-keyframes rotateInDownRight { from {  -webkit-transform-origin:right bottom;  -webkit-transform:rotate3d(0, 0, 1, 10deg);  opacity:0; } to {  -webkit-transform-origin:right bottom;  -webkit-transform:none;  opacity:1; } } .rotateInDownRight { -webkit-animation-name:rotateInDownRight; } @-webkit-keyframes rotateInUpLeft { from {  -webkit-transform-origin:left bottom;  -webkit-transform:rotate3d(0, 0, 1, 10deg);  opacity:0; } to {  -webkit-transform-origin:left bottom;  -webkit-transform:none;  opacity:1; } } .rotateInUpLeft { -webkit-animation-name:rotateInUpLeft; } @-webkit-keyframes rotateInUpRight { from {  -webkit-transform-origin:right bottom;  -webkit-transform:rotate3d(0, 0, 1, -10deg);  opacity:0; } to {  -webkit-transform-origin:right bottom;  -webkit-transform:none;  opacity:1; } } .rotateInUpRight { -webkit-animation-name:rotateInUpRight; } @-webkit-keyframes rotateOut { from {  -webkit-transform-origin:center;  opacity:1; } to {  -webkit-transform-origin:center;  -webkit-transform:rotate3d(0, 0, 1, 200deg);  opacity:0; } } .rotateOut { -webkit-animation-name:rotateOut; } @-webkit-keyframes rotateOutDownLeft { from {  -webkit-transform-origin:left bottom;  opacity:1; } to {  -webkit-transform-origin:left bottom;  -webkit-transform:rotate3d(0, 0, 1, 10deg);  opacity:0; } } .rotateOutDownLeft { -webkit-animation-name:rotateOutDownLeft; } @-webkit-keyframes rotateOutDownRight { from {  -webkit-transform-origin:right bottom;  opacity:1; } to {  -webkit-transform-origin:right bottom;  -webkit-transform:rotate3d(0, 0, 1, -10deg);  opacity:0; } } .rotateOutDownRight { -webkit-animation-name:rotateOutDownRight; } @-webkit-keyframes rotateOutUpLeft { from {  -webkit-transform-origin:left bottom;  opacity:1; } to {  -webkit-transform-origin:left bottom;  -webkit-transform:rotate3d(0, 0, 1, -10deg);  opacity:0; } } .rotateOutUpLeft { -webkit-animation-name:rotateOutUpLeft; } @-webkit-keyframes rotateOutUpRight { from {  -webkit-transform-origin:right bottom;  opacity:1; } to {  -webkit-transform-origin:right bottom;  -webkit-transform:rotate3d(0, 0, 1, 10deg);  opacity:0; } } .rotateOutUpRight { -webkit-animation-name:rotateOutUpRight; } @-webkit-keyframes hinge { 0% {  -webkit-transform-origin:top left;  -webkit-animation-timing-function:ease-in-out; } 20%, 60% {  -webkit-transform:rotate3d(0, 0, 1, 80deg);  -webkit-transform-origin:top left;  -webkit-animation-timing-function:ease-in-out; } 40%, 80% {  -webkit-transform:rotate3d(0, 0, 1, 60deg);  -webkit-transform-origin:top left;  -webkit-animation-timing-function:ease-in-out;  opacity:1; } to {  -webkit-transform:translate3d(0, 700px, 0);  opacity:0; } } .hinge { -webkit-animation-name:hinge; } @-webkit-keyframes jackInTheBox { from {  opacity:0;  -webkit-transform:scale(0.1) rotate(30deg);  -webkit-transform-origin:center bottom; } 50% {  -webkit-transform:rotate(-10deg); } 70% {  -webkit-transform:rotate(3deg); } to {  opacity:1;  -webkit-transform:scale(1); } } .jackInTheBox { -webkit-animation-name:jackInTheBox; } @-webkit-keyframes rollIn { from {  opacity:0;  -webkit-transform:translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); } to {  opacity:1;  -webkit-transform:none; } } .rollIn { -webkit-animation-name:rollIn; } @-webkit-keyframes rollOut { from {  opacity:1; } to {  opacity:0;  -webkit-transform:translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); } } .rollOut { -webkit-animation-name:rollOut; } @-webkit-keyframes zoomIn { from {  opacity:0;  -webkit-transform:scale3d(0.8, 0.8, 0.8); } 50% {  opacity:1; } } .zoomIn { -webkit-animation-name:zoomIn; } @-webkit-keyframes zoomInDown { from {  opacity:0;  -webkit-transform:scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);  -webkit-animation-timing-function:cubic-bezier(  0.55,  0.055,  0.675,  0.19  ); } 60% {  opacity:1;  -webkit-transform:scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);  -webkit-animation-timing-function:cubic-bezier(0.175, 0.885, 0.32, 1); } } .zoomInDown { -webkit-animation-name:zoomInDown; } @-webkit-keyframes zoomInLeft { from {  opacity:0;  -webkit-transform:scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);  -webkit-animation-timing-function:cubic-bezier(  0.55,  0.055,  0.675,  0.19  ); } 60% {  opacity:1;  -webkit-transform:scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);  -webkit-animation-timing-function:cubic-bezier(0.175, 0.885, 0.32, 1); } } .zoomInLeft { -webkit-animation-name:zoomInLeft; } @-webkit-keyframes zoomInRight { from {  opacity:0;  -webkit-transform:scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);  -webkit-animation-timing-function:cubic-bezier(  0.55,  0.055,  0.675,  0.19  ); } 60% {  opacity:1;  -webkit-transform:scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);  -webkit-animation-timing-function:cubic-bezier(0.175, 0.885, 0.32, 1); } } .zoomInRight { -webkit-animation-name:zoomInRight; } @-webkit-keyframes zoomInUp { from {  opacity:0;  -webkit-transform:scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);  -webkit-animation-timing-function:cubic-bezier(  0.55,  0.055,  0.675,  0.19  ); } 60% {  opacity:1;  -webkit-transform:scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);  -webkit-animation-timing-function:cubic-bezier(0.175, 0.885, 0.32, 1); } } .zoomInUp { -webkit-animation-name:zoomInUp; } @-webkit-keyframes zoomOut { from {  opacity:1; } 50% {  opacity:0;  -webkit-transform:scale3d(0.8, 0.8, 0.8); } to {  opacity:0; } } .zoomOut { -webkit-animation-name:zoomOut; } @-webkit-keyframes zoomOutDown { 40% {  opacity:1;  -webkit-transform:scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);  -webkit-animation-timing-function:cubic-bezier(  0.55,  0.055,  0.675,  0.19  ); } to {  opacity:0;  -webkit-transform:scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);  -webkit-transform-origin:center bottom;  -webkit-animation-timing-function:cubic-bezier(0.175, 0.885, 0.32, 1); } } .zoomOutDown { -webkit-animation-name:zoomOutDown; } @-webkit-keyframes zoomOutLeft { 40% {  opacity:1;  -webkit-transform:scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); } to {  opacity:0;  -webkit-transform:scale(0.1) translate3d(-2000px, 0, 0);  -webkit-transform-origin:left center; } } .zoomOutLeft { -webkit-animation-name:zoomOutLeft; } @-webkit-keyframes zoomOutRight { 40% {  opacity:1;  -webkit-transform:scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); } to {  opacity:0;  -webkit-transform:scale(0.1) translate3d(2000px, 0, 0);  -webkit-transform-origin:right center; } } .zoomOutRight { -webkit-animation-name:zoomOutRight; } @-webkit-keyframes zoomOutUp { 40% {  opacity:1;  -webkit-transform:scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);  -webkit-animation-timing-function:cubic-bezier(  0.55,  0.055,  0.675,  0.19  ); } to {  opacity:0;  -webkit-transform:scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);  -webkit-transform-origin:center bottom;  -webkit-animation-timing-function:cubic-bezier(0.175, 0.885, 0.32, 1); } } .zoomOutUp { -webkit-animation-name:zoomOutUp; } @-webkit-keyframes slideInDown { from {  -webkit-transform:translate3d(0, -100%, 0);  visibility:visible; } to {  -webkit-transform:translate3d(0, 0, 0); } } .slideInDown { -webkit-animation-name:slideInDown; } @-webkit-keyframes slideInLeft { from {  -webkit-transform:translate3d(-100%, 0, 0);  visibility:visible; } to {  -webkit-transform:translate3d(0, 0, 0); } } .slideInLeft { -webkit-animation-name:slideInLeft; } @-webkit-keyframes slideInRight { from {  -webkit-transform:translate3d(100%, 0, 0);  visibility:visible; } to {  -webkit-transform:translate3d(0, 0, 0); } } .slideInRight { -webkit-animation-name:slideInRight; } @-webkit-keyframes slideInUp { from {  -webkit-transform:translate3d(0, 100%, 0);  visibility:visible; } to {  -webkit-transform:translate3d(0, 0, 0); } } .slideInUp { -webkit-animation-name:slideInUp; } @-webkit-keyframes slideOutDown { from {  -webkit-transform:translate3d(0, 0, 0); } to {  visibility:hidden;  -webkit-transform:translate3d(0, 100%, 0); } } .slideOutDown { -webkit-animation-name:slideOutDown; } @-webkit-keyframes slideOutLeft { from {  -webkit-transform:translate3d(0, 0, 0); } to {  visibility:hidden;  -webkit-transform:translate3d(-100%, 0, 0); } } .slideOutLeft { -webkit-animation-name:slideOutLeft; } @-webkit-keyframes slideOutRight { from {  -webkit-transform:translate3d(0, 0, 0); } to {  visibility:hidden;  -webkit-transform:translate3d(100%, 0, 0); } } .slideOutRight { -webkit-animation-name:slideOutRight; } @-webkit-keyframes slideOutUp { from {  -webkit-transform:translate3d(0, 0, 0); } to {  visibility:hidden;  -webkit-transform:translate3d(0, -100%, 0); } } .slideOutUp { -webkit-animation-name:slideOutUp; } @-webkit-keyframes fadeInUpShort { from {  opacity:0;  -webkit-transform:translate3d(0, 20px, 0); } to {  opacity:1;  -webkit-transform:none; } } .fadeInUpShort { -webkit-animation-name:fadeInUpShort; } @-webkit-keyframes fadeInDownShort { from {  opacity:0;  -webkit-transform:translate3d(0, -20px, 0); } to {  opacity:1;  -webkit-transform:none; } } .fadeInDownShort { -webkit-animation-name:fadeInDownShort; } @-webkit-keyframes fadeInLeftShort { from {  opacity:0;  -webkit-transform:translate3d(-20px, 0, 0); } to {  opacity:1;  -webkit-transform:none; } } .fadeInLeftShort { -webkit-animation-name:fadeInLeftShort; } @-webkit-keyframes fadeInRightShort { from {  opacity:0;  -webkit-transform:translate3d(20px, 0, 0); } to {  opacity:1;  -webkit-transform:none; } } .fadeInRightShort { -webkit-animation-name:fadeInRightShort; } @-webkit-keyframes zoomInShort { from {  opacity:0;  -webkit-transform:scale3d(0.97, 0.97, 0.97); } 50% {  opacity:1; } } .zoomInShort { -webkit-animation-name:zoomInShort; } @-webkit-keyframes bounceInShort { 20%, 40%, 60%, 80%, from, to {  -webkit-animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1); } 0% {  opacity:0;  -webkit-transform:scale3d(0.97, 0.97, 0.97); } 20% {  -webkit-transform:scale3d(1.03, 1.03, 1.03); } 40% {  -webkit-transform:scale3d(0.98, 0.98, 0.98); } 60% {  opacity:1;  -webkit-transform:scale3d(1.02, 1.02, 1.02); } 80% {  -webkit-transform:scale3d(0.99, 0.99, 0.99); } to {  opacity:1;  -webkit-transform:scale3d(1, 1, 1); } } .bounceInShort { -webkit-animation-name:bounceInShort; } @-webkit-keyframes bounceInDownShort { 60%, 75%, 90%, from, to {  -webkit-animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1); } 0% {  opacity:0;  -webkit-transform:translate3d(0, -15px, 0); } 60% {  opacity:1;  -webkit-transform:translate3d(0, 8px, 0); } 75% {  -webkit-transform:translate3d(0, -8px, 0); } 90% {  -webkit-transform:translate3d(0, 4px, 0); } to {  -webkit-transform:none; } } .bounceInDownShort { -webkit-animation-name:bounceInDownShort; } @-webkit-keyframes bounceInLeftShort { 60%, 75%, 90%, from, to {  -webkit-animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1); } 0% {  opacity:0;  -webkit-transform:translate3d(-15px, 0, 0); } 60% {  opacity:1;  -webkit-transform:translate3d(8px, 0, 0); } 75% {  -webkit-transform:translate3d(-8px, 0, 0); } 90% {  -webkit-transform:translate3d(4px, 0, 0); } to {  -webkit-transform:none; } } .bounceInLeftShort { -webkit-animation-name:bounceInLeftShort; } @-webkit-keyframes bounceInRightShort { 60%, 75%, 90%, from, to {  -webkit-animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1); } from {  opacity:0;  -webkit-transform:translate3d(15px, 0, 0); } 60% {  opacity:1;  -webkit-transform:translate3d(-8px, 0, 0); } 75% {  -webkit-transform:translate3d(8px, 0, 0); } 90% {  -webkit-transform:translate3d(-4px, 0, 0); } to {  -webkit-transform:none; } } .bounceInRightShort { -webkit-animation-name:bounceInRightShort; } @-webkit-keyframes bounceInUpShort { 60%, 75%, 90%, from, to {  -webkit-animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1); } from {  opacity:0;  -webkit-transform:translate3d(0, 15px, 0); } 60% {  opacity:1;  -webkit-transform:translate3d(0, -8px, 0); } 75% {  -webkit-transform:translate3d(0, 8px, 0); } 90% {  -webkit-transform:translate3d(0, -4px, 0); } to {  -webkit-transform:translate3d(0, 0, 0); } } .bounceInUpShort { -webkit-animation-name:bounceInUpShort; } @-webkit-keyframes flipInXShort { from {  -webkit-transform:perspective(2500px) rotate3d(10, 0, 0, 10deg);  -webkit-animation-timing-function:ease-in;  opacity:0; } 40% {  -webkit-transform:perspective(2500px) rotate3d(10, 0, 0, -7deg);  -webkit-animation-timing-function:ease-in; } 60% {  -webkit-transform:perspective(2500px) rotate3d(10, 0, 0, 5deg);  opacity:1; } 80% {  -webkit-transform:perspective(2500px) rotate3d(10, 0, 0, -2deg); } to {  -webkit-transform:perspective(2500px); } } .flipInXShort { -webkit-backface-visibility:visible !important; backface-visibility:visible !important; -webkit-animation-name:flipInXShort; } @-webkit-keyframes flipInYShort { from {  -webkit-transform:perspective(2500px) rotate3d(0, 1, 0, 10deg);  -webkit-animation-timing-function:ease-in;  opacity:0; } 40% {  -webkit-transform:perspective(2500px) rotate3d(0, 1, 0, -7deg);  -webkit-animation-timing-function:ease-in; } 60% {  -webkit-transform:perspective(2500px) rotate3d(0, 1, 0, 5deg);  opacity:1; } 80% {  -webkit-transform:perspective(2500px) rotate3d(0, 1, 0, -2deg); } to {  -webkit-transform:perspective(2500px); } } .flipInYShort { -webkit-backface-visibility:visible !important; backface-visibility:visible !important; -webkit-animation-name:flipInYShort; } @-webkit-keyframes jackInTheBoxShort { from {  opacity:0;  -webkit-transform:scale(0.98) rotate(3deg);  -webkit-transform-origin:center bottom; } 50% {  -webkit-transform:rotate(-2deg); } 70% {  -webkit-transform:rotate(1deg); } to {  opacity:1;  -webkit-transform:scale(1); } } .jackInTheBoxShort { -webkit-animation-name:jackInTheBoxShort; } @-webkit-keyframes rotateInShort { from {  -webkit-transform-origin:center;  -webkit-transform:rotate3d(0, 0, 1, -2deg);  opacity:0; } to {  -webkit-transform-origin:center;  -webkit-transform:none;  opacity:1; } } .rotateInShort { -webkit-animation-name:rotateInShort; } @-webkit-keyframes rotateInDownLeftShort { from {  -webkit-transform-origin:left bottom;  -webkit-transform:rotate3d(0, 0, 1, -2deg);  opacity:0; } to {  -webkit-transform-origin:left bottom;  -webkit-transform:none;  opacity:1; } } .rotateInDownLeftShort { -webkit-animation-name:rotateInDownLeftShort; } @-webkit-keyframes rotateInDownRightShort { from {  -webkit-transform-origin:right bottom;  -webkit-transform:rotate3d(0, 0, 1, 2deg);  opacity:0; } to {  -webkit-transform-origin:right bottom;  -webkit-transform:none;  opacity:1; } } .rotateInDownRightShort { -webkit-animation-name:rotateInDownRightShort; } @-webkit-keyframes rotateInUpLeftShort { from {  -webkit-transform-origin:left bottom;  -webkit-transform:rotate3d(0, 0, 1, 2deg);  opacity:0; } to {  -webkit-transform-origin:left bottom;  -webkit-transform:none;  opacity:1; } } .rotateInUpLeftShort { -webkit-animation-name:rotateInUpLeftShort; } @-webkit-keyframes rotateInUpRightShort { from {  -webkit-transform-origin:right bottom;  -webkit-transform:rotate3d(0, 0, 1, -2deg);  opacity:0; } to {  -webkit-transform-origin:right bottom;  -webkit-transform:none;  opacity:1; } } .rotateInUpRightShort { -webkit-animation-name:rotateInUpRightShort; }