@charset "UTF-8"; /*! Animate.css - http://daneden.me/animate Licensed under the MIT license - http://opensource.org/licenses/MIT Copyright (c) 2015 Daniel Eden */ .animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .animated.infinite { -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } a:hover .xr_1as1, a:hover .xr_1aso1, .xr_0as1 { -webkit-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } a:hover .xr_1as2, a:hover .xr_1aso2, .xr_0as2 { -webkit-animation-duration: 0.7s; animation-duration: 0.7s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } a:hover .xr_1as3, a:hover .xr_1aso3, .xr_0as3 { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } a:hover .xr_1as4, a:hover .xr_1aso4, .xr_0as4{ -webkit-animation-duration: 1.5s; animation-duration: 1.5s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } a:hover .xr_1as5, a:hover .xr_1aso5 , .xr_0as5{ -webkit-animation-duration: 2s; animation-duration: 2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .xr_1aso1, .xr_1aso2, .xr_1aso3, .xr_1aso4, .xr_1aso5{visibility: hidden;} a:hover .xr_1aso1, a:hover .xr_1aso2, a:hover .xr_1aso3, a:hover .xr_1aso4, a:hover .xr_1aso5, .xr_nb0:hover .xr_1aso1, .xr_nb0:hover .xr_1aso2, .xr_nb0:hover .xr_1aso3, .xr_nb0:hover .xr_1aso4, .xr_nb0:hover .xr_1aso5 {visibility: visible;} a:hover .xr_1ao {display:none;} .xr_1ao {display:block;} @-webkit-keyframes tr0 { 0% {opacity:1;-webkit-animation-timing-function: ease-out;} 50% {opacity:0;-webkit-animation-timing-function: ease-in;} 100% {opacity:1;-webkit-animation-timing-function: ease-in;} } @-webkit-keyframes tr1 { 0% {opacity:1;transform:none;-webkit-animation-timing-function: ease-out;} 50% {opacity:0;transform:translate3d(0,-20%,0);-webkit-animation-timing-function: ease-in;} 100% {opacity:1;transform:none;-webkit-animation-timing-function: ease-in;} } @-webkit-keyframes tr2 { 0% {opacity:1;transform:none;-webkit-animation-timing-function: ease-out;} 50% {opacity:0;transform:translate3d(20%,0,0);-webkit-animation-timing-function: ease-in;} 100% {opacity:1;transform:none;-webkit-animation-timing-function: ease-in;} } @-webkit-keyframes tr3 { 0% {opacity:1;transform:none;-webkit-animation-timing-function: ease-out;} 50% {opacity:0;transform-origin:top; transform:scale3d(1,0.3,1);-webkit-animation-timing-function: ease-in;} 100% {opacity:1;transform:none;-webkit-animation-timing-function: ease-in;} } @-webkit-keyframes tr4 { 0% {opacity:1;transform:none;-webkit-animation-timing-function: ease-out;} 50% {opacity:0;transform-origin:left; transform:scale3d(0.3,1,1);-webkit-animation-timing-function: ease-in;} 100% {opacity:1;transform:none;-webkit-animation-timing-function: ease-in;} } @-webkit-keyframes tr5 { 0% {opacity:1;transform:none;-webkit-animation-timing-function: ease-out;} 50% {opacity:0;transform:rotate3d(1,0,0,180deg); -ms-transform: rotateX(180deg);-webkit-animation-timing-function: ease-in;} 100% {opacity:1;transform:none;-webkit-animation-timing-function: ease-in;} } @-webkit-keyframes tr6 { 0% {opacity:1;transform:none;-webkit-animation-timing-function: ease-out;} 50% {opacity:0;transform:rotate3d(0,1,0,180deg); -ms-transform: rotateY(180deg);-webkit-animation-timing-function: ease-in;} 100% {opacity:1;transform:none;-webkit-animation-timing-function: ease-in;} } @-webkit-keyframes tr7 { 0% {opacity:1;transform:none;-webkit-animation-timing-function: ease-out;} 50% {opacity:0;transform:rotate3d(0,0,1,180deg);-webkit-animation-timing-function: ease-in;} 100% {opacity:1;transform:none;-webkit-animation-timing-function: ease-in;} } @-webkit-keyframes tr8 { 0% {opacity:1;transform:none;-webkit-animation-timing-function: ease-out;} 50% {opacity:0;transform:scale3d(0.3,0.3,1);-webkit-animation-timing-function: ease-in;} 100% {opacity:1;transform:none;-webkit-animation-timing-function: ease-in;} } @-webkit-keyframes tr9 { 0% {opacity:1;transform:none;-webkit-animation-timing-function: ease-out;} 50% {opacity:0;transform:skew(-30deg,0) translate3d(10%,0,0);-webkit-animation-timing-function: ease-in;} 100% {opacity:1;transform:none;-webkit-animation-timing-function: ease-in;} } @-webkit-keyframes tr10 { 0% {opacity:1;transform:none;-webkit-animation-timing-function: ease-out;} 50% {opacity:0;transform-origin:50% 500%; transform:rotate3d(0,0,1,10deg);-webkit-animation-timing-function: ease-in;} 100% {opacity:1;transform:none;-webkit-animation-timing-function: ease-in;} } @-webkit-keyframes tr11 { 0% {opacity:1;transform:none;-webkit-animation-timing-function: ease-out;} 50% {opacity:0;transform:translate3d(0,-50%,0) scale3d(0.3,0.3,1);-webkit-animation-timing-function: ease-in;} 100% {opacity:1;transform:none;-webkit-animation-timing-function: ease-in;} } @-webkit-keyframes tr12 { 0% {opacity:1;transform:none;-webkit-animation-timing-function: ease-out;} 50% {opacity:0;transform:translate3d(0,20%,0);-webkit-animation-timing-function: ease-in;} 100% {opacity:1;transform:none;-webkit-animation-timing-function: ease-in;} } @-webkit-keyframes tr13 { 0% {opacity:1;transform:none;-webkit-animation-timing-function: ease-out;} 50% {opacity:0;transform:translate3d(-20%,0,0);-webkit-animation-timing-function: ease-in;} 100% {opacity:1;transform:none;-webkit-animation-timing-function: ease-in;} } @keyframes tr0 { 0% {opacity:1;animation-timing-function: ease-out;} 50% {opacity:0;animation-timing-function: ease-in;} 100% {opacity:1;animation-timing-function: ease-in;} } @keyframes tr1 { 0% {opacity:1;transform:none;animation-timing-function: ease-out;} 50% {opacity:0;transform:translate3d(0,-20%,0);animation-timing-function: ease-in;} 99% {opacity:1;transform:translate3d(0,-0.1%,0);animation-timing-function: ease-in;} 100% {opacity:1;transform:none;animation-timing-function: ease-in;} } @keyframes tr2 { 0% {opacity:1;transform:none;animation-timing-function: ease-out;} 50% {opacity:0;transform:translate3d(20%,0,0);animation-timing-function: ease-in;} 99% {opacity:1;transform:translate3d(0.1%,0,0);animation-timing-function: ease-in;} 100% {opacity:1;transform:none;animation-timing-function: ease-in;} } @keyframes tr3 { 0% {opacity:1;transform:none;animation-timing-function: ease-out;} 50% {opacity:0;transform-origin:top; transform:scale3d(1,0.3,1);animation-timing-function: ease-in;} 100% {opacity:1;transform:none;animation-timing-function: ease-in;} } @keyframes tr4 { 0% {opacity:1; transform:none;animation-timing-function: ease-out;} 50% {opacity:0;transform-origin:left; transform:scale3d(0.3,1,1);animation-timing-function: ease-in;} 100% {opacity:1; transform:none;animation-timing-function: ease-in;} } @keyframes tr5 { 0% {opacity:1;transform:none;animation-timing-function: ease-out;} 50% {opacity:0;transform:rotate3d(1,0,0,180deg); -ms-transform: rotateX(180deg);animation-timing-function: ease-in;} 100% {opacity:1;transform:none;animation-timing-function: ease-in;} } @keyframes tr6 { 0% {opacity:1;transform:none;animation-timing-function: ease-out;} 50% {opacity:0;transform:rotate3d(0,1,0,180deg); -ms-transform: rotateY(180deg);animation-timing-function: ease-in;} 100% {opacity:1;transform:none;animation-timing-function: ease-in;} } @keyframes tr7 { 0% {opacity:1;transform:none;animation-timing-function: ease-out;} 50% {opacity:0;transform:rotate3d(0,0,1,180deg);animation-timing-function: ease-in;} 100% {opacity:1;transform:none;animation-timing-function: ease-in;} } @keyframes tr8 { 0% {opacity:1;transform:none;animation-timing-function: ease-out;} 50% {opacity:0;transform:scale3d(0.3,0.3,1);animation-timing-function: ease-in;} 100% {opacity:1;transform:none;animation-timing-function: ease-in;} } @keyframes tr9 { 0% {opacity:1;transform:none;animation-timing-function: ease-out;} 50% {opacity:0;transform:skew(-30deg,0) translate3d(10%,0,0);animation-timing-function: ease-in;} 99% {opacity:1;transform:skew(0,0) translate3d(0.1%,0,0);animation-timing-function: ease-in;} 100% {opacity:1;transform:none;animation-timing-function: ease-in;} } @keyframes tr10 { 0% {opacity:1;transform:none;animation-timing-function: ease-out;} 50% {opacity:0;transform-origin:50% 500%; transform:rotate3d(0,0,1,10deg);animation-timing-function: ease-in;} 100% {opacity:1;transform:none;animation-timing-function: ease-in;} } @keyframes tr11 { 0% {opacity:1;transform:none;animation-timing-function: ease-out;} 50% {opacity:0;transform:translate3d(0,-50%,0) scale3d(0.3,0.3,1);animation-timing-function: ease-in;} 99% {opacity:1;transform:translate3d(0,-0.1%,0) scale3d(1,1,1);animation-timing-function: ease-in;} 100% {opacity:1;transform:none;animation-timing-function: ease-in;} } @keyframes tr12 { 0% {opacity:1;transform:none;animation-timing-function: ease-out;} 50% {opacity:0;transform:translate3d(0,20%,0);animation-timing-function: ease-in;} 99% {opacity:1;transform:translate3d(0,0.1%,0);animation-timing-function: ease-in;} 100% {opacity:1;transform:none;animation-timing-function: ease-in;} } @keyframes tr13 { 0% {opacity:1;transform:none;animation-timing-function: ease-out;} 50% {opacity:0;transform:translate3d(-20%,0,0);animation-timing-function: ease-in;} 99% {opacity:1;transform:translate3d(-0.1%,0,0);animation-timing-function: ease-in;} 100% {opacity:1;transform:none;animation-timing-function: ease-in;} } a:hover .xr_1a_0, .xr_0a_0 {-webkit-animation-name: tr0; animation-name: tr0;} a:hover .xr_1a_1, .xr_0a_1 {-webkit-animation-name: tr1; animation-name: tr1;} a:hover .xr_1a_2, .xr_0a_2 {-webkit-animation-name: tr2; animation-name: tr2;} a:hover .xr_1a_3, .xr_0a_3 {-webkit-animation-name: tr3; animation-name: tr3;} a:hover .xr_1a_4, .xr_0a_4 {-webkit-animation-name: tr4; animation-name: tr4;} a:hover .xr_1a_5, .xr_0a_5 {-webkit-animation-name: tr5; animation-name: tr5;} a:hover .xr_1a_6, .xr_0a_6 {-webkit-animation-name: tr6; animation-name: tr6;} a:hover .xr_1a_7, .xr_0a_7 {-webkit-animation-name: tr7; animation-name: tr7;} a:hover .xr_1a_8, .xr_0a_8{-webkit-animation-name: tr8; animation-name: tr8;} a:hover .xr_1a_9, .xr_0a_9 {-webkit-animation-name: tr9; animation-name: tr9;} a:hover .xr_1a_10, .xr_0a_10 {-webkit-animation-name: tr10; animation-name: tr10;} a:hover .xr_1a_11, .xr_0a_11 {-webkit-animation-name: tr11; animation-name: tr11;} a:hover .xr_1a_12, .xr_0a_12 {-webkit-animation-name: tr12; animation-name: tr12;} a:hover .xr_1a_13, .xr_0a_13 {-webkit-animation-name: tr13; animation-name: tr13;} .xr_ad01 {-webkit-animation-duration: 0.1s;} .xr_ad02 {-webkit-animation-duration: 0.2s;} .xr_ad03 {-webkit-animation-duration: 0.3s;} .xr_ad04 {-webkit-animation-duration: 0.4s;} .xr_ad05 {-webkit-animation-duration: 0.5s;} .xr_ad06 {-webkit-animation-duration: 0.6s;} .xr_ad07 {-webkit-animation-duration: 0.7s;} .xr_ad08 {-webkit-animation-duration: 0.8s;} .xr_ad09 {-webkit-animation-duration: 0.9s;} .xr_ad10 {-webkit-animation-duration: 1s;} .xr_ad12 {-webkit-animation-duration: 1.2s;} .xr_ad14 {-webkit-animation-duration: 1.4s;} .xr_ad16 {-webkit-animation-duration: 1.6s;} .xr_ad18 {-webkit-animation-duration: 1.8s;} .xr_ad20 {-webkit-animation-duration: 2s;} .xr_ad23 {-webkit-animation-duration: 2.3s;} .xr_ad26 {-webkit-animation-duration: 2.6s;} .xr_ad29 {-webkit-animation-duration: 2.9s;} .xr_ad30 {-webkit-animation-duration: 3s;} .xr_ad34 {-webkit-animation-duration: 3.4s;} .xr_ad38 {-webkit-animation-duration: 3.8s;} .xr_ad40 {-webkit-animation-duration: 4s;} .xr_ad45 {-webkit-animation-duration: 4.5s;} .xr_ad50 {-webkit-animation-duration: 5s;} @-webkit-keyframes bounce { from, 20%, 53%, 80%, 100% { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); -webkit-transform: translate3d(0,0,0); } 40%, 43% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); -webkit-transform: translate3d(0, -30px, 0); } 70% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); -webkit-transform: translate3d(0, -15px, 0); } 90% { -webkit-transform: translate3d(0,-4px,0); } } @keyframes bounce { from, 20%, 53%, 80%, 100% { animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); transform: translate3d(0,0,0); } 40%, 43% { animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); transform: translate3d(0, -30px, 0); } 70% { animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); transform: translate3d(0, -15px, 0); } 90% { transform: translate3d(0,-4px,0); } } .bounce { -webkit-animation-name: bounce; animation-name: bounce; -webkit-transform-origin: center bottom; transform-origin: center bottom; } @keyframes flash { from, 50%, 100% { opacity: 1; } 25%, 75% { opacity: 0; } } .flash { -webkit-animation-name: flash; animation-name: flash; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes pulse { from { -webkit-transform: scale3d(1, 1, 1); } 50% { -webkit-transform: scale3d(1.15, 1.15, 1.15); } 100% { -webkit-transform: scale3d(1, 1, 1); } } @keyframes pulse { from { transform: scale3d(1, 1, 1); } 50% { transform: scale3d(1.15, 1.15, 1.15); } 100% { transform: scale3d(1, 1, 1); } } .pulse { -webkit-animation-name: pulse; 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(.95, 1.05, 1); } 75% { -webkit-transform: scale3d(1.05, .95, 1); } 100% { -webkit-transform: scale3d(1, 1, 1); } } @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(.95, 1.05, 1); } 75% { transform: scale3d(1.05, .95, 1); } 100% { transform: scale3d(1, 1, 1); } } .rubberBand { -webkit-animation-name: rubberBand; animation-name: rubberBand; } @-webkit-keyframes shake { from, 100% { -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); } } @keyframes shake { from, 100% { transform: translate3d(0, 0, 0); } 10%, 30%, 50%, 70%, 90% { transform: translate3d(-10px, 0, 0); } 20%, 40%, 60%, 80% { transform: translate3d(10px, 0, 0); } } .shake { -webkit-animation-name: shake; 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); } } @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 { -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-name: headShake; 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); } 100% { -webkit-transform: rotate3d(0, 0, 1, 0deg); } } @keyframes swing { 20% { transform: rotate3d(0, 0, 1, 15deg); } 40% { transform: rotate3d(0, 0, 1, -10deg); } 60% { transform: rotate3d(0, 0, 1, 5deg); } 80% { transform: rotate3d(0, 0, 1, -5deg); } 100% { transform: rotate3d(0, 0, 1, 0deg); } } .swing { -webkit-transform-origin: top center; transform-origin: top center; -webkit-animation-name: swing; animation-name: swing; } @-webkit-keyframes tada { from { -webkit-transform: scale3d(1, 1, 1); } 10%, 20% { -webkit-transform: scale3d(.9, .9, .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); } 100% { -webkit-transform: scale3d(1, 1, 1); } } @keyframes tada { from { transform: scale3d(1, 1, 1); } 10%, 20% { transform: scale3d(.9, .9, .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); } 100% { transform: scale3d(1, 1, 1); } } .tada { -webkit-animation-name: tada; animation-name: tada; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-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); } 100% { -webkit-transform: none; } } @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); } 100% { transform: none; } } .wobble { -webkit-animation-name: wobble; animation-name: wobble; } @-webkit-keyframes jello { from, 100% { -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); } } @keyframes jello { from, 100% { 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 { -webkit-animation-name: jello; animation-name: jello; -webkit-transform-origin: center; transform-origin: center; } @-webkit-keyframes bounceIn { from, 20%, 40%, 60%, 80%, 100% { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); } 20% { -webkit-transform: scale3d(1.1, 1.1, 1.1); } 40% { -webkit-transform: scale3d(.9, .9, .9); } 60% { opacity: 1; -webkit-transform: scale3d(1.03, 1.03, 1.03); } 80% { -webkit-transform: scale3d(.97, .97, .97); } 100% { opacity: 1; -webkit-transform: scale3d(1, 1, 1); } } @keyframes bounceIn { from, 20%, 40%, 60%, 80%, 100% { animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; transform: scale3d(.3, .3, .3); } 20% { transform: scale3d(1.1, 1.1, 1.1); } 40% { transform: scale3d(.9, .9, .9); } 60% { opacity: 1; transform: scale3d(1.03, 1.03, 1.03); } 80% { transform: scale3d(.97, .97, .97); } 100% { opacity: 1; transform: scale3d(1, 1, 1); } } .bounceIn { -webkit-animation-name: bounceIn; animation-name: bounceIn; } @-webkit-keyframes bounceInDown { from, 60%, 75%, 90%, 100% { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; -webkit-transform-origin: 0 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); } 100% { -webkit-transform: none; } } @keyframes bounceInDown { from, 60%, 75%, 90%, 100% { animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; transform: translate3d(0, -3000px, 0); } 60% { opacity: 1; transform: translate3d(0, 25px, 0); } 75% { transform: translate3d(0, -10px, 0); } 90% { transform: translate3d(0, 5px, 0); } 100% { zoom: 1; transform: none; } } .bounceInDown { -webkit-animation-name: bounceInDown; animation-name: bounceInDown; } @-webkit-keyframes bounceInLeft { from, 60%, 75%, 90%, 100% { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; -webkit-transform-origin: 0 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); } 100% { -webkit-transform: none; } } @keyframes bounceInLeft { from, 60%, 75%, 90%, 100% { animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; transform: translate3d(-3000px, 0, 0); } 60% { opacity: 1; transform: translate3d(25px, 0, 0); } 75% { transform: translate3d(-10px, 0, 0); } 90% { transform: translate3d(5px, 0, 0); } 100% { zoom: 1; transform: none; } } .bounceInLeft { -webkit-animation-name: bounceInLeft; animation-name: bounceInLeft; } @-webkit-keyframes bounceInRight { from, 60%, 75%, 90%, 100% { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } from { opacity: 0; -webkit-transform-origin: 0 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); } 100% { -webkit-transform: none; } } @keyframes bounceInRight { from, 60%, 75%, 90%, 100% { animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } from { opacity: 0; transform: translate3d(3000px, 0, 0); } 60% { opacity: 1; transform: translate3d(-25px, 0, 0); } 75% { transform: translate3d(10px, 0, 0); } 90% { transform: translate3d(-5px, 0, 0); } 100% { zoom: 1; transform: none; } } .bounceInRight { -webkit-animation-name: bounceInRight; animation-name: bounceInRight; } @-webkit-keyframes bounceInUp { from, 60%, 75%, 90%, 100% { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } from { opacity: 0; -webkit-transform-origin: 0 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); } 100% { -webkit-transform: translate3d(0, 0, 0); } } @keyframes bounceInUp { from, 60%, 75%, 90%, 100% { animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } from { opacity: 0; transform: translate3d(0, 3000px, 0); } 60% { opacity: 1; transform: translate3d(0, -20px, 0); } 75% { transform: translate3d(0, 10px, 0); } 90% { transform: translate3d(0, -5px, 0); } 100% { zoom: 1; transform: translate3d(0, 0, 0); } } .bounceInUp { -webkit-animation-name: bounceInUp; animation-name: bounceInUp; } @-webkit-keyframes bounceOut { 20% { -webkit-transform: scale3d(.9, .9, .9); } 50%, 55% { opacity: 1; -webkit-transform: scale3d(1.1, 1.1, 1.1); } 100% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); } } @keyframes bounceOut { 20% { transform: scale3d(.9, .9, .9); } 50%, 55% { opacity: 1; transform: scale3d(1.1, 1.1, 1.1); } 100% { opacity: 0; transform: scale3d(.3, .3, .3); } } .bounceOut { -webkit-animation-name: bounceOut; animation-name: bounceOut; } @-webkit-keyframes bounceOutDown { 20% { -webkit-transform: translate3d(0, 10px, 0); } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); } 100% { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); } } @keyframes bounceOutDown { 20% { transform: translate3d(0, 10px, 0); } 40%, 45% { opacity: 1; transform: translate3d(0, -20px, 0); } 100% { opacity: 0; transform: translate3d(0, 2000px, 0); } } .bounceOutDown { -webkit-animation-name: bounceOutDown; animation-name: bounceOutDown; } @-webkit-keyframes bounceOutLeft { 20% { opacity: 1; -webkit-transform: translate3d(20px, 0, 0); } 100% { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); } } @keyframes bounceOutLeft { 20% { opacity: 1; transform: translate3d(20px, 0, 0); } 100% { opacity: 0; transform: translate3d(-2000px, 0, 0); } } .bounceOutLeft { -webkit-animation-name: bounceOutLeft; animation-name: bounceOutLeft; } @-webkit-keyframes bounceOutRight { 20% { opacity: 1; -webkit-transform: translate3d(-20px, 0, 0); } 100% { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); } } @keyframes bounceOutRight { 20% { opacity: 1; transform: translate3d(-20px, 0, 0); } 100% { opacity: 0; transform: translate3d(2000px, 0, 0); } } .bounceOutRight { -webkit-animation-name: bounceOutRight; animation-name: bounceOutRight; } @-webkit-keyframes bounceOutUp { 20% { -webkit-transform: translate3d(0, -10px, 0); } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, 20px, 0); } 100% { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); } } @keyframes bounceOutUp { 20% { transform: translate3d(0, -10px, 0); } 40%, 45% { opacity: 1; transform: translate3d(0, 20px, 0); } 100% { opacity: 0; transform: translate3d(0, -2000px, 0); } } .bounceOutUp { -webkit-animation-name: bounceOutUp; animation-name: bounceOutUp; } @keyframes fadeIn { from { opacity: 0; } 100% { opacity: 1; } } .fadeIn { -webkit-animation-name: fadeIn; animation-name: fadeIn; } @-webkit-keyframes fadeInDown { from { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); } 100% { opacity: 1; -webkit-transform: none; } } @keyframes fadeInDown { from { opacity: 0; transform: translate3d(0, -100%, 0); } 100% { opacity: 1; transform: none; } } .fadeInDown { -webkit-animation-name: fadeInDown; animation-name: fadeInDown; } @-webkit-keyframes fadeInDownBig { from { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); } 100% { opacity: 1; -webkit-transform: none; } } @keyframes fadeInDownBig { from { opacity: 0; transform: translate3d(0, -2000px, 0); } 100% { opacity: 1; transform: none; } } .fadeInDownBig { -webkit-animation-name: fadeInDownBig; animation-name: fadeInDownBig; } @-webkit-keyframes fadeInLeft { from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); } 100% { opacity: 1; -webkit-transform: none; } } @keyframes fadeInLeft { from { opacity: 0; transform: translate3d(-100%, 0, 0); } 100% { opacity: 1; transform: none; } } .fadeInLeft { -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft; } @-webkit-keyframes fadeInLeftBig { from { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); } 100% { opacity: 1; -webkit-transform: none; } } @keyframes fadeInLeftBig { from { opacity: 0; transform: translate3d(-2000px, 0, 0); } 100% { opacity: 1; transform: none; } } .fadeInLeftBig { -webkit-animation-name: fadeInLeftBig; animation-name: fadeInLeftBig; } @-webkit-keyframes fadeInRight { from { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); } 100% { opacity: 1; -webkit-transform: none; } } @keyframes fadeInRight { from { opacity: 0; transform: translate3d(100%, 0, 0); } 100% { opacity: 1; transform: none; } } .fadeInRight { -webkit-animation-name: fadeInRight; animation-name: fadeInRight; } @-webkit-keyframes fadeInRightBig { from { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); } 100% { opacity: 1; -webkit-transform: none; } } @keyframes fadeInRightBig { from { opacity: 0; transform: translate3d(2000px, 0, 0); } 100% { opacity: 1; transform: none; } } .fadeInRightBig { -webkit-animation-name: fadeInRightBig; animation-name: fadeInRightBig; } @-webkit-keyframes fadeInUp { from { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); } 100% { opacity: 1; -webkit-transform: none; } } @keyframes fadeInUp { from { opacity: 0; transform: translate3d(0, 100%, 0); } 100% { opacity: 1; transform: none; } } .fadeInUp { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; } @-webkit-keyframes fadeInUpBig { from { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); } 100% { opacity: 1; -webkit-transform: none; } } @keyframes fadeInUpBig { from { opacity: 0; transform: translate3d(0, 2000px, 0); } 100% { opacity: 1; transform: none; } } .fadeInUpBig { -webkit-animation-name: fadeInUpBig; animation-name: fadeInUpBig; } @keyframes fadeOut { from { opacity: 1; } 100% { opacity: 0; } } .fadeOut { -webkit-animation-name: fadeOut; animation-name: fadeOut; } @-webkit-keyframes fadeOutDown { from { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); } } @keyframes fadeOutDown { from { opacity: 1; } 100% { opacity: 0; transform: translate3d(0, 100%, 0); } } .fadeOutDown { -webkit-animation-name: fadeOutDown; animation-name: fadeOutDown; } @-webkit-keyframes fadeOutDownBig { from { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); } } @keyframes fadeOutDownBig { from { opacity: 1; } 100% { opacity: 0; transform: translate3d(0, 2000px, 0); } } .fadeOutDownBig { -webkit-animation-name: fadeOutDownBig; animation-name: fadeOutDownBig; } @-webkit-keyframes fadeOutLeft { from { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); } } @keyframes fadeOutLeft { from { opacity: 1; } 100% { opacity: 0; transform: translate3d(-100%, 0, 0); } } .fadeOutLeft { -webkit-animation-name: fadeOutLeft; animation-name: fadeOutLeft; } @-webkit-keyframes fadeOutLeftBig { from { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); } } @keyframes fadeOutLeftBig { from { opacity: 1; } 100% { opacity: 0; transform: translate3d(-2000px, 0, 0); } } .fadeOutLeftBig { -webkit-animation-name: fadeOutLeftBig; animation-name: fadeOutLeftBig; } @-webkit-keyframes fadeOutRight { from { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); } } @keyframes fadeOutRight { from { opacity: 1; } 100% { opacity: 0; transform: translate3d(100%, 0, 0); } } .fadeOutRight { -webkit-animation-name: fadeOutRight; animation-name: fadeOutRight; } @-webkit-keyframes fadeOutRightBig { from { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); } } @keyframes fadeOutRightBig { from { opacity: 1; } 100% { opacity: 0; transform: translate3d(2000px, 0, 0); } } .fadeOutRightBig { -webkit-animation-name: fadeOutRightBig; animation-name: fadeOutRightBig; } @-webkit-keyframes fadeOutUp { from { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); } } @keyframes fadeOutUp { from { opacity: 1; } 100% { opacity: 0; transform: translate3d(0, -100%, 0); } } .fadeOutUp { -webkit-animation-name: fadeOutUp; animation-name: fadeOutUp; } @-webkit-keyframes fadeOutUpBig { from { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); } } @keyframes fadeOutUpBig { from { opacity: 1; } 100% { opacity: 0; transform: translate3d(0, -2000px, 0); } } .fadeOutUpBig { -webkit-animation-name: fadeOutUpBig; 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(.95, .95, .95); -webkit-animation-timing-function: ease-in; } 100% { -webkit-transform: perspective(400px); -webkit-animation-timing-function: ease-in; } } @keyframes flip { from { transform: perspective(400px) rotate3d(0, 1, 0, -360deg); animation-timing-function: ease-out; } 40% { transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); animation-timing-function: ease-out; } 50% { transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); animation-timing-function: ease-in; } 80% { transform: perspective(400px) scale3d(.95, .95, .95); animation-timing-function: ease-in; } 100% { transform: perspective(400px); animation-timing-function: ease-in; } } .animated.flip { -webkit-backface-visibility: visible; backface-visibility: visible; -webkit-animation-name: flip; 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); } 100% { -webkit-transform: perspective(400px); } } @keyframes flipInX { from { transform: perspective(400px) rotate3d(1, 0, 0, 90deg); animation-timing-function: ease-in; opacity: 0; } 40% { transform: perspective(400px) rotate3d(1, 0, 0, -20deg); animation-timing-function: ease-in; } 60% { transform: perspective(400px) rotate3d(1, 0, 0, 10deg); opacity: 1; } 80% { transform: perspective(400px) rotate3d(1, 0, 0, -5deg); } 100% { transform: perspective(400px); } } .flipInX { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInX; 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); } 100% { -webkit-transform: perspective(400px); } } @keyframes flipInY { from { transform: perspective(400px) rotate3d(0, 1, 0, 90deg); animation-timing-function: ease-in; opacity: 0; } 40% { transform: perspective(400px) rotate3d(0, 1, 0, -20deg); animation-timing-function: ease-in; } 60% { transform: perspective(400px) rotate3d(0, 1, 0, 10deg); opacity: 1; } 80% { transform: perspective(400px) rotate3d(0, 1, 0, -5deg); } 100% { transform: perspective(400px); } } .flipInY { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInY; animation-name: flipInY; } @-webkit-keyframes flipOutX { from { -webkit-transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); opacity: 1; } 100% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); opacity: 0; } } @keyframes flipOutX { from { transform: perspective(400px); } 30% { transform: perspective(400px) rotate3d(1, 0, 0, -20deg); opacity: 1; } 100% { transform: perspective(400px) rotate3d(1, 0, 0, 90deg); opacity: 0; } } .flipOutX { -webkit-animation-name: flipOutX; 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; } 100% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); opacity: 0; } } @keyframes flipOutY { from { transform: perspective(400px); } 30% { transform: perspective(400px) rotate3d(0, 1, 0, -15deg); opacity: 1; } 100% { transform: perspective(400px) rotate3d(0, 1, 0, 90deg); opacity: 0; } } .flipOutY { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipOutY; animation-name: flipOutY; } @-webkit-keyframes lightSpeedIn { from { -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg); opacity: 0; } 60% { -webkit-transform: translate3d(0, 0, 0) skewX(20deg); opacity: 1; } 80% { -webkit-transform: translate3d(0, 0, 0) skewX(-5deg); opacity: 1; } 100% { -webkit-transform: none; opacity: 1; } } @keyframes lightSpeedIn { from { transform: translate3d(100%, 0, 0) skewX(-30deg); opacity: 0; } 60% { transform: translate3d(0, 0, 0) skewX(20deg); opacity: 1; } 80% { transform: translate3d(0, 0, 0) skewX(-5deg); opacity: 1; } 100% { transform: none; opacity: 1; } } .lightSpeedIn { -webkit-animation-name: lightSpeedIn; animation-name: lightSpeedIn; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } @-webkit-keyframes lightSpeedOut { from { opacity: 1; } 100% { -webkit-transform: translate3d(100%, 0, 0) skewX(30deg); opacity: 0; } } @keyframes lightSpeedOut { from { opacity: 1; } 100% { transform: translate3d(100%, 0, 0) skewX(30deg); opacity: 0; } } .lightSpeedOut { -webkit-animation-name: lightSpeedOut; animation-name: lightSpeedOut; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } @-webkit-keyframes rotateIn { from { -webkit-transform-origin: 50% 50%; -webkit-transform: rotate3d(0, 0, 1, -179deg); opacity: 0; } 100% { -webkit-transform-origin: 50% 50%; -webkit-transform: none; opacity: 1; } } @keyframes rotateIn { from { transform-origin: 50% 50%; transform: rotate3d(0, 0, 1, -179deg); opacity: 0; } 100% { transform-origin: 50% 50%; transform: none; opacity: 1; } } .rotateIn { -webkit-animation-name: rotateIn; animation-name: rotateIn; } @-webkit-keyframes rotateInDownLeft { from { -webkit-transform-origin: 0 100%; -webkit-transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } 100% { -webkit-transform-origin: 0 100%; -webkit-transform: none; opacity: 1; } } @keyframes rotateInDownLeft { from { transform-origin: 0 100%; transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } 100% { transform-origin: 0 100%; transform: none; opacity: 1; } } .rotateInDownLeft { -webkit-animation-name: rotateInDownLeft; animation-name: rotateInDownLeft; } @-webkit-keyframes rotateInDownRight { from { -webkit-transform-origin: 100% 100%; -webkit-transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } 100% { -webkit-transform-origin: 100% 100%; -webkit-transform: none; opacity: 1; } } @keyframes rotateInDownRight { from { transform-origin: 100% 100%; transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } 100% { transform-origin: 100% 100%; transform: none; opacity: 1; } } .rotateInDownRight { -webkit-animation-name: rotateInDownRight; animation-name: rotateInDownRight; } @-webkit-keyframes rotateInUpLeft { from { -webkit-transform-origin: 0 100%; -webkit-transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } 100% { -webkit-transform-origin: 0 100%; -webkit-transform: none; opacity: 1; } } @keyframes rotateInUpLeft { from { transform-origin: 0 100%; transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } 100% { transform-origin: 0 100%; transform: none; opacity: 1; } } .rotateInUpLeft { -webkit-animation-name: rotateInUpLeft; animation-name: rotateInUpLeft; } @-webkit-keyframes rotateInUpRight { from { -webkit-transform-origin: 100% 100%; -webkit-transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } 100% { -webkit-transform-origin: 100% 100%; -webkit-transform: none; opacity: 1; } } @keyframes rotateInUpRight { from { transform-origin: 100% 100%; transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } 100% { transform-origin: 100% 100%; transform: none; opacity: 1; } } .rotateInUpRight { -webkit-animation-name: rotateInUpRight; animation-name: rotateInUpRight; } @-webkit-keyframes rotateOut { from { -webkit-transform-origin: 50% 50%; opacity: 1; } 100% { -webkit-transform-origin: 50% 50%; -webkit-transform: rotate3d(0, 0, 1, 200deg); opacity: 0; } } @keyframes rotateOut { from { transform-origin: 50% 50%; opacity: 1; } 100% { transform-origin: 50% 50%; transform: rotate3d(0, 0, 1, 200deg); opacity: 0; } } .rotateOut { -webkit-animation-name: rotateOut; animation-name: rotateOut; } @-webkit-keyframes rotateOutDownLeft { from { -webkit-transform-origin: 0 100%; opacity: 1; } 100% { -webkit-transform-origin: 0 100%; -webkit-transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } } @keyframes rotateOutDownLeft { from { transform-origin: 0 100%; opacity: 1; } 100% { transform-origin: 0 100%; transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } } .rotateOutDownLeft { -webkit-animation-name: rotateOutDownLeft; animation-name: rotateOutDownLeft; } @-webkit-keyframes rotateOutDownRight { from { -webkit-transform-origin: 100% 100%; opacity: 1; } 100% { -webkit-transform-origin: 100% 100%; -webkit-transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } } @keyframes rotateOutDownRight { from { transform-origin: 100% 100%; opacity: 1; } 100% { transform-origin: 100% 100%; transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } } .rotateOutDownRight { -webkit-animation-name: rotateOutDownRight; animation-name: rotateOutDownRight; } @-webkit-keyframes rotateOutUpLeft { from { -webkit-transform-origin: 0 100%; opacity: 1; } 100% { -webkit-transform-origin: 0 100%; -webkit-transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } } @keyframes rotateOutUpLeft { from { transform-origin: 0 100%; opacity: 1; } 100% { transform-origin: 0 100%; transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } } .rotateOutUpLeft { -webkit-animation-name: rotateOutUpLeft; animation-name: rotateOutUpLeft; } @-webkit-keyframes rotateOutUpRight { from { -webkit-transform-origin: 100% 100%; opacity: 1; } 100% { -webkit-transform-origin: 100% 100%; -webkit-transform: rotate3d(0, 0, 1, 90deg); opacity: 0; } } @keyframes rotateOutUpRight { from { transform-origin: 100% 100%; opacity: 1; } 100% { transform-origin: 100% 100%; transform: rotate3d(0, 0, 1, 90deg); opacity: 0; } } .rotateOutUpRight { -webkit-animation-name: rotateOutUpRight; 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; } 100% { -webkit-transform: translate3d(0, 700px, 0); opacity: 0; } } @keyframes hinge { 0% { transform-origin: top left; animation-timing-function: ease-in-out; } 20%, 60% { transform: rotate3d(0, 0, 1, 80deg); transform-origin: top left; animation-timing-function: ease-in-out; } 40%, 80% { transform: rotate3d(0, 0, 1, 60deg); transform-origin: top left; animation-timing-function: ease-in-out; opacity: 1; } 100% { transform: translate3d(0, 700px, 0); opacity: 0; } } .hinge { -webkit-animation-name: hinge; animation-name: hinge; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes { from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); } 100% { opacity: 1; -webkit-transform: none; } } @keyframes rollIn { from { opacity: 0; transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); } 100% { opacity: 1; transform: none; } } .rollIn { -webkit-animation-name: rollIn; animation-name: rollIn; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes rollOut { from { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); } } @keyframes rollOut { from { opacity: 1; } 100% { opacity: 0; transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); } } .rollOut { -webkit-animation-name: rollOut; animation-name: rollOut; } @-webkit-keyframes zoomIn { from { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); } 50% { opacity: 1; } } @keyframes zoomIn { from { opacity: 0; transform: scale3d(.3, .3, .3); } 50% { opacity: 1; } } .zoomIn { -webkit-animation-name: zoomIn; animation-name: zoomIn; } @-webkit-keyframes zoomInDown { from { -webkit-transform-origin: 50% 50%; opacity: 0; -webkit-transform: translate3d(0, -100%, 0) scale3d(.1, .1, .1); } 100% { opacity: 1; -webkit-transform: translate3d(0, 0, 0) scale3d(1, 1, 1); } } @keyframes zoomInDown { from { transform-origin: 50% 50%; opacity: 0; transform: translate3d(0, -100%, 0) scale3d(.1, .1, .1); } 100% { opacity: 1; transform: translate3d(0, 0, 0) scale3d(1, 1, 1); } } .zoomInDown { -webkit-animation-name: zoomInDown; animation-name: zoomInDown; } @-webkit-keyframes zoomInLeft { from { -webkit-transform-origin: 50% 50%; opacity: 0; -webkit-transform: translate3d(-100%, 0, 0) scale3d(.1, .1, .1); } 100% { opacity: 1; -webkit-transform: translate3d(0, 0, 0) scale3d(1, 1, 1); } } @keyframes zoomInLeft { from { transform-origin: 50% 50%; opacity: 0; transform: translate3d(-100%, 0, 0) scale3d(.1, .1, .1); } 100% { opacity: 1; transform: translate3d(0, 0, 0) scale3d(1, 1, 1); } } .zoomInLeft { -webkit-animation-name: zoomInLeft; animation-name: zoomInLeft; } @-webkit-keyframes zoomInRight { from { -webkit-transform-origin: 50% 50%; opacity: 0; -webkit-transform: translate3d(100%, 0, 0) scale3d(.1, .1, .1); } 100% { opacity: 1; -webkit-transform: translate3d(0, 0, 0) scale3d(1, 1, 1); } } @keyframes zoomInRight { from { transform-origin: 50% 50%; opacity: 0; transform: translate3d(100%, 0, 0) scale3d(.1, .1, .1); } 100% { opacity: 1; transform: translate3d(0, 0, 0) scale3d(1, 1, 1); } } .zoomInRight { -webkit-animation-name: zoomInRight; animation-name: zoomInRight; } @-webkit-keyframes zoomInUp { from { -webkit-transform-origin: 50% 50%; opacity: 0; -webkit-transform: translate3d(0, 100%, 0) scale3d(.1, .1, .1); } 100% { opacity: 1; -webkit-transform: translate3d(0, 0, 0) scale3d(1, 1, 1); } } @keyframes zoomInUp { from { transform-origin: 50% 50%; opacity: 0; transform: translate3d(0, 100%, 0) scale3d(.1, .1, .1); } 100% { opacity: 1; transform: translate3d(0, 0, 0) scale3d(1, 1, 1); } } .zoomInUp { -webkit-animation-name: zoomInUp; animation-name: zoomInUp; } @keyframes zoomInDownI { from { transform-origin: 50% 50%; opacity: 0; transform: translate3d(0, -300px, 0) scale3d(.1, .1, .1); } 100% { opacity: 1; transform: translate3d(0, 0, 0) scale3d(1, 1, 1); } } .zoomInDownI { animation-name: zoomInDownI; } @keyframes zoomInLeftI { from { transform-origin: 50% 50%; opacity: 0; transform: translate3d(-300px, 0, 0) scale3d(.1, .1, .1); } 100% { opacity: 1; -webkit-transform: translate3d(0, 0, 0) scale3d(1, 1, 1); transform: translate3d(0, 0, 0) scale3d(1, 1, 1); } } .zoomInLeftI { animation-name: zoomInLeftI; } @keyframes zoomInRightI { from { transform-origin: 50% 50%; opacity: 0; transform: translate3d(300px, 0, 0) scale3d(.1, .1, .1); } 100% { opacity: 1; -webkit-transform: translate3d(0, 0, 0) scale3d(1, 1, 1); transform: translate3d(0, 0, 0) scale3d(1, 1, 1); } } .zoomInRightI { animation-name: zoomInRightI; } @keyframes zoomInUpI { from { transform-origin: 50% 50%; opacity: 0; transform: translate3d(0, 300px, 0) scale3d(.1, .1, .1); } 100% { opacity: 1; transform: translate3d(0, 0, 0) scale3d(1, 1, 1); } } .zoomInUpI { animation-name: zoomInUpI; } @-webkit-keyframes zoomOut { from { opacity: 1; } 50% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); } 100% { opacity: 0; } } @keyframes zoomOut { from { opacity: 1; } 50% { opacity: 0; transform: scale3d(.3, .3, .3); } 100% { opacity: 0; } } .zoomOut { -webkit-animation-name: zoomOut; animation-name: zoomOut; } @-webkit-keyframes zoomOutDown { 40% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 100% { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); -webkit-transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } @keyframes zoomOutDown { 40% { opacity: 1; transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 100% { opacity: 0; transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); transform-origin: center bottom; animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } .zoomOutDown { -webkit-animation-name: zoomOutDown; animation-name: zoomOutDown; } @-webkit-keyframes zoomOutLeft { 40% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); } 100% { opacity: 0; -webkit-transform: scale(.1) translate3d(-2000px, 0, 0); -webkit-transform-origin: left center; } } @keyframes zoomOutLeft { 40% { opacity: 1; transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); } 100% { opacity: 0; transform: scale(.1) translate3d(-2000px, 0, 0); transform-origin: left center; } } .zoomOutLeft { -webkit-animation-name: zoomOutLeft; animation-name: zoomOutLeft; } @-webkit-keyframes zoomOutRight { 40% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); } 100% { opacity: 0; -webkit-transform: scale(.1) translate3d(2000px, 0, 0); -webkit-transform-origin: right center; } } @keyframes zoomOutRight { 40% { opacity: 1; transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); } 100% { opacity: 0; transform: scale(.1) translate3d(2000px, 0, 0); transform-origin: right center; } } .zoomOutRight { -webkit-animation-name: zoomOutRight; animation-name: zoomOutRight; } @-webkit-keyframes zoomOutUp { 40% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 100% { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); -webkit-transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } @keyframes zoomOutUp { 40% { opacity: 1; transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 100% { opacity: 0; transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); transform-origin: center bottom; animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } .zoomOutUp { -webkit-animation-name: zoomOutUp; animation-name: zoomOutUp; } @-webkit-keyframes slideInDown { from { -webkit-transform: translate3d(0, -1000px, 0); visibility: visible; } 100% { -webkit-transform: translate3d(0, 0, 0); } } @keyframes slideInDown { from { transform: translate3d(0, -1000px, 0); visibility: visible; } 100% { transform: translate3d(0, 0, 0); visibility: visible; } } .slideInDown { -webkit-animation-name: slideInDown; animation-name: slideInDown; } @-webkit-keyframes slideInLeft { from { -webkit-transform: translate3d(-1000px, 0, 0); visibility: visible; } 100% { -webkit-transform: translate3d(0, 0, 0); } } @keyframes slideInLeft { from { transform: translate3d(-1000px, 0, 0); visibility: visible; } 100% { transform: translate3d(0, 0, 0); visibility: visible; } } .slideInLeft { -webkit-animation-name: slideInLeft; animation-name: slideInLeft; } @-webkit-keyframes slideInRight { from { -webkit-transform: translate3d(1000px, 0, 0); visibility: visible; } 100% { -webkit-transform: translate3d(0, 0, 0); visibility: visible; } } @keyframes slideInRight { from { transform: translate3d(1000px, 0, 0); visibility: visible; } 100% { transform: translate3d(0, 0, 0); visibility: visible; } } .slideInRight { -webkit-animation-name: slideInRight; animation-name: slideInRight; } @-webkit-keyframes slideInUp { from { -webkit-transform: translate3d(0, 1000px, 0); visibility: visible; } 100% { -webkit-transform: translate3d(0, 0, 0); visibility: visible; } } @keyframes slideInUp { from { transform: translate3d(0, 1000px, 0); visibility: visible; } 100% { transform: translate3d(0, 0, 0); visibility: visible; } } .slideInUp { -webkit-animation-name: slideInUp; animation-name: slideInUp; } @-webkit-keyframes slideOutDown { from { -webkit-transform: translate3d(0, 0, 0); } 100% { visibility: hidden; -webkit-transform: translate3d(0, 100%, 0); } } @keyframes slideOutDown { from { transform: translate3d(0, 0, 0); } 100% { visibility: hidden; transform: translate3d(0, 100%, 0); } } .slideOutDown { -webkit-animation-name: slideOutDown; animation-name: slideOutDown; } @-webkit-keyframes slideOutLeft { from { -webkit-transform: translate3d(0, 0, 0); } 100% { visibility: hidden; -webkit-transform: translate3d(-100%, 0, 0); } } @keyframes slideOutLeft { from { transform: translate3d(0, 0, 0); } 100% { visibility: hidden; transform: translate3d(-100%, 0, 0); } } .slideOutLeft { -webkit-animation-name: slideOutLeft; animation-name: slideOutLeft; } @-webkit-keyframes slideOutRight { from { -webkit-transform: translate3d(0, 0, 0); } 100% { visibility: hidden; -webkit-transform: translate3d(100%, 0, 0); } } @keyframes slideOutRight { from { transform: translate3d(0, 0, 0); } 100% { visibility: hidden; transform: translate3d(100%, 0, 0); } } .slideOutRight { -webkit-animation-name: slideOutRight; animation-name: slideOutRight; } @-webkit-keyframes slideOutUp { from { -webkit-transform: translate3d(0, 0, 0); } 100% { visibility: hidden; -webkit-transform: translate3d(0, -100%, 0); } } @keyframes slideOutUp { from { transform: translate3d(0, 0, 0); } 100% { visibility: hidden; transform: translate3d(0, -100%, 0); } } .slideOutUp { -webkit-animation-name: slideOutUp; animation-name: slideOutUp; } /* diagonal slides */ @-webkit-keyframes slideInDownLeft { from { -webkit-transform: translate3d(-1000px, -1000px, 0); visibility: visible; } 100% { -webkit-transform: translate3d(0, 0, 0); visibility: visible; } } @keyframes slideInDownLeft { from { transform: translate3d(-1000px, -1000px, 0); visibility: visible; } 100% { transform: translate3d(0, 0, 0); visibility: visible; } } .slideInDownLeft { -webkit-animation-name: slideInDownLeft; animation-name: slideInDownLeft; } @-webkit-keyframes slideInDownRight { from { -webkit-transform: translate3d(1000px, -1000px, 0); visibility: visible; } 100% { -webkit-transform: translate3d(0, 0, 0); visibility: visible; } } @keyframes slideInDownRight { from { transform: translate3d(1000px, -1000px, 0); visibility: visible; } 100% { transform: translate3d(0, 0, 0); visibility: visible; } } .slideInDownRight { -webkit-animation-name: slideInDownRight; animation-name: slideInDownRight; } @-webkit-keyframes slideInUpLeft { from { -webkit-transform: translate3d(-1000px, 1000px, 0); visibility: visible; } 100% { -webkit-transform: translate3d(0, 0, 0); visibility: visible; } } @keyframes slideInUpLeft { from { transform: translate3d(-1000px, 1000px, 0); visibility: visible; } 100% { transform: translate3d(0, 0, 0); visibility: visible; } } .slideInUpLeft { -webkit-animation-name: slideInUpLeft; animation-name: slideInUpLeft; } @-webkit-keyframes slideInUpRight { from { -webkit-transform: translate3d(1000px, 1000px, 0); visibility: visible; } 100% { -webkit-transform: translate3d(0, 0, 0); visibility: visible; } } @keyframes slideInUpRight { from { transform: translate3d(1000px, 1000px, 0); visibility: visible; } 100% { transform: translate3d(0, 0, 0); visibility: visible; } } .slideInUpRight { -webkit-animation-name: slideInUpRight; animation-name: slideInUpRight; } /*****/ @-webkit-keyframes slideOutDownLeft { from { -webkit-transform: translate3d(0, 0, 0); } 100% { visibility: hidden; -webkit-transform: translate3d(-1000px, -1000px, 0); } } @keyframes slideOutDownLeft { from { transform: translate3d(0, 0, 0); } 100% { visibility: hidden; transform: translate3d(-1000px, -1000px, 0); } } .slideOutDownLeft { -webkit-animation-name: slideOutDownLeft; animation-name: slideOutDownLeft; } @-webkit-keyframes slideOutDownRight { from { -webkit-transform: translate3d(0, 0, 0); } 100% { visibility: hidden; -webkit-transform: translate3d(1000px, -1000px, 0); } } @keyframes slideOutDownRight { from { transform: translate3d(0, 0, 0); } 100% { visibility: hidden; transform: translate3d(1000px, -1000px, 0); } } .slideOutDownRight { -webkit-animation-name: slideOutDownRight; animation-name: slideOutDownRight; } @-webkit-keyframes slideOutUpLeft { from { -webkit-transform: translate3d(0, 0, 0); } 100% { visibility: hidden; -webkit-transform: translate3d(-1000px, 1000px, 0); } } @keyframes slideOutUpLeft { from { transform: translate3d(0, 0, 0); } 100% { visibility: hidden; transform: translate3d(-1000px, 1000px, 0); } } .slideOutUpLeft { -webkit-animation-name: slideOutUpLeft; animation-name: slideOutUpLeft; } @-webkit-keyframes slideOutUpRight { from { -webkit-transform: translate3d(0, 0, 0); } 100% { visibility: hidden; -webkit-transform: translate3d(1000px, 1000px, 0); } } @keyframes slideOutUpRight { from { transform: translate3d(0, 0, 0); } 100% { visibility: hidden; transform: translate3d(1000px, 1000px, 0); } } .slideOutUpRight { -webkit-animation-name: slideOutUpRight; animation-name: slideOutUpRight; } /* ============================================== CSS3 ANIMATION CHEAT SHEET ============================================== Made by Justin Aguilar www.justinaguilar.com/animations/ ============================================== */ .slideExpandUp{ animation-name: slideExpandUp; -webkit-animation-name: slideExpandUp; animation-timing-function: ease-out; -webkit-animation-timing-function: ease -out; visibility: visible !important; } @keyframes slideExpandUp { 0% { transform: translateY(100%) scaleX(0.5); } 30%{ transform: translateY(-8%) scaleX(0.5); } 40%{ transform: translateY(2%) scaleX(0.5); } 50%{ transform: translateY(0%) scaleX(1.1); } 60%{ transform: translateY(0%) scaleX(0.9); } 70% { transform: translateY(0%) scaleX(1.05); } 80%{ transform: translateY(0%) scaleX(0.95); } 90% { transform: translateY(0%) scaleX(1.02); } 100%{ transform: translateY(0%) scaleX(1); } } @-webkit-keyframes slideExpandUp { 0% { -webkit-transform: translateY(100%) scaleX(0.5); } 30%{ -webkit-transform: translateY(-8%) scaleX(0.5); } 40%{ -webkit-transform: translateY(2%) scaleX(0.5); } 50%{ -webkit-transform: translateY(0%) scaleX(1.1); } 60%{ -webkit-transform: translateY(0%) scaleX(0.9); } 70% { -webkit-transform: translateY(0%) scaleX(1.05); } 80%{ -webkit-transform: translateY(0%) scaleX(0.95); } 90% { -webkit-transform: translateY(0%) scaleX(1.02); } 100%{ -webkit-transform: translateY(0%) scaleX(1); } } .hatch{ animation-name: hatch; -webkit-animation-name: hatch; animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out; transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; -webkit-transform-origin: 50% 100%; visibility: visible !important; } @keyframes hatch { 0% { transform: rotate(0deg) scaleY(0.6); } 20% { transform: rotate(-2deg) scaleY(1.05); } 35% { transform: rotate(2deg) scaleY(1); } 50% { transform: rotate(-2deg); } 65% { transform: rotate(1deg); } 80% { transform: rotate(-1deg); } 100% { transform: rotate(0deg); } } @-webkit-keyframes hatch { 0% { -webkit-transform: rotate(0deg) scaleY(0.6); } 20% { -webkit-transform: rotate(-2deg) scaleY(1.05); } 35% { -webkit-transform: rotate(2deg) scaleY(1); } 50% { -webkit-transform: rotate(-2deg); } 65% { -webkit-transform: rotate(1deg); } 80% { -webkit-transform: rotate(-1deg); } 100% { -webkit-transform: rotate(0deg); } } .expandOpen{ animation-name: expandOpen; -webkit-animation-name: expandOpen; animation-timing-function: ease-out; -webkit-animation-timing-function: ease-out; visibility: visible !important; } @keyframes expandOpen { 0% { transform: scale(1.8); } 50% { transform: scale(0.95); } 80% { transform: scale(1.05); } 90% { transform: scale(0.98); } 100% { transform: scale(1); } } @-webkit-keyframes expandOpen { 0% { -webkit-transform: scale(1.8); } 50% { -webkit-transform: scale(0.95); } 80% { -webkit-transform: scale(1.05); } 90% { -webkit-transform: scale(0.98); } 100% { -webkit-transform: scale(1); } } .bigEntrance{ animation-name: bigEntrance; -webkit-animation-name: bigEntrance; animation-timing-function: ease-out; -webkit-animation-timing-function: ease-out; visibility: visible !important; } @keyframes bigEntrance { 0% { transform: scale(0.3) rotate(6deg) translateX(-30%) translateY(30%); opacity: 0.2; } 30% { transform: scale(1.03) rotate(-2deg) translateX(2%) translateY(-2%); opacity: 1; } 45% { transform: scale(0.98) rotate(1deg) translateX(0%) translateY(0%); opacity: 1; } 60% { transform: scale(1.01) rotate(-1deg) translateX(0%) translateY(0%); opacity: 1; } 75% { transform: scale(0.99) rotate(1deg) translateX(0%) translateY(0%); opacity: 1; } 90% { transform: scale(1.01) rotate(0deg) translateX(0%) translateY(0%); opacity: 1; } 100% { transform: scale(1) rotate(0deg) translateX(0%) translateY(0%); opacity: 1; } } @-webkit-keyframes bigEntrance { 0% { -webkit-transform: scale(0.3) rotate(6deg) translateX(-30%) translateY(30%); opacity: 0.2; } 30% { -webkit-transform: scale(1.03) rotate(-2deg) translateX(2%) translateY(-2%); opacity: 1; } 45% { -webkit-transform: scale(0.98) rotate(1deg) translateX(0%) translateY(0%); opacity: 1; } 60% { -webkit-transform: scale(1.01) rotate(-1deg) translateX(0%) translateY(0%); opacity: 1; } 75% { -webkit-transform: scale(0.99) rotate(1deg) translateX(0%) translateY(0%); opacity: 1; } 90% { -webkit-transform: scale(1.01) rotate(0deg) translateX(0%) translateY(0%); opacity: 1; } 100% { -webkit-transform: scale(1) rotate(0deg) translateX(0%) translateY(0%); opacity: 1; } } /*******/ .pullUp{ animation-name: pullUp; -webkit-animation-name: pullUp; animation-timing-function: ease-out; -webkit-animation-timing-function: ease-out; transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; -webkit-transform-origin: 50% 100%; } @keyframes pullUp { 0% { transform: scaleY(0.1); } 40% { transform: scaleY(1.02); } 60% { transform: scaleY(0.98); } 80% { transform: scaleY(1.01); } 100% { transform: scaleY(0.98); } 80% { transform: scaleY(1.01); } 100% { transform: scaleY(1); } } @-webkit-keyframes pullUp { 0% { -webkit-transform: scaleY(0.1); } 40% { -webkit-transform: scaleY(1.02); } 60% { -webkit-transform: scaleY(0.98); } 80% { -webkit-transform: scaleY(1.01); } 100% { -webkit-transform: scaleY(0.98); } 80% { -webkit-transform: scaleY(1.01); } 100% { -webkit-transform: scaleY(1); } } .pullDown{ animation-name: pullDown; -webkit-animation-name: pullDown; animation-timing-function: ease-out; -webkit-animation-timing-function: ease-out; transform-origin: 50% 0%; -ms-transform-origin: 50% 0%; -webkit-transform-origin: 50% 0%; } @keyframes pullDown { 0% { transform: scaleY(0.1); } 40% { transform: scaleY(1.02); } 60% { transform: scaleY(0.98); } 80% { transform: scaleY(1.01); } 100% { transform: scaleY(0.98); } 80% { transform: scaleY(1.01); } 100% { transform: scaleY(1); } } @-webkit-keyframes pullDown { 0% { -webkit-transform: scaleY(0.1); } 40% { -webkit-transform: scaleY(1.02); } 60% { -webkit-transform: scaleY(0.98); } 80% { -webkit-transform: scaleY(1.01); } 100% { -webkit-transform: scaleY(0.98); } 80% { -webkit-transform: scaleY(1.01); } 100% { -webkit-transform: scaleY(1); } } .stretchLeft{ animation-name: stretchLeft; -webkit-animation-name: stretchLeft; animation-timing-function: ease-out; -webkit-animation-timing-function: ease-out; transform-origin: 100% 0%; -ms-transform-origin: 100% 0%; -webkit-transform-origin: 100% 0%; } @keyframes stretchLeft { 0% { transform: scaleX(0.3); } 40% { transform: scaleX(1.02); } 60% { transform: scaleX(0.98); } 80% { transform: scaleX(1.01); } 100% { transform: scaleX(0.98); } 80% { transform: scaleX(1.01); } 100% { transform: scaleX(1); } } @-webkit-keyframes stretchLeft { 0% { -webkit-transform: scaleX(0.3); } 40% { -webkit-transform: scaleX(1.02); } 60% { -webkit-transform: scaleX(0.98); } 80% { -webkit-transform: scaleX(1.01); } 100% { -webkit-transform: scaleX(0.98); } 80% { -webkit-transform: scaleX(1.01); } 100% { -webkit-transform: scaleX(1); } } .stretchRight{ animation-name: stretchRight; -webkit-animation-name: stretchRight; animation-timing-function: ease-out; -webkit-animation-timing-function: ease-out; transform-origin: 0% 0%; -ms-transform-origin: 0% 0%; -webkit-transform-origin: 0% 0%; } @keyframes stretchRight { 0% { transform: scaleX(0.3); } 40% { transform: scaleX(1.02); } 60% { transform: scaleX(0.98); } 80% { transform: scaleX(1.01); } 100% { transform: scaleX(0.98); } 80% { transform: scaleX(1.01); } 100% { transform: scaleX(1); } } @-webkit-keyframes stretchRight { 0% { -webkit-transform: scaleX(0.3); } 40% { -webkit-transform: scaleX(1.02); } 60% { -webkit-transform: scaleX(0.98); } 80% { -webkit-transform: scaleX(1.01); } 100% { -webkit-transform: scaleX(0.98); } 80% { -webkit-transform: scaleX(1.01); } 100% { -webkit-transform: scaleX(1); } } a:hover .xr_1a1, .xr_0a1 { -webkit-animation-name: bounce; animation-name: bounce; -webkit-transform-origin: center bottom; -ms-transform-origin: center bottom; transform-origin: center bottom; } a:hover .xr_1a2, .xr_0a2 { -webkit-animation-name: flash; animation-name: flash; } a:hover .xr_1a3, .xr_0a3 { -webkit-animation-name: pulse; animation-name: pulse; } a:hover .xr_1a4, .xr_0a4 { -webkit-animation-name: rubberBand; animation-name: rubberBand; } a:hover .xr_1a5, .xr_0a5 { -webkit-animation-name: shake; animation-name: shake; } a:hover .xr_1a6, .xr_0a6 { -webkit-transform-origin: top center; -ms-transform-origin: top center; transform-origin: top center; -webkit-animation-name: swing; animation-name: swing; } a:hover .xr_1a7, .xr_0a7 { -webkit-animation-name: tada; animation-name: tada; } a:hover .xr_1a8, .xr_0a8 { -webkit-animation-name: wobble; animation-name: wobble; } .pageIR{ animation-name: pageIR; -webkit-animation-name: pageIR; } @keyframes pageIR { 0% { transform: translate3d(100%,0,0); opacity:0; } 100% { transform: translate3d(0px,0,0); opacity:1; } } @-webkit-keyframes pageIR { 0% { -webkit-transform: translate3d(100%,0,0); opacity:0; } 100% { -webkit-transform: translate3d(0px,0,0); opacity:1; } } .pageIL{ animation-name: pageIL; -webkit-animation-name: pageIL; } @keyframes pageIL { 0% { transform: translate3d(-100%,0,0); opacity:0; } 100% { transform: translate3d(0px,0,0); opacity:1; } } @-webkit-keyframes pageIL { 0% { -webkit-transform: translate3d(-100%,0,0); opacity:0; } 100% { -webkit-transform: translate3d(0px,0,0); opacity:1; } } .pageOR{ animation-name: pageOR; -webkit-animation-name: pageOR; } @keyframes pageOR { 0% { transform: translate3d(0px,0,0); opacity:1; } 100% { transform: translate3d(-100%,0,0); opacity:0; } } @-webkit-keyframes pageOR { 0% { -webkit-transform: translate3d(0px,0,0); opacity:1; } 100% { -webkit-transform: translate3d(-100%,0,0); opacity:0; } } .pageOL{ animation-name: pageOL; -webkit-animation-name: pageOL; } @keyframes pageOL { 0% { transform: translate3d(0px,0,0); opacity:1; } 100% { transform: translate3d(100%,0,0); opacity:0; } } @-webkit-keyframes pageOL { 0% { -webkit-transform: translate3d(0px,0,0); opacity:1; } 100% { -webkit-transform: translate3d(100%,0,0); opacity:0; } } .pageIB{ animation-name: pageIT; -webkit-animation-name: pageIT; } @keyframes pageIT { 0% { transform: translate3d(0,100%,0); opacity:0; } 100% { transform: translate3d(0,0,0); opacity:1; } } @-webkit-keyframes pageIT { 0% { -webkit-transform: translate3d(0,100%,0); opacity:0; } 100% { -webkit-transform: translate3d(0,0,0); opacity:1; } } .pageIT{ animation-name: pageIB; -webkit-animation-name: pageIB; } @keyframes pageIB { 0% { transform: translate3d(0,-100%,0); opacity:0; } 100% { transform: translate3d(0,0,0); opacity:1; } } @-webkit-keyframes pageIB { 0% { -webkit-transform: translate3d(0,-100%,0); opacity:0; } 100% { -webkit-transform: translate3d(0,0,0); opacity:1; } } .pageOB{ animation-name: pageOT; -webkit-animation-name: pageOT; } @keyframes pageOT { 0% { transform: translate3d(0,0,0); opacity:1; } 100% { transform: translate3d(0,-100%,0); opacity:0; } } @-webkit-keyframes pageOT { 0% { -webkit-transform: translate3d(0,0,0); opacity:1; } 100% { -webkit-transform: translate3d(0,-100%,0); opacity:0; } } .pageOT{ animation-name: pageOB; -webkit-animation-name: pageOB; } @keyframes pageOB { 0% { transform: translate3d(0,0,0); opacity:1; } 100% { transform: translate3d(0,100%,0); opacity:0; } } @-webkit-keyframes pageOB { 0% { -webkit-transform: translate3d(0,0,0); opacity:1; } 100% { -webkit-transform: translate3d(0,100%,0); opacity:0; } } .pageIBR{ animation-name: pageITR; -webkit-animation-name: pageITR; } @keyframes pageITR { 0% { transform: translate3d(100%,100%,0); opacity:0; } 100% { transform: translate3d(0,0,0); opacity:1; } } @-webkit-keyframes pageITR { 0% { -webkit-transform: translate3d(100%,100%,0); opacity:0; } 100% { -webkit-transform: translate3d(0,0,0); opacity:1; } } .pageITL{ animation-name: pageIBL; -webkit-animation-name: pageIBL; } @keyframes pageIBL { 0% { transform: translate3d(-100%,-100%,0); opacity:0; } 100% { transform: translate3d(0,0,0); opacity:1; } } @-webkit-keyframes pageIBL { 0% { -webkit-transform: translate3d(-100%,-100%,0); opacity:0; } 100% { -webkit-transform: translate3d(0,0,0); opacity:1; } } .pageOBR{ animation-name: pageOTR; -webkit-animation-name: pageOTR; } @keyframes pageOTR { 0% { transform: translate3d(0,0,0); opacity:1; } 100% { transform: translate3d(-100%,-100%,0); opacity:0; } } @-webkit-keyframes pageOTR { 0% { -webkit-transform: translate3d(0,0,0); opacity:1; } 100% { -webkit-transform: translate3d(-100%,-100%,0); opacity:0; } } .pageOTL{ animation-name: pageOBL; -webkit-animation-name: pageOBL; } @keyframes pageOBL { 0% { transform: translate3d(0,0,0); opacity:1; } 100% { transform: translate3d(100%,100%,0); opacity:0; } } @-webkit-keyframes pageOBL { 0% { -webkit-transform: translate3d(0,0,0); opacity:1; } 100% { -webkit-transform: translate3d(100%,100%,0); opacity:0; } } .pageIBL{ animation-name: pageITL; -webkit-animation-name: pageITL; } @keyframes pageITL { 0% { transform: translate3d(-100%,100%,0); opacity:0; } 100% { transform: translate3d(0,0,0); opacity:1; } } @-webkit-keyframes pageITL { 0% { -webkit-transform: translate3d(-100%,100%,0); opacity:0; } 100% { -webkit-transform: translate3d(0,0,0); opacity:1; } } .pageITR{ animation-name: pageIBR; -webkit-animation-name: pageIBR; } @keyframes pageIBR { 0% { transform: translate3d(100%,-100%,0); opacity:0; } 100% { transform: translate3d(0,0,0); opacity:1; } } @-webkit-keyframes pageIBR { 0% { -webkit-transform: translate3d(100%,-100%,0); opacity:0; } 100% { -webkit-transform: translate3d(0,0,0); opacity:1; } } .pageOBL{ animation-name: pageOTL; -webkit-animation-name: pageOTL; } @keyframes pageOTL { 0% { transform: translate3d(0,0,0); opacity:1; } 100% { transform: translate3d(100%,-100%,0); opacity:0; } } @-webkit-keyframes pageOTL { 0% { -webkit-transform: translate3d(0,0,0); opacity:1; } 100% { -webkit-transform: translate3d(100%,-100%,0); opacity:0; } } .pageOTR{ animation-name: pageOBR; -webkit-animation-name: pageOBR; } @keyframes pageOBR { 0% { transform: translate3d(0,0,0); opacity:1; } 100% { transform: translate3d(-100%,100%,0); opacity:0; } } @-webkit-keyframes pageOBR { 0% { -webkit-transform: translate3d(0,0,0); opacity:1; } 100% { -webkit-transform: translate3d(-100%,100%,0); opacity:0; } } .pageRotateFI{ animation-name: pageFadeI; -webkit-animation-name: pageFadeI; } .pageRotateBI{ animation-name: pageRotateBI; -webkit-animation-name: pageRotateBI; } @keyframes pageRotateBI { 0% { transform: translate3d(-50%,50%,0) rotate3d(0,1,1,-179deg); opacity:0; } 100% { transform: translate3d(0,0,0) rotate3d(0,0,0,0); opacity:1; } } @-webkit-keyframes pageRotateBI { 0% { -webkit-transform: translate3d(-50%,50%,0) rotate3d(0,1,1,-179deg); opacity:0; } 100% { -webkit-transform: translate3d(0,0,0) rotate3d(0,0,0,0); opacity:1; } } .pageRotateFO{ animation-name: pageRotateFO; -webkit-animation-name: pageRotateFO; } @keyframes pageRotateFO { 0% { transform: translate3d(0,0,0) rotate3d(0,0,0,0); opacity:1; } 100% { transform: translate3d(-50%,50%,0) rotate3d(0,1,1,-179deg); opacity:0; } } @-webkit-keyframes pageRotateFO { 0% { -webkit-transform: translate3d(0,0,0) rotate3d(0,0,0,0); opacity:1; } 100% { -webkit-transform: translate3d(-50%,50%,0) rotate3d(0,1,1,-179deg); opacity:0; } } .pageRotateBO{ animation-name: pageFadeO; -webkit-animation-name: pageFadeO; } .pageFadeI{ animation-name: pageFadeI; -webkit-animation-name: pageFadeI; } @keyframes pageFadeI { 0% { transform:none; opacity:0; } 100% { transform:none; opacity:1; } } @-webkit-keyframes pageFadeI { 0% { -webkit-transform:none; opacity:0; } 100% { -webkit-transform:none; opacity:1; } } .pageFadeO{ animation-name: pageFadeO; -webkit-animation-name: pageFadeO; } @keyframes pageFadeO { 0% { transform:none; opacity:1; } 100% { transform:none; opacity:0; } } @-webkit-keyframes pageFadeO { 0% { -webkit-transform:none; opacity:1; } 100% { -webkit-transform:none; opacity:0; } } .pageZoomInI{ animation-name: pageZoomInI; -webkit-animation-name: pageZoomInI; } @keyframes pageZoomInI { 0% { transform:perspective(1000px) translate3d(0,0,-700px); opacity:0; } 100% { transform:perspective(1000px) translate3d(0,0,0); opacity:1; } } @-webkit-keyframes pageZoomInI { 0% { -webkit-transform:perspective(1000px) translate3d(0,0,-700px); opacity:0; } 100% { -webkit-transform:perspective(1000px) translate3d(0,0,0); opacity:1; } } .pageZoomInO{ animation-name: pageZoomInO; -webkit-animation-name: pageZoomInO; } @keyframes pageZoomInO { 0% { transform:perspective(1000px) translate3d(0,0,0); opacity:1; } 100% { transform:perspective(1000px) translate3d(0,0,700px); opacity:0; } } @-webkit-keyframes pageZoomInO { 0% { -webkit-transform:perspective(1000px) translate3d(0,0,0); opacity:1; } 100% { -webkit-transform:perspective(1000px) translate3d(0,0,700px); opacity:0; } } .pageZoomOutI{ animation-name: pageZoomOutI; -webkit-animation-name: pageZoomOutI; } @keyframes pageZoomOutI { 0% { transform:perspective(1000px) translate3d(0,0,700px); opacity:0; } 100% { transform:perspective(1000px) translate3d(0,0,0); opacity:1; } } @-webkit-keyframes pageZoomOutI { 0% { -webkit-transform:perspective(1000px) translate3d(0,0,700px); opacity:0; } 100% { -webkit-transform:perspective(1000px) translate3d(0,0,0); opacity:1; } } .pageZoomOutO{ animation-name: pageZoomOutO; -webkit-animation-name: pageZoomOutO; } @keyframes pageZoomOutO { 0% { transform:perspective(1000px) translate3d(0,0,0); opacity:1; } 100% { transform:perspective(1000px) translate3d(0,0,-700px); opacity:0; } } @-webkit-keyframes pageZoomOutO { 0% { -webkit-transform:perspective(1000px) translate3d(0,0,0); opacity:1; } 100% { -webkit-transform:perspective(1000px) translate3d(0,0,-700px); opacity:0; } } .pageFlipVFI{ animation-name: pageFlipVFI; -webkit-animation-name: pageFlipVFI; } @keyframes pageFlipVFI { 0% { transform:perspective(1000px) rotate3d(1,0,0,179deg); opacity:0; } 100% { transform:perspective(1000px) rotate3d(0,0,0,0); opacity:1; } } @-webkit-keyframes pageFlipVFI { 0% { -webkit-transform:perspective(1000px) rotate3d(1,0,0,179deg); opacity:0; } 100% { -webkit-transform:perspective(1000px) rotate3d(0,0,0,0); opacity:1; } } .pageFlipVFO{ animation-name: pageFlipVFO; -webkit-animation-name: pageFlipVFO; } @keyframes pageFlipVFO { 0% { transform:perspective(1000px) rotate3d(0,0,0,0); opacity:1; } 100% { transform:perspective(1000px) rotate3d(1,0,0,-179deg); opacity:0; } } @-webkit-keyframes pageFlipVFO { 0% { -webkit-transform:perspective(1000px) rotate3d(0,0,0,0); opacity:1; } 100% { -webkit-transform:perspective(1000px) rotate3d(1,0,0,-179deg); opacity:0; } } .pageFlipVBI{ animation-name: pageFlipVBI; -webkit-animation-name: pageFlipVBI; } @keyframes pageFlipVBI { 0% { transform:perspective(1000px) rotate3d(1,0,0,-179deg); opacity:0; } 100% { transform:perspective(1000px) rotate3d(0,0,0,0); opacity:1; } } @-webkit-keyframes pageFlipVBI { 0% { -webkit-transform:perspective(1000px) rotate3d(1,0,0,-179deg); opacity:0; } 100% { -webkit-transform:perspective(1000px) rotate3d(0,0,0,0); opacity:1; } } .pageFlipVBO{ animation-name: pageFlipVBO; -webkit-animation-name: pageFlipVBO; } @keyframes pageFlipVBO { 0% { transform:perspective(1000px) rotate3d(0,0,0,0); opacity:1; } 100% { transform:perspective(1000px) rotate3d(1,0,0,179deg); opacity:0; } } @-webkit-keyframes pageFlipVBO { 0% { -webkit-transform:perspective(1000px) rotate3d(0,0,0,0); opacity:1; } 100% { -webkit-transform:perspective(1000px) rotate3d(1,0,0,179deg); opacity:0; } } .pageFlipHFI{ animation-name: pageFlipHFI; -webkit-animation-name: pageFlipHFI; } @keyframes pageFlipHFI { 0% { transform:perspective(1000px) rotateY(179deg); opacity:0; } 100% { transform:perspective(1000px) rotateY(0); opacity:1; } } @-webkit-keyframes pageFlipHFI { 0% { -webkit-transform:perspective(1000px) rotateY(179deg); opacity:0; } 100% { -webkit-transform:perspective(1000px) rotateY(0); opacity:1; } } .pageFlipHFO{ animation-name: pageFlipHFO; -webkit-animation-name: pageFlipHFO; } @keyframes pageFlipHFO { 0% { transform:perspective(1000px) rotateY(0); opacity:1; } 100% { transform:perspective(1000px) rotateY(-179deg); opacity:0; } } @-webkit-keyframes pageFlipHFO { 0% { -webkit-transform:perspective(1000px) rotateY(0); opacity:1; } 100% { -webkit-transform:perspective(1000px) rotateY(-179deg); opacity:0; } } .pageFlipHBI{ animation-name: pageFlipHBI; -webkit-animation-name: pageFlipHBI; } @keyframes pageFlipHBI { 0% { transform:perspective(1000px) rotateY(-179deg); opacity:0; } 100% { transform:perspective(1000px) rotateY(0); opacity:1; } } @-webkit-keyframes pageFlipHBI { 0% { -webkit-transform:perspective(1000px) rotateY(-179deg); opacity:0; } 100% { -webkit-transform:perspective(1000px) rotateY(0); opacity:1; } } .pageFlipHBO{ animation-name: pageFlipHBO; -webkit-animation-name: pageFlipHBO; } @keyframes pageFlipHBO { 0% { transform:perspective(1000px) rotateY(0); opacity:1; } 100% { transform:perspective(1000px) rotateY(179deg); opacity:0; } } @-webkit-keyframes pageFlipHBO { 0% { -webkit-transform:perspective(1000px) rotateY(0); opacity:1; } 100% { -webkit-transform:perspective(1000px) rotateY(179deg); opacity:0; } } .pageCubeHFI{ animation-name: pageCubeHFI; -webkit-animation-name: pageCubeHFI; } @keyframes pageCubeHFI { 0% { transform:perspective(1000px) translate3d(50%,0,0) rotate3d(0,1,0,89deg) translate3d(50%,0,0); opacity:0; } 100% { transform:perspective(1000px) translate3d(0,0,0) rotate3d(0,0,0,0) translate3d(0,0,0); opacity:1; } } @-webkit-keyframes pageCubeHFI { 0% { -webkit-transform:perspective(1000px) translate3d(50%,0,0) rotate3d(0,1,0,89deg) translate3d(50%,0,0); opacity:0; } 100% { -webkit-transform:perspective(1000px) translate3d(0,0,0) rotate3d(0,0,0,0) translate3d(0,0,0); opacity:1; } } .pageCubeHFI{ animation-name: pageCubeHFI; -webkit-animation-name: pageCubeHFI; } @keyframes pageCubeHFI { 0% { transform:perspective(1000px) translate3d(50%,0,0) rotate3d(0,1,0,89deg) translate3d(50%,0,0); opacity:0; } 100% { transform:perspective(1000px) translate3d(0,0,0) rotate3d(0,0,0,0) translate3d(0,0,0); opacity:1; } } @-webkit-keyframes pageCubeHFI { 0% { -webkit-transform:perspective(1000px) translate3d(50%,0,0) rotate3d(0,1,0,89deg) translate3d(50%,0,0); opacity:0; } 100% { -webkit-transform:perspective(1000px) translate3d(0,0,0) rotate3d(0,0,0,0) translate3d(0,0,0); opacity:1; } } .pageCubeHFO{ animation-name: pageCubeHFO; -webkit-animation-name: pageCubeHFO; } @keyframes pageCubeHFO { 0% { transform:perspective(1000px) translate3d(0,0,0) rotate3d(0,0,0,0) translate3d(0,0,0); opacity:1; } 100% { transform:perspective(1000px) translate3d(-50%,0,0) rotate3d(0,1,0,-89deg) translate3d(-50%,0,0); opacity:0; } } @-webkit-keyframes pageCubeHFO { 0% { -webkit-transform:perspective(1000px) translate3d(0,0,0) rotate3d(0,0,0,0) translate3d(0,0,0); opacity:1; } 100% { -webkit-transform:perspective(1000px) translate3d(-50%,0,0) rotate3d(0,1,0,-89deg) translate3d(-50%,0,0); opacity:0; } } .pageCubeHBI{ animation-name: pageCubeHBI; -webkit-animation-name: pageCubeHBI; } @keyframes pageCubeHBI { 0% { transform:perspective(1000px) translate3d(-50%,0,0) rotate3d(0,1,0,-89deg) translate3d(-50%,0,0); opacity:0; } 100% { transform:perspective(1000px) translate3d(0,0,0) rotate3d(0,0,0,0) translate3d(0,0,0); opacity:1; } } @-webkit-keyframes pageCubeHBI { 0% { -webkit-transform:perspective(1000px) translate3d(-50%,0,0) rotate3d(0,1,0,-89deg) translate3d(-50%,0,0); opacity:0; } 100% { -webkit-transform:perspective(1000px) translate3d(0,0,0) rotate3d(0,0,0,0) translate3d(0,0,0); opacity:1; } } .pageCubeHBO{ animation-name: pageCubeHBO; -webkit-animation-name: pageCubeHBO; } @keyframes pageCubeHBO { 0% { transform:perspective(1000px) translate3d(0,0,0) rotate3d(0,0,0,0) translate3d(0,0,0); opacity:1; } 100% { transform:perspective(1000px) translate3d(50%,0,0) rotate3d(0,1,0,89deg) translate3d(50%,0,0); opacity:0; } } @-webkit-keyframes pageCubeHBO { 0% { -webkit-transform:perspective(1000px) translate3d(0,0,0) rotate3d(0,0,0,0) translate3d(0,0,0); opacity:1; } 100% { -webkit-transform:perspective(1000px) translate3d(50%,0,0) rotate3d(0,1,0,89deg) translate3d(50%,0,0); opacity:0; } } .pageConcaveHFI{ animation-name: pageConcaveHFI; -webkit-animation-name: pageConcaveHFI; } @keyframes pageConcaveHFI { 0% { transform:perspective(1000px) translate3d(50%,0,0) rotate3d(0,1,0,-89deg) translate3d(50%,0,0); opacity:0; } 100% { transform:perspective(1000px) translate3d(0,0,0) rotate3d(0,0,0,0) translate3d(0,0,0); opacity:1; } } @-webkit-keyframes pageConcaveHFI { 0% { -webkit-transform:perspective(1000px) translate3d(50%,0,0) rotate3d(0,1,0,-89deg) translate3d(50%,0,0); opacity:0; } 100% { -webkit-transform:perspective(1000px) translate3d(0,0,0) rotate3d(0,0,0,0) translate3d(0,0,0); opacity:1; } } .pageConcaveHFO{ animation-name: pageConcaveHFO; -webkit-animation-name: pageConcaveHFO; } @keyframes pageConcaveHFO { 0% { transform:perspective(1000px) translate3d(0,0,0) rotate3d(0,0,0,0) translate3d(0,0,0); opacity:1; } 100% { transform:perspective(1000px) translate3d(-50%,0,0) rotate3d(0,1,0,89deg) translate3d(-50%,0,0); opacity:0; } } @-webkit-keyframes pageConcaveHFO { 0% { -webkit-transform:perspective(1000px) translate3d(0,0,0) rotate3d(0,0,0,0) translate3d(0,0,0); opacity:1; } 100% { -webkit-transform:perspective(1000px) translate3d(-50%,0,0) rotate3d(0,1,0,89deg) translate3d(-50%,0,0); opacity:0; } } .pageConcaveHBI{ animation-name: pageConcaveHBI; -webkit-animation-name: pageConcaveHBI; } @keyframes pageConcaveHBI { 0% { transform:perspective(1000px) translate3d(-50%,0,0) rotate3d(0,1,0,89deg) translate3d(-50%,0,0); opacity:0; } 100% { transform:perspective(1000px) translate3d(0,0,0) rotate3d(0,0,0,0) translate3d(0,0,0); opacity:1; } } @-webkit-keyframes pageConcaveHBI { 0% { -webkit-transform:perspective(1000px) translate3d(-50%,0,0) rotate3d(0,1,0,89deg) translate3d(-50%,0,0); opacity:0; } 100% { -webkit-transform:perspective(1000px) translate3d(0,0,0) rotate3d(0,0,0,0) translate3d(0,0,0); opacity:1; } } .pageConcaveHBO{ animation-name: pageConcaveHBO; -webkit-animation-name: pageConcaveHBO; } @keyframes pageConcaveHBO { 0% { transform:perspective(1000px) translate3d(0,0,0) rotate3d(0,0,0,0) translate3d(0,0,0); opacity:1; } 100% { transform:perspective(1000px) translate3d(50%,0,0) rotate3d(0,1,0,-89deg) translate3d(50%,0,0); opacity:0; } } @-webkit-keyframes pageConcaveHBO { 0% { -webkit-transform:perspective(1000px) translate3d(0,0,0) rotate3d(0,0,0,0) translate3d(0,0,0); opacity:1; } 100% { -webkit-transform:perspective(1000px) translate3d(50%,0,0) rotate3d(0,1,0,-89deg) translate3d(50%,0,0); opacity:0; } } .pageCubeVFI{ animation-name: pageCubeVFI; -webkit-animation-name: pageCubeVFI; } @keyframes pageCubeVFI { 0% { transform:perspective(1000px) translate3d(0,-50%,0) rotate3d(1,0,0,89deg) translate3d(0,-50%,0); opacity:0; } 100% { transform:perspective(1000px) translate3d(0,0,0) rotate3d(0,0,0,0) translate3d(0,0,0); opacity:1; } } @-webkit-keyframes pageCubeVFI { 0% { -webkit-transform:perspective(1000px) translate3d(0,-50%,0) rotate3d(1,0,0,89deg) translate3d(0,-50%,0); opacity:0; } 100% { -webkit-transform:perspective(1000px) translate3d(0,0,0) rotate3d(0,0,0,0) translate3d(0,0,0); opacity:1; } } .pageCubeVFO{ animation-name: pageCubeVFO; -webkit-animation-name: pageCubeVFO; } @keyframes pageCubeVFO { 0% { transform:perspective(1000px) translate3d(0,0,0) rotate3d(0,0,0,0) translate3d(0,0,0); opacity:1; } 100% { transform:perspective(1000px) translate3d(0,50%,0) rotate3d(1,0,0,-89deg) translate3d(0,50%,0); opacity:0; } } @-webkit-keyframes pageCubeVFO { 0% { -webkit-transform:perspective(1000px) translate3d(0,0,0) rotate3d(0,0,0,0) translate3d(0,0,0); opacity:1; } 100% { -webkit-transform:perspective(1000px) translate3d(0,50%,0) rotate3d(1,0,0,-89deg) translate3d(0,50%,0); opacity:0; } } .pageCubeVBI{ animation-name: pageCubeVBI; -webkit-animation-name: pageCubeVBI; } @keyframes pageCubeVBI { 0% { transform:perspective(1000px) translate3d(0,50%,0) rotate3d(1,0,0,-89deg) translate3d(0,50%,0); opacity:0; } 100% { transform:perspective(1000px) translate3d(0,0,0) rotate3d(0,0,0,0) translate3d(0,0,0); opacity:1; } } @-webkit-keyframes pageCubeVBI { 0% { -webkit-transform:perspective(1000px) translate3d(0,50%,0) rotate3d(1,0,0,-89deg) translate3d(0,50%,0); opacity:0; } 100% { -webkit-transform:perspective(1000px) translate3d(0,0,0) rotate3d(0,0,0,0) translate3d(0,0,0); opacity:1; } } .pageCubeVBO{ animation-name: pageCubeVBO; -webkit-animation-name: pageCubeVBO; } @keyframes pageCubeVBO { 0% { transform:perspective(1000px) translate3d(0,0,0) rotate3d(0,0,0,0) translate3d(0,0,0); opacity:1; } 100% { transform:perspective(1000px) translate3d(0,-50%,0) rotate3d(1,0,0,89deg) translate3d(0,-50%,0); opacity:0; } } @-webkit-keyframes pageCubeVBO { 0% { -webkit-transform:perspective(1000px) translate3d(0,0,0) rotate3d(0,0,0,0) translate3d(0,0,0); opacity:1; } 100% { -webkit-transform:perspective(1000px) translate3d(0,-50%,0) rotate3d(1,0,0,89deg) translate3d(0,-50%,0); opacity:0; } } .pageConcaveVBI{ animation-name: pageConcaveVBI; -webkit-animation-name: pageConcaveVBI; } @keyframes pageConcaveVBI { 0% { transform:perspective(1000px) translate3d(0,50%,0) rotate3d(1,0,0,89deg) translate3d(0,50%,0); opacity:0; } 100% { transform:perspective(1000px) translate3d(0,0,0) rotate3d(0,0,0,0) translate3d(0,0,0); opacity:1; } } @-webkit-keyframes pageConcaveVBI { 0% { -webkit-transform:perspective(1000px) translate3d(0,50%,0) rotate3d(1,0,0,89deg) translate3d(0,50%,0); opacity:0; } 100% { -webkit-transform:perspective(1000px) translate3d(0,0,0) rotate3d(0,0,0,0) translate3d(0,0,0); opacity:1; } } .pageConcaveVBO{ animation-name: pageConcaveVBO; -webkit-animation-name: pageConcaveVBO; } @keyframes pageConcaveVBO { 0% { transform:perspective(1000px) translate3d(0,0,0) rotate3d(0,0,0,0) translate3d(0,0,0); opacity:1; } 100% { transform:perspective(1000px) translate3d(0,-50%,0) rotate3d(1,0,0,-89deg) translate3d(0,-50%,0); opacity:0; } } @-webkit-keyframes pageConcaveVBO { 0% { -webkit-transform:perspective(1000px) translate3d(0,0,0) rotate3d(0,0,0,0) translate3d(0,0,0); opacity:1; } 100% { -webkit-transform:perspective(1000px) translate3d(0,-50%,0) rotate3d(1,0,0,-89deg) translate3d(0,-50%,0); opacity:0; } } .pageConcaveVFI{ animation-name: pageConcaveVFI; -webkit-animation-name: pageConcaveVFI; } @keyframes pageConcaveVFI { 0% { transform:perspective(1000px) translate3d(0,-50%,0) rotate3d(1,0,0,-89deg) translate3d(0,-50%,0); opacity:0; } 100% { transform:perspective(1000px) translate3d(0,0,0) rotate3d(0,0,0,0) translate3d(0,0,0); opacity:1; } } @-webkit-keyframes pageConcaveVFI { 0% { -webkit-transform:perspective(1000px) translate3d(0,-50%,0) rotate3d(1,0,0,-89deg) translate3d(0,-50%,0); opacity:0; } 100% { -webkit-transform:perspective(1000px) translate3d(0,0,0) rotate3d(0,0,0,0) translate3d(0,0,0); opacity:1; } } .pageConcaveVFO{ animation-name: pageConcaveVFO; -webkit-animation-name: pageConcaveVFO; } @keyframes pageConcaveVFO { 0% { transform:perspective(1000px) translate3d(0,0,0) rotate3d(0,0,0,0) translate3d(0,0,0); opacity:1; } 100% { transform:perspective(1000px) translate3d(0,50%,0) rotate3d(1,0,0,89deg) translate3d(0,50%,0); opacity:0; } } @-webkit-keyframes pageConcaveVFO { 0% { -webkit-transform:perspective(1000px) translate3d(0,0,0) rotate3d(0,0,0,0) translate3d(0,0,0); opacity:1; } 100% { -webkit-transform:perspective(1000px) translate3d(0,50%,0) rotate3d(1,0,0,89deg) translate3d(0,50%,0); opacity:0; } } .pageRotateFadeFI{ animation-name: pageRotateFadeFI; -webkit-animation-name: pageRotateFadeFI; } @keyframes pageRotateFadeFI { 0% { transform: translate3d(100%,50%,0) rotate3d(0,0,1,60deg); opacity:0; } 100% { transform: translate3d(0,0,0) rotate3d(0,0,0,0); opacity:1; } } @-webkit-keyframes pageRotateFadeFI { 0% { -webkit-transform: translate3d(100%,50%,0) rotate3d(0,0,1,60deg); opacity:0; } 100% { -webkit-transform: translate3d(0,0,0) rotate3d(0,0,0,0); opacity:1; } } .pageRotateFadeFO{ animation-name: pageRotateFadeFO; -webkit-animation-name: pageRotateFadeFO; } @keyframes pageRotateFadeFO { 0% { transform: translate3d(0,0,0) rotate3d(0,0,0,0); opacity:1; } 100% { transform: translate3d(-100%,50%,0) rotate3d(0,0,1,-60deg); opacity:0; } } @-webkit-keyframes pageRotateFadeFO { 0% { -webkit-transform: translate3d(0,0,0) rotate3d(0,0,0,0); opacity:1; } 100% { -webkit-transform: translate3d(-100%,50%,0) rotate3d(0,0,1,-60deg); opacity:0; } } .pageRotateFadeBI{ animation-name: pageRotateFadeBI; -webkit-animation-name: pageRotateFadeBI; } @keyframes pageRotateFadeBI { 0% { transform: translate3d(-100%,50%,0) rotate3d(0,0,1,-60deg); opacity:0; } 100% { transform: translate3d(0,0,0) rotate3d(0,0,0,0); opacity:1; } } @-webkit-keyframes pageRotateFadeBI { 0% { -webkit-transform: translate3d(-100%,50%,0) rotate3d(0,0,1,-60deg); opacity:0; } 100% { -webkit-transform: translate3d(0,0,0) rotate3d(0,0,0,0); opacity:1; } } .pageRotateFadeBO{ animation-name: pageRotateFadeBO; -webkit-animation-name: pageRotateFadeBO; } @keyframes pageRotateFadeBO { 0% { transform: translate3d(0,0,0) rotate3d(0,0,0,0); opacity:1; } 100% { transform: translate3d(100%,50%,0) rotate3d(0,0,1,60deg); opacity:0; } } @-webkit-keyframes pageRotateFadeBO { 0% { -webkit-transform: translate3d(0,0,0) rotate3d(0,0,0,0); opacity:1; } 100% { -webkit-transform: translate3d(100%,50%,0) rotate3d(0,0,1,60deg); opacity:0; } } .pageRotateFlipFI{ animation-name: pageRotateFlipFI; -webkit-animation-name: pageRotateFlipFI; } @keyframes pageRotateFlipFI { 0% { transform:perspective(1000px) rotate3d(0,1,1,-179deg); opacity:0; } 100% { transform:perspective(1000px) rotate3d(0,0,0,0); opacity:1; } } @-webkit-keyframes pageRotateFlipFI { 0% { -webkit-transform:perspective(1000px) rotate3d(0,1,1,-179deg); opacity:0; } 100% { -webkit-transform:perspective(1000px) rotate3d(0,0,0,0); opacity:1; } } .pageRotateFlipFO{ animation-name: pageRotateFlipFO; -webkit-animation-name: pageRotateFlipFO; } @keyframes pageRotateFlipFO { 0% { transform:perspective(1000px) rotate3d(0,0,0,0); opacity:1; } 100% { transform:perspective(1000px) rotate3d(0,1,1,179deg); opacity:0; } } @-webkit-keyframes pageRotateFlipFO { 0% { -webkit-transform:perspective(1000px) rotate3d(0,0,0,0); opacity:1; } 100% { -webkit-transform:perspective(1000px) rotate3d(0,1,1,179deg); opacity:0; } } .pageRotateFlipBI{ animation-name: pageRotateFlipBI; -webkit-animation-name: pageRotateFlipBI; } @keyframes pageRotateFlipBI { 0% { transform:perspective(1000px) rotate3d(0,1,1,179deg); opacity:0; } 100% { transform:perspective(1000px) rotate3d(0,0,0,0); opacity:1; } } @-webkit-keyframes pageRotateFlipBI { 0% { -webkit-transform:perspective(1000px) rotate3d(0,1,1,179deg); opacity:0; } 100% { -webkit-transform:perspective(1000px) rotate3d(0,0,0,0); opacity:1; } } .pageRotateFlipBO{ animation-name: pageRotateFlipBO; -webkit-animation-name: pageRotateFlipBO; } @keyframes pageRotateFlipBO { 0% { transform:perspective(1000px) rotate3d(0,0,0,0); opacity:1; } 100% { transform:perspective(1000px) rotate3d(0,1,1,-179deg); opacity:0; } } @-webkit-keyframes pageRotateFlipBO { 0% { -webkit-transform:perspective(1000px) rotate3d(0,0,0,0); opacity:1; } 100% { -webkit-transform:perspective(1000px) rotate3d(0,1,1,-179deg); opacity:0; } }