/*动画库*/ /*请稍等....等待loading*/ .pleaseWait{ display: inline-block; position: relative; vertical-align: middle; font-size: 14px; min-width: 32px; min-height: 20px; } .pleaseWait:before{ content: "······"; display: inline-block; font-size: 14px; font-weight: 700; position: absolute; text-align: left; top: 0; bottom: 0; left:0; margin: auto 0; overflow: hidden; white-space:nowrap; animation: loadingdot 1.75s linear infinite; } @keyframes loadingdot{ 0%{width: 0px;} 30%{width: 14px;} 60%{width: 28px;} 100%{width: 32px;} } /*a_flicker 动画-关键帧-闪烁*/ .a_flicker{animation:flicker 1s infinite ease-in-out; -webkit-animation:flicker 1s infinite ease-in-out; -moz-animation:flicker 1s infinite ease-in-out; -o-animation:flicker 1s infinite ease-in-out; -ms-animation:flicker 1s infinite ease-in-out;color:red;} @keyframes flicker{ from{ opacity: 0; } to{ opacity: 1; } } @-webkit-keyframes flicker{ from{ opacity: 0; } to{ opacity: 1; } } @-moz-keyframes flicker{ from{ opacity: 0; } to{ opacity: 1; } } @-o-keyframes flicker{ from{ opacity: 0; } to{ opacity: 1; } } @-ms-keyframes flicker { from{ opacity: 0; } to{ opacity: 1; } } /*衬托线*/ a.a_uline:after { content:""; display: block; position: relative; padding: 0; width: 100%; height: 3px; bottom: 100%; right: 0; top:3px; overflow:none; background-color: #292828; -webkit-transition: all 0.25s ease-in-out 0.1s; -moz-transition: all 0.25s ease-in-out 0.1s; -ms-transition: all 0.25s ease-in-out 0.1s; transition: all 0.25s ease-in-out 0.1s; -webkit-transform: scaleX(0); -moz-transform: scaleX(0); -ms-transform: scaleX(0); transform: scaleX(0); } a.a_uline:hover:after{ overflow:none; -webkit-transform: scaleX(1); -moz-transform: scaleX(1); -ms-transform: scaleX(1); transform: scaleX(1); } /*自旋转 可调节*/ @-webkit-keyframes rotating{from{-webkit-transform:rotate(0deg)} to{-webkit-transform:rotate(360deg)} } @keyframes rotating{from{transform:rotate(0deg)} to{transform:rotate(360deg)} } @-moz-keyframes rotating{from{-moz-transform:rotate(0deg)} to{-moz-transform:rotate(360deg)} } .a_rotate{-webkit-animation:rotating 1.2s linear infinite;-moz-animation:rotating 1.2s linear infinite;-o-animation:rotating 1.2s linear infinite;animation:rotating 1.2s linear infinite;} .a_text_shine{ display: inline-block; color:rgba(255,255,255,0.2); background:-webkit-linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 6%, rgba(255,255,255,1) 10%, rgba(255,255,255,0) 16% ) no-repeat; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-color:rgb(102, 102, 102); animation: move 1.75s linear infinite; } @keyframes move{ 0%{background-position:0 0;} 100%{background-position:300px 0;} } /*发光字 请把底色调暗*/ .a_pan_shine{ display: inline-block; background:-webkit-linear-gradient(-30deg, rgba(255,255,255,0) 10%, rgba(253,255,255,1) 18%, rgba(255,255,255,1) 22%, rgba(255,255,255,0) 30% ) no-repeat; animation: move 1.75s linear infinite; } @keyframes move{ 0%{background-position:0 0;} 100%{background-position:300px 0;} } /*logo小图案不规则移动*/ .a_logomove{ -webkit-animation:logomove 5s infinite alternate both; -moz-animation:logomove 5s infinite alternate both; -ms-animation:logomove 5s infinite alternate both; animation:logomove 5s infinite alternate both} @keyframes logomove{ 0%{transform:translate(-50px,20px);} 50%{transform:translate(0px);} 100%{transform:translate(50px,10px);} } @-webkit-keyframes logomove{ 0%{transform:translate(-50px,20px);} 50%{transform:translate(0px);} 100%{transform:translate(50px,10px);} } @-moz-keyframes logomove{ 0%{transform:translate(-50px,20px);} 50%{transform:translate(0px);} 100%{transform:translate(50px,10px);} } @-ms-keyframes logomove{ 0%{transform:translate(-50px,20px);} 50%{transform:translate(0px);} 100%{transform:translate(50px,10px);} } /*拓展shake的横竖slow shake-horizontal-slow shake-vertical-slow * */ @keyframes verical-slow { 2% { transform: translate(0, 1.5px) ; } 4% { transform: translate(0, -1.5px) ; } 6% { transform: translate(0, 1.5px) ; } 8% { transform: translate(0, -1.5px) ; } 10% { transform: translate(0, 2.5px) ; } 12% { transform: translate(0, -0.5px) ; } 14% { transform: translate(0, -1.5px) ; } 16% { transform: translate(0, -0.5px) ; } 18% { transform: translate(0, 0.5px) ; } 20% { transform: translate(0, -1.5px) ; } 22% { transform: translate(0, 0.5px) ; } 24% { transform: translate(0, 1.5px) ; } 26% { transform: translate(0, 0.5px) ; } 28% { transform: translate(0, 0.5px) ; } 30% { transform: translate(0, -0.5px) ; } 32% { transform: translate(0, 1.5px) ; } 34% { transform: translate(0, 1.5px) ; } 36% { transform: translate(0, -1.5px) ; } 38% { transform: translate(0, 1.5px) ; } 40% { transform: translate(0, -0.5px) ; } 42% { transform: translate(0, 2.5px) ; } 44% { transform: translate(0, 1.5px) ; } 46% { transform: translate(0, -1.5px) ; } 48% { transform: translate(0, -0.5px) ; } 50% { transform: translate(0, 0.5px) ; } 52% { transform: translate(0, 2.5px) ; } 54% { transform: translate(0, -1.5px) ; } 56% { transform: translate(0, 2.5px) ; } 58% { transform: translate(0, 0.5px) ; } 60% { transform: translate(0, 2.5px) ; } 62% { transform: translate(0, -0.5px) ; } 64% { transform: translate(0, -0.5px) ; } 66% { transform: translate(0, 1.5px) ; } 68% { transform: translate(0, -1.5px) ; } 70% { transform: translate(0, 1.5px) ; } 72% { transform: translate(0, 2.5px) ; } 74% { transform: translate(0, -0.5px) ; } 76% { transform: translate(0, -0.5px) ; } 78% { transform: translate(0, -0.5px) ; } 80% { transform: translate(0, 1.5px) ; } 82% { transform: translate(0, -0.5px) ; } 84% { transform: translate(0, 1.5px) ; } 86% { transform: translate(0, -1.5px) ; } 88% { transform: translate(0, -0.5px) ; } 90% { transform: translate(0, 2.5px) ; } 92% { transform: translate(0, 0.5px) ; } 94% { transform: translate(0, 2.5px) ; } 96% { transform: translate(0, -0.5px) ; } 98% { transform: translate(0, -1.5px) ; } 0%, 100% { transform: translate(0, 0); } } @keyframes shake-horizontal-slow{ 2% { transform: translate( 1.5px,0) ; } 4% { transform: translate(-1.5px, 0) ; } 6% { transform: translate(1.5px, 0) ; } 8% { transform: translate(-1.5px, 0) ; } 10% { transform: translate(2.5px, 0) ; } 12% { transform: translate(-0.5px, 0) ; } 14% { transform: translate(-1.5px, 0) ; } 16% { transform: translate(-0.5px, 0) ; } 18% { transform: translate(0.5px, 0) ; } 20% { transform: translate(-1.5px, 0) ; } 22% { transform: translate(0.5px, 0) ; } 24% { transform: translate(1.5px, 0) ; } 26% { transform: translate(0.5px, 0) ; } 28% { transform: translate(0.5px, 0) ; } 30% { transform: translate(-0.5px, 0) ; } 32% { transform: translate(1.5px, 0) ; } 34% { transform: translate(1.5px, 0) ; } 36% { transform: translate(-1.5px, 0) ; } 38% { transform: translate(1.5px, 0) ; } 40% { transform: translate(0, -0.5px, 0) ; } 42% { transform: translate(0, 2.5px, 0) ; } 44% { transform: translate(1.5px, 0) ; } 46% { transform: translate(-1.5px, 0) ; } 48% { transform: translate(-0.5px, 0) ; } 50% { transform: translate(0.5px, 0) ; } 52% { transform: translate(2.5px, 0) ; } 54% { transform: translate(-1.5px, 0) ; } 56% { transform: translate(2.5px, 0) ; } 58% { transform: translate(0.5px, 0) ; } 60% { transform: translate(2.5px, 0) ; } 62% { transform: translate(-0.5px, 0) ; } 64% { transform: translate(-0.5px, 0) ; } 66% { transform: translate(1.5px, 0) ; } 68% { transform: translate(-1.5px, 0) ; } 70% { transform: translate(1.5px, 0) ; } 72% { transform: translate(2.5px, 0) ; } 74% { transform: translate(-0.5px, 0) ; } 76% { transform: translate(-0.5px, 0) ; } 78% { transform: translate(-0.5px, 0) ; } 80% { transform: translate(1.5px, 0) ; } 82% { transform: translate(-0.5px, 0) ; } 84% { transform: translate(1.5px, 0) ; } 86% { transform: translate(-1.5px, 0) ; } 88% { transform: translate(-0.5px, 0) ; } 90% { transform: translate(2.5px, 0) ; } 92% { transform: translate(0.5px, 0) ; } 94% { transform: translate(2.5px, 0); } 96% { transform: translate(-0.5px, 0); } 98% { transform: translate(-1.5px, 0); } 0%, 100% { transform: translate(0, 0); } } .shake-vertical-slow:hover, .shake-trigger:hover .shake-vertical-slow, .shake-vertical-slow.shake-freeze, .shake-vertical-slow.shake-constant { animation-duration: 10s; animation-iteration-count: infinite; animation-name: verical-slow; animation-timing-function: ease-in-out; } .shake-horizontal-slow:hover, .shake-trigger:hover .shake-horizontal-slow, .shake-horizontal-slow.shake-freeze, .shake-horizontal-slow.shake-constant { animation-duration: 10s; animation-iteration-count: infinite; animation-name: shake-horizontal-slow; animation-timing-function: ease-in-out; } /*//$("#container").addClass("animated flash"); //闪动 //$("#container").addClass("animated shake"); //左右晃动 //$("#container").addClass("animated pulse"); //放大跳动一下 //$("#container").addClass("animated bounce");//上下跳动 //$("#container").addClass("animated tada");//放大晃动一下整体 //$("#container").addClass("animated swing");//放大晃动一下 原点是上方 //$("#container").addClass("animated wobble");//左右向下湾晃动 //$("#container").addClass("animated flip");//翻转1转 伴随放大 //$("#container").addClass("animated flipInX");//X轴翻转显示 //$("#container").addClass("animated flipOutX");//X轴翻转隐藏 //$("#container").addClass("animated flipInY");//Y轴翻转显示 //$("#container").addClass("animated flipOutY");//Y轴翻转隐藏 //$("#container").addClass("animated fadeIn");//跟jqery一样的淡入显示 //$("#container").addClass("animated fadeInUp");//向上偏移显示 //$("#container").addClass("animated fadeInDown");//向下偏移显示 //$("#container").addClass("animated fadeInLeft");//向左偏移显示 //$("#container").addClass("animated fadeInRight");//向右偏移显示 //$("#container").addClass("animated fadeInUpBig");//向上滑出显示 //$("#container").addClass("animated fadeInDownBig");//向下滑出显示 //$("#container").addClass("animated fadeInLeftBig");//向左滑出显示 //$("#container").addClass("animated fadeInRightBig");//向右滑出显示 //$("#container").addClass("animated fadeOut");//跟jqery一样的淡出隐藏 //$("#container").addClass("animated fadeOutUp");//向上偏移隐藏 //$("#container").addClass("animated fadeOutDown");//向下偏移隐藏 //$("#container").addClass("animated fadeOutLeft");//向左偏移隐藏 //$("#container").addClass("animated fadeOutRight");//向右偏移隐藏 //$("#container").addClass("animated fadeOutUpBig");//向上滑出隐藏 //$("#container").addClass("animated fadeOutDownBig");//向下滑出隐藏 //$("#container").addClass("animated fadeOutLeftBig");//向左滑出隐藏 //$("#container").addClass("animated fadeOutRightBig");//向右滑出隐藏 //$("#container").addClass("animated bounceIn");//果冻显示 //$("#container").addClass("animated bounceInUp");//果冻向上滑动显示 //$("#container").addClass("animated bounceInDown");//果冻向下滑动显示 //$("#container").addClass("animated bounceInLeft");//果冻向左滑动显示 //$("#container").addClass("animated bounceInRight");//果冻向右滑动显示 //$("#container").addClass("animated bounceOut");//果冻淡出隐藏 //$("#container").addClass("animated bounceOutUp");//果冻向上淡出隐藏 //$("#container").addClass("animated bounceOutDown");//果冻向下淡出隐藏 //$("#container").addClass("animated bounceOutLeft");//果冻向左滑动隐藏 //$("#container").addClass("animated bounceOutRight");//果冻向右滑动隐藏 //$("#container").addClass("animated rotateIn");//中心旋转一周淡入显示 //$("#container").addClass("animated rotateInUpLeft");//左下为中心点从下到上旋转抬起淡入显示 //$("#container").addClass("animated rotateInDownLeft");//左下中心点从右到左旋转归正淡入显示 //$("#container").addClass("animated rotateInUpRight");//右下中心点从下到上旋转抬起淡入显示 //$("#container").addClass("animated rotateInDownRight");//右下中心点从右到左旋转归正淡入显示 //$("#container").addClass("animated rotateOut");//中心旋转一周淡出隐藏 //$("#container").addClass("animated rotateOutUpLeft");//左下为中心点从下到上旋转抬起淡出隐藏 //$("#container").addClass("animated rotateOutDownLeft");//左下中心点从右到左旋转归正淡出隐藏 //$("#container").addClass("animated rotateOutUpRight");//右下中心点从下到上旋转抬起淡入隐藏 //$("#container").addClass("animated rotateOutDownRight");//右下中心点从下到上旋转抬起淡出隐藏 //$("#container").addClass("animated hinge");//钉子没订好 掉下来了 隐藏 //$("#container").addClass("animated rollIn");//从左往右滚入淡入显示 //$("#container").addClass("animated rollOut");//从左往右滚入淡出隐藏*/ .animated1,.animated{-webkit-animation-duration:1s;-moz-animation-duration:1s;-ms-animation-duration:1s;-o-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;-ms-animation-fill-mode:both;-o-animation-fill-mode:both;animation-fill-mode:both;} .animated2{-webkit-animation-duration:2s;-moz-animation-duration:2s;-ms-animation-duration:2s;-o-animation-duration:2s;animation-duration:2s;-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;-ms-animation-fill-mode:both;-o-animation-fill-mode:both;animation-fill-mode:both;} .animated3{-webkit-animation-duration:3s;-moz-animation-duration:3s;-ms-animation-duration:3s;-o-animation-duration:3s;animation-duration:3s;-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;-ms-animation-fill-mode:both;-o-animation-fill-mode:both;animation-fill-mode:both;} .animated.hinge{-webkit-animation-duration:2s;-moz-animation-duration:2s;-ms-animation-duration:2s;-o-animation-duration:2s;animation-duration:2s;} @-webkit-keyframes flash{0%,50%,100%{opacity:1;} 25%,75%{opacity:0;} } @-moz-keyframes flash{0%,50%,100%{opacity:1;} 25%,75%{opacity:0;} } @-ms-keyframes flash{0%,50%,100%{opacity:1;} 25%,75%{opacity:0;} } @-o-keyframes flash{0%,50%,100%{opacity:1;} 25%,75%{opacity:0;} } @keyframes flash{0%,50%,100%{opacity:1;} 25%,75%{opacity:0;} } .flash{-webkit-animation-name:flash;-moz-animation-name:flash;-ms-animation-name:flash;-o-animation-name:flash;animation-name:flash;} @-webkit-keyframes shake{0%,100%{-webkit-transform:translateX(0);} 10%,30%,50%,70%,90%{-webkit-transform:translateX(-10px);} 20%,40%,60%,80%{-webkit-transform:translateX(10px);} } @-moz-keyframes shake{0%,100%{-moz-transform:translateX(0);} 10%,30%,50%,70%,90%{-moz-transform:translateX(-10px);} 20%,40%,60%,80%{-moz-transform:translateX(10px);} } @-ms-keyframes shake{0%,100%{-ms-transform:translateX(0);} 10%,30%,50%,70%,90%{-ms-transform:translateX(-10px);} 20%,40%,60%,80%{-ms-transform:translateX(10px);} } @-o-keyframes shake{0%,100%{-o-transform:translateX(0);} 10%,30%,50%,70%,90%{-o-transform:translateX(-10px);} 20%,40%,60%,80%{-o-transform:translateX(10px);} } @keyframes shake{0%,100%{transform:translateX(0);} 10%,30%,50%,70%,90%{transform:translateX(-10px);} 20%,40%,60%,80%{transform:translateX(10px);} } .shake{-webkit-animation-name:shake;-moz-animation-name:shake;-ms-animation-name:shake;-o-animation-name:shake;animation-name:shake;} @-webkit-keyframes bounce{0%,20%,50%,80%,100%{-webkit-transform:translateY(0);} 40%{-webkit-transform:translateY(-30px);} 60%{-webkit-transform:translateY(-15px);} } @-moz-keyframes bounce{0%,20%,50%,80%,100%{-moz-transform:translateY(0);} 40%{-moz-transform:translateY(-30px);} 60%{-moz-transform:translateY(-15px);} } @-ms-keyframes bounce{0%,20%,50%,80%,100%{-ms-transform:translateY(0);} 40%{-ms-transform:translateY(-30px);} 60%{-ms-transform:translateY(-15px);} } @-o-keyframes bounce{0%,20%,50%,80%,100%{-o-transform:translateY(0);} 40%{-o-transform:translateY(-30px);} 60%{-o-transform:translateY(-15px);} } @keyframes bounce{0%,20%,50%,80%,100%{transform:translateY(0);} 40%{transform:translateY(-30px);} 60%{transform:translateY(-15px);} } .bounce{-webkit-animation-name:bounce;-moz-animation-name:bounce;-ms-animation-name:bounce;-o-animation-name:bounce;animation-name:bounce;} @-webkit-keyframes tada{0%{-webkit-transform:scale(1);} 10%,20%{-webkit-transform:scale(0.9) rotate(-3deg);} 30%,50%,70%,90%{-webkit-transform:scale(1.1) rotate(3deg);} 40%,60%,80%{-webkit-transform:scale(1.1) rotate(-3deg);} 100%{-webkit-transform:scale(1) rotate(0);} } @-moz-keyframes tada{0%{-moz-transform:scale(1);} 10%,20%{-moz-transform:scale(0.9) rotate(-3deg);} 30%,50%,70%,90%{-moz-transform:scale(1.1) rotate(3deg);} 40%,60%,80%{-moz-transform:scale(1.1) rotate(-3deg);} 100%{-moz-transform:scale(1) rotate(0);} } @-ms-keyframes tada{0%{-ms-transform:scale(1);} 10%,20%{-ms-transform:scale(0.9) rotate(-3deg);} 30%,50%,70%,90%{-ms-transform:scale(1.1) rotate(3deg);} 40%,60%,80%{-ms-transform:scale(1.1) rotate(-3deg);} 100%{-ms-transform:scale(1) rotate(0);} } @-o-keyframes tada{0%{-o-transform:scale(1);} 10%,20%{-o-transform:scale(0.9) rotate(-3deg);} 30%,50%,70%,90%{-o-transform:scale(1.1) rotate(3deg);} 40%,60%,80%{-o-transform:scale(1.1) rotate(-3deg);} 100%{-o-transform:scale(1) rotate(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(0);} } .tada{-webkit-animation-name:tada;-moz-animation-name:tada;-ms-animation-name:tada;-o-animation-name:tada;animation-name:tada;} @-webkit-keyframes swing{20%,40%,60%,80%,100%{-webkit-transform-origin:top center;} 20%{-webkit-transform:rotate(15deg);} 40%{-webkit-transform:rotate(-10deg);} 60%{-webkit-transform:rotate(5deg);} 80%{-webkit-transform:rotate(-5deg);} 100%{-webkit-transform:rotate(0deg);} } @-moz-keyframes swing{20%{-moz-transform:rotate(15deg);} 40%{-moz-transform:rotate(-10deg);} 60%{-moz-transform:rotate(5deg);} 80%{-moz-transform:rotate(-5deg);} 100%{-moz-transform:rotate(0deg);} } @-ms-keyframes swing{20%{-ms-transform:rotate(15deg);} 40%{-ms-transform:rotate(-10deg);} 60%{-ms-transform:rotate(5deg);} 80%{-ms-transform:rotate(-5deg);} 100%{-ms-transform:rotate(0deg);} } @-o-keyframes swing{20%{-o-transform:rotate(15deg);} 40%{-o-transform:rotate(-10deg);} 60%{-o-transform:rotate(5deg);} 80%{-o-transform:rotate(-5deg);} 100%{-o-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{-webkit-transform-origin:top center;-moz-transform-origin:top center;-ms-transform-origin:top center;-o-transform-origin:top center;transform-origin:top center;-webkit-animation-name:swing;-moz-animation-name:swing;-ms-animation-name:swing;-o-animation-name:swing;animation-name:swing;} /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes wobble{0%{-webkit-transform:translateX(0%);} 15%{-webkit-transform:translateX(-25%) rotate(-5deg);} 30%{-webkit-transform:translateX(20%) rotate(3deg);} 45%{-webkit-transform:translateX(-15%) rotate(-3deg);} 60%{-webkit-transform:translateX(10%) rotate(2deg);} 75%{-webkit-transform:translateX(-5%) rotate(-1deg);} 100%{-webkit-transform:translateX(0%);} } @-moz-keyframes wobble{0%{-moz-transform:translateX(0%);} 15%{-moz-transform:translateX(-25%) rotate(-5deg);} 30%{-moz-transform:translateX(20%) rotate(3deg);} 45%{-moz-transform:translateX(-15%) rotate(-3deg);} 60%{-moz-transform:translateX(10%) rotate(2deg);} 75%{-moz-transform:translateX(-5%) rotate(-1deg);} 100%{-moz-transform:translateX(0%);} } @-ms-keyframes wobble{0%{-ms-transform:translateX(0%);} 15%{-ms-transform:translateX(-25%) rotate(-5deg);} 30%{-ms-transform:translateX(20%) rotate(3deg);} 45%{-ms-transform:translateX(-15%) rotate(-3deg);} 60%{-ms-transform:translateX(10%) rotate(2deg);} 75%{-ms-transform:translateX(-5%) rotate(-1deg);} 100%{-ms-transform:translateX(0%);} } @-o-keyframes wobble{0%{-o-transform:translateX(0%);} 15%{-o-transform:translateX(-25%) rotate(-5deg);} 30%{-o-transform:translateX(20%) rotate(3deg);} 45%{-o-transform:translateX(-15%) rotate(-3deg);} 60%{-o-transform:translateX(10%) rotate(2deg);} 75%{-o-transform:translateX(-5%) rotate(-1deg);} 100%{-o-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{-webkit-animation-name:wobble;-moz-animation-name:wobble;-ms-animation-name:wobble;-o-animation-name:wobble;animation-name:wobble;} /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes pulse{0%{-webkit-transform:scale(1);} 50%{-webkit-transform:scale(1.1);} 100%{-webkit-transform:scale(1);} } @-moz-keyframes pulse{0%{-moz-transform:scale(1);} 50%{-moz-transform:scale(1.1);} 100%{-moz-transform:scale(1);} } @-ms-keyframes pulse{0%{-ms-transform:scale(1);} 50%{-ms-transform:scale(1.1);} 100%{-ms-transform:scale(1);} } @-o-keyframes pulse{0%{-o-transform:scale(1);} 50%{-o-transform:scale(1.1);} 100%{-o-transform:scale(1);} } @keyframes pulse{0%{transform:scale(1);} 50%{transform:scale(1.1);} 100%{transform:scale(1);} } .pulse{-webkit-animation-name:pulse;-moz-animation-name:pulse;-ms-animation-name:pulse;-o-animation-name:pulse;animation-name:pulse;} @-webkit-keyframes flip{0%{-webkit-transform:perspective(400px) rotateY(0);-webkit-animation-timing-function:ease-out;} 40%{-webkit-transform:perspective(400px) translateZ(150px) rotateY(170deg);-webkit-animation-timing-function:ease-out;} 50%{-webkit-transform:perspective(400px) translateZ(150px) rotateY(190deg) scale(1);-webkit-animation-timing-function:ease-in;} 80%{-webkit-transform:perspective(400px) rotateY(360deg) scale(.95);-webkit-animation-timing-function:ease-in;} 100%{-webkit-transform:perspective(400px) scale(1);-webkit-animation-timing-function:ease-in;} } @-moz-keyframes flip{0%{-moz-transform:perspective(400px) rotateY(0);-moz-animation-timing-function:ease-out;} 40%{-moz-transform:perspective(400px) translateZ(150px) rotateY(170deg);-moz-animation-timing-function:ease-out;} 50%{-moz-transform:perspective(400px) translateZ(150px) rotateY(190deg) scale(1);-moz-animation-timing-function:ease-in;} 80%{-moz-transform:perspective(400px) rotateY(360deg) scale(.95);-moz-animation-timing-function:ease-in;} 100%{-moz-transform:perspective(400px) scale(1);-moz-animation-timing-function:ease-in;} } @-ms-keyframes flip{0%{-ms-transform:perspective(400px) rotateY(0);-ms-animation-timing-function:ease-out;} 40%{-ms-transform:perspective(400px) translateZ(150px) rotateY(170deg);-ms-animation-timing-function:ease-out;} 50%{-ms-transform:perspective(400px) translateZ(150px) rotateY(190deg) scale(1);-ms-animation-timing-function:ease-in;} 80%{-ms-transform:perspective(400px) rotateY(360deg) scale(.95);-ms-animation-timing-function:ease-in;} 100%{-ms-transform:perspective(400px) scale(1);-ms-animation-timing-function:ease-in;} } @-o-keyframes flip{0%{-o-transform:perspective(400px) rotateY(0);-o-animation-timing-function:ease-out;} 40%{-o-transform:perspective(400px) translateZ(150px) rotateY(170deg);-o-animation-timing-function:ease-out;} 50%{-o-transform:perspective(400px) translateZ(150px) rotateY(190deg) scale(1);-o-animation-timing-function:ease-in;} 80%{-o-transform:perspective(400px) rotateY(360deg) scale(.95);-o-animation-timing-function:ease-in;} 100%{-o-transform:perspective(400px) scale(1);-o-animation-timing-function:ease-in;} } @keyframes flip{0%{transform:perspective(400px) rotateY(0);animation-timing-function:ease-out;} 40%{transform:perspective(400px) translateZ(150px) rotateY(170deg);animation-timing-function:ease-out;} 50%{transform:perspective(400px) translateZ(150px) rotateY(190deg) scale(1);animation-timing-function:ease-in;} 80%{transform:perspective(400px) rotateY(360deg) scale(.95);animation-timing-function:ease-in;} 100%{transform:perspective(400px) scale(1);animation-timing-function:ease-in;} } .flip{-webkit-backface-visibility:visible !important;-webkit-animation-name:flip;-moz-backface-visibility:visible !important;-moz-animation-name:flip;-ms-backface-visibility:visible !important;-ms-animation-name:flip;-o-backface-visibility:visible !important;-o-animation-name:flip;backface-visibility:visible !important;animation-name:flip;} @-webkit-keyframes flipInX{0%{-webkit-transform:perspective(400px) rotateX(90deg);opacity:0;} 40%{-webkit-transform:perspective(400px) rotateX(-10deg);} 70%{-webkit-transform:perspective(400px) rotateX(10deg);} 100%{-webkit-transform:perspective(400px) rotateX(0deg);opacity:1;} } @-moz-keyframes flipInX{0%{-moz-transform:perspective(400px) rotateX(90deg);opacity:0;} 40%{-moz-transform:perspective(400px) rotateX(-10deg);} 70%{-moz-transform:perspective(400px) rotateX(10deg);} 100%{-moz-transform:perspective(400px) rotateX(0deg);opacity:1;} } @-ms-keyframes flipInX{0%{-ms-transform:perspective(400px) rotateX(90deg);opacity:0;} 40%{-ms-transform:perspective(400px) rotateX(-10deg);} 70%{-ms-transform:perspective(400px) rotateX(10deg);} 100%{-ms-transform:perspective(400px) rotateX(0deg);opacity:1;} } @-o-keyframes flipInX{0%{-o-transform:perspective(400px) rotateX(90deg);opacity:0;} 40%{-o-transform:perspective(400px) rotateX(-10deg);} 70%{-o-transform:perspective(400px) rotateX(10deg);} 100%{-o-transform:perspective(400px) rotateX(0deg);opacity:1;} } @keyframes flipInX{0%{transform:perspective(400px) rotateX(90deg);opacity:0;} 40%{transform:perspective(400px) rotateX(-10deg);} 70%{transform:perspective(400px) rotateX(10deg);} 100%{transform:perspective(400px) rotateX(0deg);opacity:1;} } .flipInX{-webkit-backface-visibility:visible !important;-webkit-animation-name:flipInX;-moz-backface-visibility:visible !important;-moz-animation-name:flipInX;-ms-backface-visibility:visible !important;-ms-animation-name:flipInX;-o-backface-visibility:visible !important;-o-animation-name:flipInX;backface-visibility:visible !important;animation-name:flipInX;} @-webkit-keyframes flipOutX{0%{-webkit-transform:perspective(400px) rotateX(0deg);opacity:1;} 100%{-webkit-transform:perspective(400px) rotateX(90deg);opacity:0;} } @-moz-keyframes flipOutX{0%{-moz-transform:perspective(400px) rotateX(0deg);opacity:1;} 100%{-moz-transform:perspective(400px) rotateX(90deg);opacity:0;} } @-ms-keyframes flipOutX{0%{-ms-transform:perspective(400px) rotateX(0deg);opacity:1;} 100%{-ms-transform:perspective(400px) rotateX(90deg);opacity:0;} } @-o-keyframes flipOutX{0%{-o-transform:perspective(400px) rotateX(0deg);opacity:1;} 100%{-o-transform:perspective(400px) rotateX(90deg);opacity:0;} } @keyframes flipOutX{0%{transform:perspective(400px) rotateX(0deg);opacity:1;} 100%{transform:perspective(400px) rotateX(90deg);opacity:0;} } .flipOutX{-webkit-animation-name:flipOutX;-webkit-backface-visibility:visible !important;-moz-animation-name:flipOutX;-moz-backface-visibility:visible !important;-ms-animation-name:flipOutX;-ms-backface-visibility:visible !important;-o-animation-name:flipOutX;-o-backface-visibility:visible !important;animation-name:flipOutX;backface-visibility:visible !important;} @-webkit-keyframes flipInY{0%{-webkit-transform:perspective(400px) rotateY(90deg);opacity:0;} 40%{-webkit-transform:perspective(400px) rotateY(-10deg);} 70%{-webkit-transform:perspective(400px) rotateY(10deg);} 100%{-webkit-transform:perspective(400px) rotateY(0deg);opacity:1;} } @-moz-keyframes flipInY{0%{-moz-transform:perspective(400px) rotateY(90deg);opacity:0;} 40%{-moz-transform:perspective(400px) rotateY(-10deg);} 70%{-moz-transform:perspective(400px) rotateY(10deg);} 100%{-moz-transform:perspective(400px) rotateY(0deg);opacity:1;} } @-ms-keyframes flipInY{0%{-ms-transform:perspective(400px) rotateY(90deg);opacity:0;} 40%{-ms-transform:perspective(400px) rotateY(-10deg);} 70%{-ms-transform:perspective(400px) rotateY(10deg);} 100%{-ms-transform:perspective(400px) rotateY(0deg);opacity:1;} } @-o-keyframes flipInY{0%{-o-transform:perspective(400px) rotateY(90deg);opacity:0;} 40%{-o-transform:perspective(400px) rotateY(-10deg);} 70%{-o-transform:perspective(400px) rotateY(10deg);} 100%{-o-transform:perspective(400px) rotateY(0deg);opacity:1;} } @keyframes flipInY{0%{transform:perspective(400px) rotateY(90deg);opacity:0;} 40%{transform:perspective(400px) rotateY(-10deg);} 70%{transform:perspective(400px) rotateY(10deg);} 100%{transform:perspective(400px) rotateY(0deg);opacity:1;} } .flipInY{-webkit-backface-visibility:visible !important;-webkit-animation-name:flipInY;-moz-backface-visibility:visible !important;-moz-animation-name:flipInY;-ms-backface-visibility:visible !important;-ms-animation-name:flipInY;-o-backface-visibility:visible !important;-o-animation-name:flipInY;backface-visibility:visible !important;animation-name:flipInY;} @-webkit-keyframes flipOutY{0%{-webkit-transform:perspective(400px) rotateY(0deg);opacity:1;} 100%{-webkit-transform:perspective(400px) rotateY(90deg);opacity:0;} } @-moz-keyframes flipOutY{0%{-moz-transform:perspective(400px) rotateY(0deg);opacity:1;} 100%{-moz-transform:perspective(400px) rotateY(90deg);opacity:0;} } @-ms-keyframes flipOutY{0%{-ms-transform:perspective(400px) rotateY(0deg);opacity:1;} 100%{-ms-transform:perspective(400px) rotateY(90deg);opacity:0;} } @-o-keyframes flipOutY{0%{-o-transform:perspective(400px) rotateY(0deg);opacity:1;} 100%{-o-transform:perspective(400px) rotateY(90deg);opacity:0;} } @keyframes flipOutY{0%{transform:perspective(400px) rotateY(0deg);opacity:1;} 100%{transform:perspective(400px) rotateY(90deg);opacity:0;} } .flipOutY{-webkit-backface-visibility:visible !important;-webkit-animation-name:flipOutY;-moz-backface-visibility:visible !important;-moz-animation-name:flipOutY;-ms-backface-visibility:visible !important;-ms-animation-name:flipOutY;-o-backface-visibility:visible !important;-o-animation-name:flipOutY;backface-visibility:visible !important;animation-name:flipOutY;} @-webkit-keyframes fadeIn{0%{opacity:0;} 100%{opacity:1;} } @-moz-keyframes fadeIn{0%{opacity:0;} 100%{opacity:1;} } @-ms-keyframes fadeIn{0%{opacity:0;} 100%{opacity:1;} } @-o-keyframes fadeIn{0%{opacity:0;} 100%{opacity:1;} } @keyframes fadeIn{0%{opacity:0;} 100%{opacity:1;} } .fadeIn{-webkit-animation-name:fadeIn;-moz-animation-name:fadeIn;-ms-animation-name:fadeIn;-o-animation-name:fadeIn;animation-name:fadeIn;} @-webkit-keyframes fadeInUp{0%{opacity:0;-webkit-transform:translateY(20px);} 100%{opacity:1;-webkit-transform:translateY(0);} } @-moz-keyframes fadeInUp{0%{opacity:0;-moz-transform:translateY(20px);} 100%{opacity:1;-moz-transform:translateY(0);} } @-ms-keyframes fadeInUp{0%{opacity:0;-ms-transform:translateY(20px);} 100%{opacity:1;-ms-transform:translateY(0);} } @-o-keyframes fadeInUp{0%{opacity:0;-o-transform:translateY(20px);} 100%{opacity:1;-o-transform:translateY(0);} } @keyframes fadeInUp{0%{opacity:0;transform:translateY(20px);} 100%{opacity:1;transform:translateY(0);} } .fadeInUp{-webkit-animation-name:fadeInUp;-moz-animation-name:fadeInUp;-ms-animation-name:fadeInUp;-o-animation-name:fadeInUp;animation-name:fadeInUp;} @-webkit-keyframes fadeInDown{0%{opacity:0;-webkit-transform:translateY(-20px);} 100%{opacity:1;-webkit-transform:translateY(0);} } @-moz-keyframes fadeInDown{0%{opacity:0;-moz-transform:translateY(-20px);} 100%{opacity:1;-moz-transform:translateY(0);} } @-ms-keyframes fadeInDown{0%{opacity:0;-ms-transform:translateY(-20px);} 100%{opacity:1;-ms-transform:translateY(0);} } @-o-keyframes fadeInDown{0%{opacity:0;-ms-transform:translateY(-20px);} 100%{opacity:1;-ms-transform:translateY(0);} } @keyframes fadeInDown{0%{opacity:0;transform:translateY(-20px);} 100%{opacity:1;transform:translateY(0);} } .fadeInDown{-webkit-animation-name:fadeInDown;-moz-animation-name:fadeInDown;-ms-animation-name:fadeInDown;-o-animation-name:fadeInDown;animation-name:fadeInDown;} @-webkit-keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translateX(-20px);} 100%{opacity:1;-webkit-transform:translateX(0);} } @-moz-keyframes fadeInLeft{0%{opacity:0;-moz-transform:translateX(-20px);} 100%{opacity:1;-moz-transform:translateX(0);} } @-ms-keyframes fadeInLeft{0%{opacity:0;-ms-transform:translateX(-20px);} 100%{opacity:1;-ms-transform:translateX(0);} } @-o-keyframes fadeInLeft{0%{opacity:0;-o-transform:translateX(-20px);} 100%{opacity:1;-o-transform:translateX(0);} } @keyframes fadeInLeft{0%{opacity:0;transform:translateX(-20px);} 100%{opacity:1;transform:translateX(0);} } .fadeInLeft{-webkit-animation-name:fadeInLeft;-moz-animation-name:fadeInLeft;-ms-animation-name:fadeInLeft;-o-animation-name:fadeInLeft;animation-name:fadeInLeft;} @-webkit-keyframes fadeInRight{0%{opacity:0;-webkit-transform:translateX(20px);} 100%{opacity:1;-webkit-transform:translateX(0);} } @-moz-keyframes fadeInRight{0%{opacity:0;-moz-transform:translateX(20px);} 100%{opacity:1;-moz-transform:translateX(0);} } @-ms-keyframes fadeInRight{0%{opacity:0;-ms-transform:translateX(20px);} 100%{opacity:1;-ms-transform:translateX(0);} } @-o-keyframes fadeInRight{0%{opacity:0;-o-transform:translateX(20px);} 100%{opacity:1;-o-transform:translateX(0);} } @keyframes fadeInRight{0%{opacity:0;transform:translateX(20px);} 100%{opacity:1;transform:translateX(0);} } .fadeInRight{-webkit-animation-name:fadeInRight;-moz-animation-name:fadeInRight;-ms-animation-name:fadeInRight;-o-animation-name:fadeInRight;animation-name:fadeInRight;} @-webkit-keyframes fadeInUpBig{0%{opacity:0;-webkit-transform:translateY(2000px);} 100%{opacity:1;-webkit-transform:translateY(0);} } @-moz-keyframes fadeInUpBig{0%{opacity:0;-moz-transform:translateY(2000px);} 100%{opacity:1;-moz-transform:translateY(0);} } @-ms-keyframes fadeInUpBig{0%{opacity:0;-ms-transform:translateY(2000px);} 100%{opacity:1;-ms-transform:translateY(0);} } @-o-keyframes fadeInUpBig{0%{opacity:0;-o-transform:translateY(2000px);} 100%{opacity:1;-o-transform:translateY(0);} } @keyframes fadeInUpBig{0%{opacity:0;transform:translateY(2000px);} 100%{opacity:1;transform:translateY(0);} } .fadeInUpBig{-webkit-animation-name:fadeInUpBig;-moz-animation-name:fadeInUpBig;-ms-animation-name:fadeInUpBig;-o-animation-name:fadeInUpBig;animation-name:fadeInUpBig;} @-webkit-keyframes fadeInDownBig{0%{opacity:0;-webkit-transform:translateY(-2000px);} 100%{opacity:1;-webkit-transform:translateY(0);} } @-moz-keyframes fadeInDownBig{0%{opacity:0;-moz-transform:translateY(-2000px);} 100%{opacity:1;-moz-transform:translateY(0);} } @-ms-keyframes fadeInDownBig{0%{opacity:0;-ms-transform:translateY(-2000px);} 100%{opacity:1;-ms-transform:translateY(0);} } @-o-keyframes fadeInDownBig{0%{opacity:0;-o-transform:translateY(-2000px);} 100%{opacity:1;-o-transform:translateY(0);} } @keyframes fadeInDownBig{0%{opacity:0;transform:translateY(-2000px);} 100%{opacity:1;transform:translateY(0);} } .fadeInDownBig{-webkit-animation-name:fadeInDownBig;-moz-animation-name:fadeInDownBig;-ms-animation-name:fadeInDownBig;-o-animation-name:fadeInDownBig;animation-name:fadeInDownBig;} @-webkit-keyframes fadeInLeftBig{0%{opacity:0;-webkit-transform:translateX(-2000px);} 100%{opacity:1;-webkit-transform:translateX(0);} } @-moz-keyframes fadeInLeftBig{0%{opacity:0;-moz-transform:translateX(-2000px);} 100%{opacity:1;-moz-transform:translateX(0);} } @-ms-keyframes fadeInLeftBig{0%{opacity:0;-ms-transform:translateX(-2000px);} 100%{opacity:1;-ms-transform:translateX(0);} } @-o-keyframes fadeInLeftBig{0%{opacity:0;-o-transform:translateX(-2000px);} 100%{opacity:1;-o-transform:translateX(0);} } @keyframes fadeInLeftBig{0%{opacity:0;transform:translateX(-2000px);} 100%{opacity:1;transform:translateX(0);} } .fadeInLeftBig{-webkit-animation-name:fadeInLeftBig;-moz-animation-name:fadeInLeftBig;-ms-animation-name:fadeInLeftBig;-o-animation-name:fadeInLeftBig;animation-name:fadeInLeftBig;} @-webkit-keyframes fadeInRightBig{0%{opacity:0;-webkit-transform:translateX(2000px);} 100%{opacity:1;-webkit-transform:translateX(0);} } @-moz-keyframes fadeInRightBig{0%{opacity:0;-moz-transform:translateX(2000px);} 100%{opacity:1;-moz-transform:translateX(0);} } @-ms-keyframes fadeInRightBig{0%{opacity:0;-ms-transform:translateX(2000px);} 100%{opacity:1;-ms-transform:translateX(0);} } @-o-keyframes fadeInRightBig{0%{opacity:0;-o-transform:translateX(2000px);} 100%{opacity:1;-o-transform:translateX(0);} } @keyframes fadeInRightBig{0%{opacity:0;transform:translateX(2000px);} 100%{opacity:1;transform:translateX(0);} } .fadeInRightBig{-webkit-animation-name:fadeInRightBig;-moz-animation-name:fadeInRightBig;-ms-animation-name:fadeInRightBig;-o-animation-name:fadeInRightBig;animation-name:fadeInRightBig;} @-webkit-keyframes fadeOut{0%{opacity:1;} 100%{opacity:0;} } @-moz-keyframes fadeOut{0%{opacity:1;} 100%{opacity:0;} } @-ms-keyframes fadeOut{0%{opacity:1;} 100%{opacity:0;} } @-o-keyframes fadeOut{0%{opacity:1;} 100%{opacity:0;} } @keyframes fadeOut{0%{opacity:1;} 100%{opacity:0;} } .fadeOut{-webkit-animation-name:fadeOut;-moz-animation-name:fadeOut;-ms-animation-name:fadeOut;-o-animation-name:fadeOut;animation-name:fadeOut;} @-webkit-keyframes fadeOutUp{0%{opacity:1;-webkit-transform:translateY(0);} 100%{opacity:0;-webkit-transform:translateY(-20px);} } @-moz-keyframes fadeOutUp{0%{opacity:1;-moz-transform:translateY(0);} 100%{opacity:0;-moz-transform:translateY(-20px);} } @-ms-keyframes fadeOutUp{0%{opacity:1;-ms-transform:translateY(0);} 100%{opacity:0;-ms-transform:translateY(-20px);} } @-o-keyframes fadeOutUp{0%{opacity:1;-o-transform:translateY(0);} 100%{opacity:0;-o-transform:translateY(-20px);} } @keyframes fadeOutUp{0%{opacity:1;transform:translateY(0);} 100%{opacity:0;transform:translateY(-20px);} } .fadeOutUp{-webkit-animation-name:fadeOutUp;-moz-animation-name:fadeOutUp;-ms-animation-name:fadeOutUp;-o-animation-name:fadeOutUp;animation-name:fadeOutUp;} @-webkit-keyframes fadeOutDown{0%{opacity:1;-webkit-transform:translateY(0);} 100%{opacity:0;-webkit-transform:translateY(20px);} } @-moz-keyframes fadeOutDown{0%{opacity:1;-moz-transform:translateY(0);} 100%{opacity:0;-moz-transform:translateY(20px);} } @-ms-keyframes fadeOutDown{0%{opacity:1;-ms-transform:translateY(0);} 100%{opacity:0;-ms-transform:translateY(20px);} } @-o-keyframes fadeOutDown{0%{opacity:1;-o-transform:translateY(0);} 100%{opacity:0;-o-transform:translateY(20px);} } @keyframes fadeOutDown{0%{opacity:1;transform:translateY(0);} 100%{opacity:0;transform:translateY(20px);} } .fadeOutDown{-webkit-animation-name:fadeOutDown;-moz-animation-name:fadeOutDown;-ms-animation-name:fadeOutDown;-o-animation-name:fadeOutDown;animation-name:fadeOutDown;} @-webkit-keyframes fadeOutLeft{0%{opacity:1;-webkit-transform:translateX(0);} 100%{opacity:0;-webkit-transform:translateX(-20px);} } @-moz-keyframes fadeOutLeft{0%{opacity:1;-moz-transform:translateX(0);} 100%{opacity:0;-moz-transform:translateX(-20px);} } @-ms-keyframes fadeOutLeft{0%{opacity:1;-ms-transform:translateX(0);} 100%{opacity:0;-ms-transform:translateX(-20px);} } @-o-keyframes fadeOutLeft{0%{opacity:1;-o-transform:translateX(0);} 100%{opacity:0;-o-transform:translateX(-20px);} } @keyframes fadeOutLeft{0%{opacity:1;transform:translateX(0);} 100%{opacity:0;transform:translateX(-20px);} } .fadeOutLeft{-webkit-animation-name:fadeOutLeft;-moz-animation-name:fadeOutLeft;-ms-animation-name:fadeOutLeft;-o-animation-name:fadeOutLeft;animation-name:fadeOutLeft;} @-webkit-keyframes fadeOutRight{0%{opacity:1;-webkit-transform:translateX(0);} 100%{opacity:0;-webkit-transform:translateX(20px);} } @-moz-keyframes fadeOutRight{0%{opacity:1;-moz-transform:translateX(0);} 100%{opacity:0;-moz-transform:translateX(20px);} } @-ms-keyframes fadeOutRight{0%{opacity:1;-ms-transform:translateX(0);} 100%{opacity:0;-ms-transform:translateX(20px);} } @-o-keyframes fadeOutRight{0%{opacity:1;-o-transform:translateX(0);} 100%{opacity:0;-o-transform:translateX(20px);} } @keyframes fadeOutRight{0%{opacity:1;transform:translateX(0);} 100%{opacity:0;transform:translateX(20px);} } .fadeOutRight{-webkit-animation-name:fadeOutRight;-moz-animation-name:fadeOutRight;-ms-animation-name:fadeOutRight;-o-animation-name:fadeOutRight;animation-name:fadeOutRight;} @-webkit-keyframes fadeOutUpBig{0%{opacity:1;-webkit-transform:translateY(0);} 100%{opacity:0;-webkit-transform:translateY(-2000px);} } @-moz-keyframes fadeOutUpBig{0%{opacity:1;-moz-transform:translateY(0);} 100%{opacity:0;-moz-transform:translateY(-2000px);} } @-ms-keyframes fadeOutUpBig{0%{opacity:1;-ms-transform:translateY(0);} 100%{opacity:0;-ms-transform:translateY(-2000px);} } @-o-keyframes fadeOutUpBig{0%{opacity:1;-o-transform:translateY(0);} 100%{opacity:0;-o-transform:translateY(-2000px);} } @keyframes fadeOutUpBig{0%{opacity:1;transform:translateY(0);} 100%{opacity:0;transform:translateY(-2000px);} } .fadeOutUpBig{-webkit-animation-name:fadeOutUpBig;-moz-animation-name:fadeOutUpBig;-ms-animation-name:fadeOutUpBig;-o-animation-name:fadeOutUpBig;animation-name:fadeOutUpBig;} @-webkit-keyframes fadeOutDownBig{0%{opacity:1;-webkit-transform:translateY(0);} 100%{opacity:0;-webkit-transform:translateY(2000px);} } @-moz-keyframes fadeOutDownBig{0%{opacity:1;-moz-transform:translateY(0);} 100%{opacity:0;-moz-transform:translateY(2000px);} } @-ms-keyframes fadeOutDownBig{0%{opacity:1;-ms-transform:translateY(0);} 100%{opacity:0;-ms-transform:translateY(2000px);} } @-o-keyframes fadeOutDownBig{0%{opacity:1;-o-transform:translateY(0);} 100%{opacity:0;-o-transform:translateY(2000px);} } @keyframes fadeOutDownBig{0%{opacity:1;transform:translateY(0);} 100%{opacity:0;transform:translateY(2000px);} } .fadeOutDownBig{-webkit-animation-name:fadeOutDownBig;-moz-animation-name:fadeOutDownBig;-ms-animation-name:fadeOutDownBig;-o-animation-name:fadeOutDownBig;animation-name:fadeOutDownBig;} @-webkit-keyframes fadeOutLeftBig{0%{opacity:1;-webkit-transform:translateX(0);} 100%{opacity:0;-webkit-transform:translateX(-2000px);} } @-moz-keyframes fadeOutLeftBig{0%{opacity:1;-moz-transform:translateX(0);} 100%{opacity:0;-moz-transform:translateX(-2000px);} } @-ms-keyframes fadeOutLeftBig{0%{opacity:1;-ms-transform:translateX(0);} 100%{opacity:0;-ms-transform:translateX(-2000px);} } @-o-keyframes fadeOutLeftBig{0%{opacity:1;-o-transform:translateX(0);} 100%{opacity:0;-o-transform:translateX(-2000px);} } @keyframes fadeOutLeftBig{0%{opacity:1;transform:translateX(0);} 100%{opacity:0;transform:translateX(-2000px);} } .fadeOutLeftBig{-webkit-animation-name:fadeOutLeftBig;-moz-animation-name:fadeOutLeftBig;-ms-animation-name:fadeOutLeftBig;-o-animation-name:fadeOutLeftBig;animation-name:fadeOutLeftBig;} @-webkit-keyframes fadeOutRightBig{0%{opacity:1;-webkit-transform:translateX(0);} 100%{opacity:0;-webkit-transform:translateX(2000px);} } @-moz-keyframes fadeOutRightBig{0%{opacity:1;-moz-transform:translateX(0);} 100%{opacity:0;-moz-transform:translateX(2000px);} } @-ms-keyframes fadeOutRightBig{0%{opacity:1;-ms-transform:translateX(0);} 100%{opacity:0;-ms-transform:translateX(2000px);} } @-o-keyframes fadeOutRightBig{0%{opacity:1;-o-transform:translateX(0);} 100%{opacity:0;-o-transform:translateX(2000px);} } @keyframes fadeOutRightBig{0%{opacity:1;transform:translateX(0);} 100%{opacity:0;transform:translateX(2000px);} } .fadeOutRightBig{-webkit-animation-name:fadeOutRightBig;-moz-animation-name:fadeOutRightBig;-ms-animation-name:fadeOutRightBig;-o-animation-name:fadeOutRightBig;animation-name:fadeOutRightBig;} @-webkit-keyframes bounceIn{0%{opacity:0;-webkit-transform:scale(.1);} 50%{opacity:1;-webkit-transform:scale(.6);} 70%{-webkit-transform:scale(.5);} 100%{-webkit-transform:scale(1);} } @-moz-keyframes bounceIn{0%{opacity:0;-moz-transform:scale(.1);} 50%{opacity:1;-moz-transform:scale(.6);} 70%{-moz-transform:scale(.5);} 100%{-moz-transform:scale(1);} } @-ms-keyframes bounceIn{0%{opacity:0;-ms-transform:scale(.1);} 50%{opacity:1;-ms-transform:scale(.6);} 70%{-ms-transform:scale(.5);} 100%{-ms-transform:scale(1);} } @-o-keyframes bounceIn{0%{opacity:0;-o-transform:scale(.1);} 50%{opacity:1;-o-transform:scale(.6);} 70%{-o-transform:scale(.5);} 100%{-o-transform:scale(1);} } @keyframes bounceIn{0%{opacity:0;transform:scale(.1);} 50%{opacity:1;transform:scale(.6);} 70%{transform:scale(.5);} 100%{transform:scale(1);} } .bounceIn{-webkit-animation-name:bounceIn;-moz-animation-name:bounceIn;-ms-animation-name:bounceIn;-o-animation-name:bounceIn;animation-name:bounceIn;} @-webkit-keyframes bounceInUp{0%{opacity:0;-webkit-transform:translateY(2000px);} 60%{opacity:1;-webkit-transform:translateY(-30px);} 80%{-webkit-transform:translateY(10px);} 100%{-webkit-transform:translateY(0);} } @-moz-keyframes bounceInUp{0%{opacity:0;-moz-transform:translateY(2000px);} 60%{opacity:1;-moz-transform:translateY(-30px);} 80%{-moz-transform:translateY(10px);} 100%{-moz-transform:translateY(0);} } @-ms-keyframes bounceInUp{0%{opacity:0;-ms-transform:translateY(2000px);} 60%{opacity:1;-ms-transform:translateY(-30px);} 80%{-ms-transform:translateY(10px);} 100%{-ms-transform:translateY(0);} } @-o-keyframes bounceInUp{0%{opacity:0;-o-transform:translateY(2000px);} 60%{opacity:1;-o-transform:translateY(-30px);} 80%{-o-transform:translateY(10px);} 100%{-o-transform:translateY(0);} } @keyframes bounceInUp{0%{opacity:0;transform:translateY(2000px);} 60%{opacity:1;transform:translateY(-30px);} 80%{transform:translateY(10px);} 100%{transform:translateY(0);} } .bounceInUp{-webkit-animation-name:bounceInUp;-moz-animation-name:bounceInUp;-ms-animation-name:bounceInUp;-o-animation-name:bounceInUp;animation-name:bounceInUp;} @-webkit-keyframes bounceInDown{0%{opacity:0;-webkit-transform:translateY(-2000px);} 60%{opacity:1;-webkit-transform:translateY(30px);} 80%{-webkit-transform:translateY(-10px);} 100%{-webkit-transform:translateY(0);} } @-moz-keyframes bounceInDown{0%{opacity:0;-moz-transform:translateY(-2000px);} 60%{opacity:1;-moz-transform:translateY(30px);} 80%{-moz-transform:translateY(-10px);} 100%{-moz-transform:translateY(0);} } @-ms-keyframes bounceInDown{0%{opacity:0;-ms-transform:translateY(-2000px);} 60%{opacity:1;-ms-transform:translateY(30px);} 80%{-ms-transform:translateY(-10px);} 100%{-ms-transform:translateY(0);} } @-o-keyframes bounceInDown{0%{opacity:0;-o-transform:translateY(-2000px);} 60%{opacity:1;-o-transform:translateY(30px);} 80%{-o-transform:translateY(-10px);} 100%{-o-transform:translateY(0);} } @keyframes bounceInDown{0%{opacity:0;transform:translateY(-2000px);} 60%{opacity:1;transform:translateY(30px);} 80%{transform:translateY(-10px);} 100%{transform:translateY(0);} } .bounceInDown{-webkit-animation-name:bounceInDown;-moz-animation-name:bounceInDown;-ms-animation-name:bounceInDown;-o-animation-name:bounceInDown;animation-name:bounceInDown;} @-webkit-keyframes bounceInLeft{0%{opacity:0;-webkit-transform:translateX(-2000px);} 60%{opacity:1;-webkit-transform:translateX(30px);} 80%{-webkit-transform:translateX(-10px);} 100%{-webkit-transform:translateX(0);} } @-moz-keyframes bounceInLeft{0%{opacity:0;-moz-transform:translateX(-2000px);} 60%{opacity:1;-moz-transform:translateX(30px);} 80%{-moz-transform:translateX(-10px);} 100%{-moz-transform:translateX(0);} } @-ms-keyframes bounceInLeft{0%{opacity:0;-ms-transform:translateX(-2000px);} 60%{opacity:1;-ms-transform:translateX(30px);} 80%{-ms-transform:translateX(-10px);} 100%{-ms-transform:translateX(0);} } @-o-keyframes bounceInLeft{0%{opacity:0;-o-transform:translateX(-2000px);} 60%{opacity:1;-o-transform:translateX(30px);} 80%{-o-transform:translateX(-10px);} 100%{-o-transform:translateX(0);} } @keyframes bounceInLeft{0%{opacity:0;transform:translateX(-2000px);} 60%{opacity:1;transform:translateX(30px);} 80%{transform:translateX(-10px);} 100%{transform:translateX(0);} } .bounceInLeft{-webkit-animation-name:bounceInLeft;-moz-animation-name:bounceInLeft;-ms-animation-name:bounceInLeft;-o-animation-name:bounceInLeft;animation-name:bounceInLeft;} @-webkit-keyframes bounceInRight{0%{opacity:0;-webkit-transform:translateX(2000px);} 60%{opacity:1;-webkit-transform:translateX(-30px);} 80%{-webkit-transform:translateX(10px);} 100%{-webkit-transform:translateX(0);} } @-moz-keyframes bounceInRight{0%{opacity:0;-moz-transform:translateX(2000px);} 60%{opacity:1;-moz-transform:translateX(-30px);} 80%{-moz-transform:translateX(10px);} 100%{-moz-transform:translateX(0);} } @-ms-keyframes bounceInRight{0%{opacity:0;-ms-transform:translateX(2000px);} 60%{opacity:1;-ms-transform:translateX(-30px);} 80%{-ms-transform:translateX(10px);} 100%{-ms-transform:translateX(0);} } @-o-keyframes bounceInRight{0%{opacity:0;-o-transform:translateX(2000px);} 60%{opacity:1;-o-transform:translateX(-30px);} 80%{-o-transform:translateX(10px);} 100%{-o-transform:translateX(0);} } @keyframes bounceInRight{0%{opacity:0;transform:translateX(2000px);} 60%{opacity:1;transform:translateX(-30px);} 80%{transform:translateX(10px);} 100%{transform:translateX(0);} } .bounceInRight{-webkit-animation-name:bounceInRight;-moz-animation-name:bounceInRight;-ms-animation-name:bounceInRight;-o-animation-name:bounceInRight;animation-name:bounceInRight;} @-webkit-keyframes bounceOut{0%{-webkit-transform:scale(1);} 25%{-webkit-transform:scale(.95);} 50%{opacity:1;-webkit-transform:scale(1.1);} 100%{opacity:0;-webkit-transform:scale(.3);} } @-moz-keyframes bounceOut{0%{-moz-transform:scale(1);} 25%{-moz-transform:scale(.95);} 50%{opacity:1;-moz-transform:scale(1.1);} 100%{opacity:0;-moz-transform:scale(.3);} } @-ms-keyframes bounceOut{0%{-ms-transform:scale(1);} 25%{-ms-transform:scale(.95);} 50%{opacity:1;-ms-transform:scale(1.1);} 100%{opacity:0;-ms-transform:scale(.3);} } @-o-keyframes bounceOut{0%{-o-transform:scale(1);} 25%{-o-transform:scale(.95);} 50%{opacity:1;-o-transform:scale(1.1);} 100%{opacity:0;-o-transform:scale(.3);} } @keyframes bounceOut{0%{transform:scale(1);} 25%{transform:scale(.95);} 50%{opacity:1;transform:scale(1.1);} 100%{opacity:0;transform:scale(.3);} } .bounceOut{-webkit-animation-name:bounceOut;-moz-animation-name:bounceOut;-ms-animation-name:bounceOut;-o-animation-name:bounceOut;animation-name:bounceOut;} @-webkit-keyframes bounceOutUp{0%{-webkit-transform:translateY(0);} 20%{opacity:1;-webkit-transform:translateY(20px);} 100%{opacity:0;-webkit-transform:translateY(-2000px);} } @-moz-keyframes bounceOutUp{0%{-moz-transform:translateY(0);} 20%{opacity:1;-moz-transform:translateY(20px);} 100%{opacity:0;-moz-transform:translateY(-2000px);} } @-ms-keyframes bounceOutUp{0%{-ms-transform:translateY(0);} 20%{opacity:1;-ms-transform:translateY(20px);} 100%{opacity:0;-ms-transform:translateY(-2000px);} } @-o-keyframes bounceOutUp{0%{-o-transform:translateY(0);} 20%{opacity:1;-o-transform:translateY(20px);} 100%{opacity:0;-o-transform:translateY(-2000px);} } @keyframes bounceOutUp{0%{transform:translateY(0);} 20%{opacity:1;transform:translateY(20px);} 100%{opacity:0;transform:translateY(-2000px);} } .bounceOutUp{-webkit-animation-name:bounceOutUp;-moz-animation-name:bounceOutUp;-ms-animation-name:bounceOutUp;-o-animation-name:bounceOutUp;animation-name:bounceOutUp;} @-webkit-keyframes bounceOutDown{0%{-webkit-transform:translateY(0);} 20%{opacity:1;-webkit-transform:translateY(-20px);} 100%{opacity:0;-webkit-transform:translateY(2000px);} } @-moz-keyframes bounceOutDown{0%{-moz-transform:translateY(0);} 20%{opacity:1;-moz-transform:translateY(-20px);} 100%{opacity:0;-moz-transform:translateY(2000px);} } @-ms-keyframes bounceOutDown{0%{-ms-transform:translateY(0);} 20%{opacity:1;-ms-transform:translateY(-20px);} 100%{opacity:0;-ms-transform:translateY(2000px);} } @keyframes bounceOutDown{0%{transform:translateY(0);} 20%{opacity:1;transform:translateY(-20px);} 100%{opacity:0;transform:translateY(2000px);} } .bounceOutDown{-webkit-animation-name:bounceOutDown;-moz-animation-name:bounceOutDown;-ms-animation-name:bounceOutDown;animation-name:bounceOutDown;} @-webkit-keyframes bounceOutLeft{0%{-webkit-transform:translateX(0);} 20%{opacity:1;-webkit-transform:translateX(20px);} 100%{opacity:0;-webkit-transform:translateX(-2000px);} } @-moz-keyframes bounceOutLeft{0%{-moz-transform:translateX(0);} 20%{opacity:1;-moz-transform:translateX(20px);} 100%{opacity:0;-moz-transform:translateX(-2000px);} } @-ms-keyframes bounceOutLeft{0%{-ms-transform:translateX(0);} 20%{opacity:1;-ms-transform:translateX(20px);} 100%{opacity:0;-ms-transform:translateX(-2000px);} } @-o-keyframes bounceOutLeft{0%{-o-transform:translateX(0);} 20%{opacity:1;-o-transform:translateX(20px);} 100%{opacity:0;-o-transform:translateX(-2000px);} } @keyframes bounceOutLeft{0%{transform:translateX(0);} 20%{opacity:1;transform:translateX(20px);} 100%{opacity:0;transform:translateX(-2000px);} } .bounceOutLeft{-webkit-animation-name:bounceOutLeft;-moz-animation-name:bounceOutLeft;-ms-animation-name:bounceOutLeft;-o-animation-name:bounceOutLeft;animation-name:bounceOutLeft;} @-webkit-keyframes bounceOutRight{0%{-webkit-transform:translateX(0);} 20%{opacity:1;-webkit-transform:translateX(-20px);} 100%{opacity:0;-webkit-transform:translateX(2000px);} } @-moz-keyframes bounceOutRight{0%{-moz-transform:translateX(0);} 20%{opacity:1;-moz-transform:translateX(-20px);} 100%{opacity:0;-moz-transform:translateX(2000px);} } @-ms-keyframes bounceOutRight{0%{-ms-transform:translateX(0);} 20%{opacity:1;-ms-transform:translateX(-20px);} 100%{opacity:0;-ms-transform:translateX(2000px);} } @-o-keyframes bounceOutRight{0%{-o-transform:translateX(0);} 20%{opacity:1;-o-transform:translateX(-20px);} 100%{opacity:0;-o-transform:translateX(2000px);} } @keyframes bounceOutRight{0%{transform:translateX(0);} 20%{opacity:1;transform:translateX(-20px);} 100%{opacity:0;transform:translateX(2000px);} } .bounceOutRight{-webkit-animation-name:bounceOutRight;-moz-animation-name:bounceOutRight;-ms-animation-name:bounceOutRight;-o-animation-name:bounceOutRight;animation-name:bounceOutRight;} @-webkit-keyframes rotateIn{0%{-webkit-transform-origin:center center;-webkit-transform:rotate(-200deg);opacity:0;} 100%{-webkit-transform-origin:center center;-webkit-transform:rotate(0);opacity:1;} } @-moz-keyframes rotateIn{0%{-moz-transform-origin:center center;-moz-transform:rotate(-200deg);opacity:0;} 100%{-moz-transform-origin:center center;-moz-transform:rotate(0);opacity:1;} } @-ms-keyframes rotateIn{0%{-ms-transform-origin:center center;-ms-transform:rotate(-200deg);opacity:0;} 100%{-ms-transform-origin:center center;-ms-transform:rotate(0);opacity:1;} } @-o-keyframes rotateIn{0%{-o-transform-origin:center center;-o-transform:rotate(-200deg);opacity:0;} 100%{-o-transform-origin:center center;-o-transform:rotate(0);opacity:1;} } @keyframes rotateIn{0%{transform-origin:center center;transform:rotate(-200deg);opacity:0;} 100%{transform-origin:center center;transform:rotate(0);opacity:1;} } .rotateIn{-webkit-animation-name:rotateIn;-moz-animation-name:rotateIn;-ms-animation-name:rotateIn;-o-animation-name:rotateIn;animation-name:rotateIn;} @-webkit-keyframes rotateInUpLeft{0%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(90deg);opacity:0;} 100%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(0);opacity:1;} } @-moz-keyframes rotateInUpLeft{0%{-moz-transform-origin:left bottom;-moz-transform:rotate(90deg);opacity:0;} 100%{-moz-transform-origin:left bottom;-moz-transform:rotate(0);opacity:1;} } @-ms-keyframes rotateInUpLeft{0%{-ms-transform-origin:left bottom;-ms-transform:rotate(90deg);opacity:0;} 100%{-ms-transform-origin:left bottom;-ms-transform:rotate(0);opacity:1;} } @-o-keyframes rotateInUpLeft{0%{-o-transform-origin:left bottom;-o-transform:rotate(90deg);opacity:0;} 100%{-o-transform-origin:left bottom;-o-transform:rotate(0);opacity:1;} } @keyframes rotateInUpLeft{0%{transform-origin:left bottom;transform:rotate(90deg);opacity:0;} 100%{transform-origin:left bottom;transform:rotate(0);opacity:1;} } .rotateInUpLeft{-webkit-animation-name:rotateInUpLeft;-moz-animation-name:rotateInUpLeft;-ms-animation-name:rotateInUpLeft;-o-animation-name:rotateInUpLeft;animation-name:rotateInUpLeft;} @-webkit-keyframes rotateInDownLeft{0%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(-90deg);opacity:0;} 100%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(0);opacity:1;} } @-moz-keyframes rotateInDownLeft{0%{-moz-transform-origin:left bottom;-moz-transform:rotate(-90deg);opacity:0;} 100%{-moz-transform-origin:left bottom;-moz-transform:rotate(0);opacity:1;} } @-ms-keyframes rotateInDownLeft{0%{-ms-transform-origin:left bottom;-ms-transform:rotate(-90deg);opacity:0;} 100%{-ms-transform-origin:left bottom;-ms-transform:rotate(0);opacity:1;} } @-o-keyframes rotateInDownLeft{0%{-o-transform-origin:left bottom;-o-transform:rotate(-90deg);opacity:0;} 100%{-o-transform-origin:left bottom;-o-transform:rotate(0);opacity:1;} } @keyframes rotateInDownLeft{0%{transform-origin:left bottom;transform:rotate(-90deg);opacity:0;} 100%{transform-origin:left bottom;transform:rotate(0);opacity:1;} } .rotateInDownLeft{-webkit-animation-name:rotateInDownLeft;-moz-animation-name:rotateInDownLeft;-ms-animation-name:rotateInDownLeft;-o-animation-name:rotateInDownLeft;animation-name:rotateInDownLeft;} @-webkit-keyframes rotateInUpRight{0%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(-90deg);opacity:0;} 100%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(0);opacity:1;} } @-moz-keyframes rotateInUpRight{0%{-moz-transform-origin:right bottom;-moz-transform:rotate(-90deg);opacity:0;} 100%{-moz-transform-origin:right bottom;-moz-transform:rotate(0);opacity:1;} } @-ms-keyframes rotateInUpRight{0%{-ms-transform-origin:right bottom;-ms-transform:rotate(-90deg);opacity:0;} 100%{-ms-transform-origin:right bottom;-ms-transform:rotate(0);opacity:1;} } @-o-keyframes rotateInUpRight{0%{-o-transform-origin:right bottom;-o-transform:rotate(-90deg);opacity:0;} 100%{-o-transform-origin:right bottom;-o-transform:rotate(0);opacity:1;} } @keyframes rotateInUpRight{0%{transform-origin:right bottom;transform:rotate(-90deg);opacity:0;} 100%{transform-origin:right bottom;transform:rotate(0);opacity:1;} } .rotateInUpRight{-webkit-animation-name:rotateInUpRight;-moz-animation-name:rotateInUpRight;-ms-animation-name:rotateInUpRight;-o-animation-name:rotateInUpRight;animation-name:rotateInUpRight;} @-webkit-keyframes rotateInDownRight{0%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(90deg);opacity:0;} 100%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(0);opacity:1;} } @-moz-keyframes rotateInDownRight{0%{-moz-transform-origin:right bottom;-moz-transform:rotate(90deg);opacity:0;} 100%{-moz-transform-origin:right bottom;-moz-transform:rotate(0);opacity:1;} } @-ms-keyframes rotateInDownRight{0%{-ms-transform-origin:right bottom;-ms-transform:rotate(90deg);opacity:0;} 100%{-ms-transform-origin:right bottom;-ms-transform:rotate(0);opacity:1;} } @-o-keyframes rotateInDownRight{0%{-o-transform-origin:right bottom;-o-transform:rotate(90deg);opacity:0;} 100%{-o-transform-origin:right bottom;-o-transform:rotate(0);opacity:1;} } @keyframes rotateInDownRight{0%{transform-origin:right bottom;transform:rotate(90deg);opacity:0;} 100%{transform-origin:right bottom;transform:rotate(0);opacity:1;} } .rotateInDownRight{-webkit-animation-name:rotateInDownRight;-moz-animation-name:rotateInDownRight;-ms-animation-name:rotateInDownRight;-o-animation-name:rotateInDownRight;animation-name:rotateInDownRight;} @-webkit-keyframes rotateOut{0%{-webkit-transform-origin:center center;-webkit-transform:rotate(0);opacity:1;} 100%{-webkit-transform-origin:center center;-webkit-transform:rotate(200deg);opacity:0;} } @-moz-keyframes rotateOut{0%{-moz-transform-origin:center center;-moz-transform:rotate(0);opacity:1;} 100%{-moz-transform-origin:center center;-moz-transform:rotate(200deg);opacity:0;} } @-ms-keyframes rotateOut{0%{-ms-transform-origin:center center;-ms-transform:rotate(0);opacity:1;} 100%{-ms-transform-origin:center center;-ms-transform:rotate(200deg);opacity:0;} } @-o-keyframes rotateOut{0%{-o-transform-origin:center center;-o-transform:rotate(0);opacity:1;} 100%{-o-transform-origin:center center;-o-transform:rotate(200deg);opacity:0;} } @keyframes rotateOut{0%{transform-origin:center center;transform:rotate(0);opacity:1;} 100%{transform-origin:center center;transform:rotate(200deg);opacity:0;} } .rotateOut{-webkit-animation-name:rotateOut;-moz-animation-name:rotateOut;-ms-animation-name:rotateOut;-o-animation-name:rotateOut;animation-name:rotateOut;} @-webkit-keyframes rotateOutUpLeft{0%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(0);opacity:1;} 100%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(-90deg);opacity:0;} } @-moz-keyframes rotateOutUpLeft{0%{-moz-transform-origin:left bottom;-moz-transform:rotate(0);opacity:1;} 100%{-moz-transform-origin:left bottom;-moz-transform:rotate(-90deg);opacity:0;} } @-ms-keyframes rotateOutUpLeft{0%{-ms-transform-origin:left bottom;-ms-transform:rotate(0);opacity:1;} 100%{-ms-transform-origin:left bottom;-ms-transform:rotate(-90deg);opacity:0;} } @-o-keyframes rotateOutUpLeft{0%{-o-transform-origin:left bottom;-o-transform:rotate(0);opacity:1;} 100%{-o-transform-origin:left bottom;-o-transform:rotate(-90deg);opacity:0;} } @keyframes rotateOutUpLeft{0%{transform-origin:left bottom;transform:rotate(0);opacity:1;} 100%{-transform-origin:left bottom;-transform:rotate(-90deg);opacity:0;} } .rotateOutUpLeft{-webkit-animation-name:rotateOutUpLeft;-moz-animation-name:rotateOutUpLeft;-ms-animation-name:rotateOutUpLeft;-o-animation-name:rotateOutUpLeft;animation-name:rotateOutUpLeft;} @-webkit-keyframes rotateOutDownLeft{0%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(0);opacity:1;} 100%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(90deg);opacity:0;} } @-moz-keyframes rotateOutDownLeft{0%{-moz-transform-origin:left bottom;-moz-transform:rotate(0);opacity:1;} 100%{-moz-transform-origin:left bottom;-moz-transform:rotate(90deg);opacity:0;} } @-ms-keyframes rotateOutDownLeft{0%{-ms-transform-origin:left bottom;-ms-transform:rotate(0);opacity:1;} 100%{-ms-transform-origin:left bottom;-ms-transform:rotate(90deg);opacity:0;} } @-o-keyframes rotateOutDownLeft{0%{-o-transform-origin:left bottom;-o-transform:rotate(0);opacity:1;} 100%{-o-transform-origin:left bottom;-o-transform:rotate(90deg);opacity:0;} } @keyframes rotateOutDownLeft{0%{transform-origin:left bottom;transform:rotate(0);opacity:1;} 100%{transform-origin:left bottom;transform:rotate(90deg);opacity:0;} } .rotateOutDownLeft{-webkit-animation-name:rotateOutDownLeft;-moz-animation-name:rotateOutDownLeft;-ms-animation-name:rotateOutDownLeft;-o-animation-name:rotateOutDownLeft;animation-name:rotateOutDownLeft;} @-webkit-keyframes rotateOutUpRight{0%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(0);opacity:1;} 100%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(90deg);opacity:0;} } @-moz-keyframes rotateOutUpRight{0%{-moz-transform-origin:right bottom;-moz-transform:rotate(0);opacity:1;} 100%{-moz-transform-origin:right bottom;-moz-transform:rotate(90deg);opacity:0;} } @-ms-keyframes rotateOutUpRight{0%{-ms-transform-origin:right bottom;-ms-transform:rotate(0);opacity:1;} 100%{-ms-transform-origin:right bottom;-ms-transform:rotate(90deg);opacity:0;} } @-o-keyframes rotateOutUpRight{0%{-o-transform-origin:right bottom;-o-transform:rotate(0);opacity:1;} 100%{-o-transform-origin:right bottom;-o-transform:rotate(90deg);opacity:0;} } @keyframes rotateOutUpRight{0%{transform-origin:right bottom;transform:rotate(0);opacity:1;} 100%{transform-origin:right bottom;transform:rotate(90deg);opacity:0;} } .rotateOutUpRight{-webkit-animation-name:rotateOutUpRight;-moz-animation-name:rotateOutUpRight;-ms-animation-name:rotateOutUpRight;-o-animation-name:rotateOutUpRight;animation-name:rotateOutUpRight;} @-webkit-keyframes rotateOutDownRight{0%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(0);opacity:1;} 100%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(-90deg);opacity:0;} } @-moz-keyframes rotateOutDownRight{0%{-moz-transform-origin:right bottom;-moz-transform:rotate(0);opacity:1;} 100%{-moz-transform-origin:right bottom;-moz-transform:rotate(-90deg);opacity:0;} } @-ms-keyframes rotateOutDownRight{0%{-ms-transform-origin:right bottom;-ms-transform:rotate(0);opacity:1;} 100%{-ms-transform-origin:right bottom;-ms-transform:rotate(-90deg);opacity:0;} } @-o-keyframes rotateOutDownRight{0%{-o-transform-origin:right bottom;-o-transform:rotate(0);opacity:1;} 100%{-o-transform-origin:right bottom;-o-transform:rotate(-90deg);opacity:0;} } @keyframes rotateOutDownRight{0%{transform-origin:right bottom;transform:rotate(0);opacity:1;} 100%{transform-origin:right bottom;transform:rotate(-90deg);opacity:0;} } .rotateOutDownRight{-webkit-animation-name:rotateOutDownRight;-moz-animation-name:rotateOutDownRight;-ms-animation-name:rotateOutDownRight;-o-animation-name:rotateOutDownRight;animation-name:rotateOutDownRight;} @-webkit-keyframes hinge{0%{-webkit-transform:rotate(0);-webkit-transform-origin:top left;-webkit-animation-timing-function:ease-in-out;} 20%,60%{-webkit-transform:rotate(80deg);-webkit-transform-origin:top left;-webkit-animation-timing-function:ease-in-out;} 40%{-webkit-transform:rotate(60deg);-webkit-transform-origin:top left;-webkit-animation-timing-function:ease-in-out;} 80%{-webkit-transform:rotate(60deg) translateY(0);opacity:1;-webkit-transform-origin:top left;-webkit-animation-timing-function:ease-in-out;} 100%{-webkit-transform:translateY(700px);opacity:0;} } @-moz-keyframes hinge{0%{-moz-transform:rotate(0);-moz-transform-origin:top left;-moz-animation-timing-function:ease-in-out;} 20%,60%{-moz-transform:rotate(80deg);-moz-transform-origin:top left;-moz-animation-timing-function:ease-in-out;} 40%{-moz-transform:rotate(60deg);-moz-transform-origin:top left;-moz-animation-timing-function:ease-in-out;} 80%{-moz-transform:rotate(60deg) translateY(0);opacity:1;-moz-transform-origin:top left;-moz-animation-timing-function:ease-in-out;} 100%{-moz-transform:translateY(700px);opacity:0;} } @-ms-keyframes hinge{0%{-ms-transform:rotate(0);-ms-transform-origin:top left;-ms-animation-timing-function:ease-in-out;} 20%,60%{-ms-transform:rotate(80deg);-ms-transform-origin:top left;-ms-animation-timing-function:ease-in-out;} 40%{-ms-transform:rotate(60deg);-ms-transform-origin:top left;-ms-animation-timing-function:ease-in-out;} 80%{-ms-transform:rotate(60deg) translateY(0);opacity:1;-ms-transform-origin:top left;-ms-animation-timing-function:ease-in-out;} 100%{-ms-transform:translateY(700px);opacity:0;} } @-o-keyframes hinge{0%{-o-transform:rotate(0);-o-transform-origin:top left;-o-animation-timing-function:ease-in-out;} 20%,60%{-o-transform:rotate(80deg);-o-transform-origin:top left;-o-animation-timing-function:ease-in-out;} 40%{-o-transform:rotate(60deg);-o-transform-origin:top left;-o-animation-timing-function:ease-in-out;} 80%{-o-transform:rotate(60deg) translateY(0);opacity:1;-o-transform-origin:top left;-o-animation-timing-function:ease-in-out;} 100%{-o-transform:translateY(700px);opacity:0;} } @keyframes hinge{0%{transform:rotate(0);transform-origin:top left;animation-timing-function:ease-in-out;} 20%,60%{transform:rotate(80deg);transform-origin:top left;animation-timing-function:ease-in-out;} 40%{transform:rotate(60deg);transform-origin:top left;animation-timing-function:ease-in-out;} 80%{transform:rotate(60deg) translateY(0);opacity:1;transform-origin:top left;animation-timing-function:ease-in-out;} 100%{transform:translateY(700px);opacity:0;} } .hinge{-webkit-animation-name:hinge;-moz-animation-name:hinge;-ms-animation-name:hinge;-o-animation-name:hinge;animation-name:hinge;} /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes rollIn{0%{opacity:0;-webkit-transform:translateX(-100%) rotate(-120deg);} 100%{opacity:1;-webkit-transform:translateX(0px) rotate(0deg);} } @-moz-keyframes rollIn{0%{opacity:0;-moz-transform:translateX(-100%) rotate(-120deg);} 100%{opacity:1;-moz-transform:translateX(0px) rotate(0deg);} } @-ms-keyframes rollIn{0%{opacity:0;-ms-transform:translateX(-100%) rotate(-120deg);} 100%{opacity:1;-ms-transform:translateX(0px) rotate(0deg);} } @-o-keyframes rollIn{0%{opacity:0;-o-transform:translateX(-100%) rotate(-120deg);} 100%{opacity:1;-o-transform:translateX(0px) rotate(0deg);} } @keyframes rollIn{0%{opacity:0;transform:translateX(-100%) rotate(-120deg);} 100%{opacity:1;transform:translateX(0px) rotate(0deg);} } .rollIn{-webkit-animation-name:rollIn;-moz-animation-name:rollIn;-ms-animation-name:rollIn;-o-animation-name:rollIn;animation-name:rollIn;} /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes rollOut{0%{opacity:1;-webkit-transform:translateX(0px) rotate(0deg);} 100%{opacity:0;-webkit-transform:translateX(100%) rotate(120deg);} } @-moz-keyframes rollOut{0%{opacity:1;-moz-transform:translateX(0px) rotate(0deg);} 100%{opacity:0;-moz-transform:translateX(100%) rotate(120deg);} } @-ms-keyframes rollOut{0%{opacity:1;-ms-transform:translateX(0px) rotate(0deg);} 100%{opacity:0;-ms-transform:translateX(100%) rotate(120deg);} } @-o-keyframes rollOut{0%{opacity:1;-o-transform:translateX(0px) rotate(0deg);} 100%{opacity:0;-o-transform:translateX(100%) rotate(120deg);} } @keyframes rollOut{0%{opacity:1;transform:translateX(0px) rotate(0deg);} 100%{opacity:0;transform:translateX(100%) rotate(120deg);} } .rollOut{-webkit-animation-name:rollOut;-moz-animation-name:rollOut;-ms-animation-name:rollOut;-o-animation-name:rollOut;animation-name:rollOut;} .r{-webkit-animation:keke 0.4s linear;-o-animation:keke 0.4s linear;-ms-animation:keke 0.4s linear;-moz-animation:keke 0.4s linear;animation:keke 0.4s linear;} .ry{-webkit-animation:keke-reverse 0.4s linear;-o-animation:keke-reverse 0.4s linear;-ms-animation:keke-reverse 0.4s linear;-moz-animation:keke-reverse 0.4s linear;animation:keke-reverse 0.4s linear;}