diff --git a/cssanimation.css b/cssanimation.css new file mode 100644 index 0000000..9b12623 --- /dev/null +++ b/cssanimation.css @@ -0,0 +1,2432 @@ +/* +Written by : Pavel +Contribute by: Amzad Hossain & Miraz Hossain +Find me at: https://bd.linkedin.com/in/bdpavel +Email: hello@cssanimation.io +Released: 2016 +Current Version: 1.0.1 +Amount of Animation: 260 +Description: "cssanimation.io - A CSS Animation Library for Developers and Ninjas" +Library Size: 76 kB +Copyright (c) 2016 cssanimation.io +License: cssanimation.io is licensed under the MIT license. http://opensource.org/licenses/MIT +*/ + +.cssanimation { + animation-duration: 1s; + animation-fill-mode: both; +} +.cssanimation span { + animation-duration: 1s; + animation-fill-mode: both; + display: inline-block; +} +.infinite { animation-iteration-count: infinite !important } + +/*-------------------------------------------------------------- + Striking +--------------------------------------------------------------*/ +.hu___hu___ { animation-name: hu___hu__; animation-iteration-count: infinite; animation-duration: 2s; animation-timing-function: linear; } +@keyframes hu___hu__ { + from, to { transform: translateY(30px) } + 50% { transform: translateY(0px) } +} +.snake span{ animation-name: snake; animation-iteration-count: infinite; animation-duration: 1.5s } +@keyframes snake { + from, to { transform: translateY(0px) } + 50% { transform: translateY(30px) } +} +.effect3d { animation-name: effect3d } +@keyframes effect3d { + to { text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0, 0, 0, .1), 0 0 5px rgba(0, 0, 0, .1), 0 1px 3px rgba(0, 0, 0, .3), 0 3px 5px rgba(0, 0, 0, .2), 0 5px 10px rgba(0, 0, 0, .25), 0 10px 10px rgba(0, 0, 0, .2), 0 20px 20px rgba(0, 0, 0, .15) } +} +.rainDrop span { animation-name: rainDrop; animation-iteration-count: infinite } +@keyframes rainDrop { + 0%, 25%, 55%, 75%, 87%, 97%, 100% { transform: scaleX(1.0) } + 26%, 56%, 76% { transform: scaleX(1.3) scaleY(0.8) } + 31%, 61%, 81% { transform: scaleX(0.8) scaleY(1.2) } + 76%, 88% { transform: scaleX(1.2) } + 98% { transform: scaleX(1.1) } +} +.pepe { animation-name: pepe; animation-iteration-count: infinite } +@keyframes pepe { + from, 33%, 66%, to { transform: rotate(4deg); } + 16%, 50%, 83% { transform: rotate(-4deg);} +} +.waterWave span { animation-name: waterWave; animation-duration: .2s; animation-timing-function: linear; animation-iteration-count: infinite; } +@keyframes waterWave { + 50% { transform: skewY(1deg) skewX(-1deg) scale(1.06) } +} +.lightning { animation-name: lightning; animation-iteration-count: infinite; } +@keyframes lightning { + from, 40%, 80%, to { opacity: 1 } + 20%, 60% { opacity: 0 } +} +.joltZoom span { animation-name: joltZoom } +@keyframes joltZoom { + 10% { font-size: 140% } + 40% { + font-size: 80%; + animation-timing-function: ease-out; + } + 100% { font-size: 100% } +} +.typing { + width: 473px; + overflow: hidden; + display: inline-flex; + border-right: 2px solid #7E2EA0; + animation: typing 2s steps(11, end), cursor .25s steps(11, end) infinite; +} +@keyframes typing { + from { width: 0 } +} +@keyframes cursor { + 50% { border-color: transparent } +} +.electricity { animation-name: electricity; animation-iteration-count: infinite; } +@keyframes electricity { + from, 37%, 67%, 85%, 93%{ transform: translateY(30px) } + 4%, 64%, 88% { transform: translateY(10px) } + 8%, 24%, 32%, 44% { transform: translateY(5px) } + 12%, 52%, 60%, 20% { transform: translateY(10px) } + 16%, 40% { transform: translateY(5px) } + 28%, 56% { transform: translateY(10px) } + 48%, 72%, 80%, 96% { transform: translateY(30px) } + 76% , to{ transform: translateY(40px) } +} +.wipe { + width: 473px; + overflow: hidden; + margin: 0 auto; + display: inline-flex; + animation-name: wipe; +} +@keyframes wipe { + to { width: 0 } +} +.open { + width: 473px; + margin: 0 auto; + overflow: hidden; + display: inline-flex; + animation-name: open; +} +@keyframes open { + from { width: 0 } +} +.shapeRise span { animation-name: shapeRise } +@keyframes shapeRise { + 50% { + transform: scale(1.8); + letter-spacing: 26px + } +} +.leBeat span{ animation-name: leBeat; animation-iteration-count: infinite; } +@keyframes leBeat { + 14%, 42% { transform: scale(1.3) } + 28%, 70% { transform: scale(1) } +} + +/*-------------------------------------------------------------- +Letter Fade in +--------------------------------------------------------------*/ +.leFadeIn span { animation-name: leFadeIn } +@keyframes leFadeIn { + from { opacity: 0 } + to { opacity: 1 } +} +.leFadeInLeft span { animation-name: leFadeInLeft } +@keyframes leFadeInLeft { + from { + opacity: 0; + transform: translateX(-60px); + } + to { opacity: 1 } +} +.leFadeInRight span { animation-name: leFadeInRight } +@keyframes leFadeInRight { + from { + opacity: 0; + transform: translateX(60px); + } + to { opacity: 1 } +} +.leFadeInTop span { animation-name: leFadeInTop } +@keyframes leFadeInTop { + from { + opacity: 0; + transform: translateY(-100%); + } + to { opacity: 1 } +} +.leFadeInBottom span { animation-name: leFadeInBottom } +@keyframes leFadeInBottom { + from { + opacity: 0; + transform: translateY(100%); + } + to { opacity: 1 } +} + +/*-------------------------------------------------------------- + Letter Fade Out +--------------------------------------------------------------*/ +.leFadeOut span { animation-name: leFadeOut } +@keyframes leFadeOut { + to { opacity: 0 } +} +.leFadeOutLeft span { animation-name: leFadeOutLeft } +@keyframes leFadeOutLeft { + from { opacity: 1 } + to { + opacity: 0; + transform: translateX(-60px); + } +} +.leFadeOutRight span { animation-name: leFadeOutRight } +@keyframes leFadeOutRight { + from { opacity: 1 } + to { + opacity: 0; + transform: translateX(60px); + } +} +.leFadeOutTop span { animation-name: leFadeOutTop } +@keyframes leFadeOutTop { + from { opacity: 1 } + to { + opacity: 0; + transform: translateY(-100%); + } +} +.leFadeOutBottom span { animation-name: leFadeOutBottom } +@keyframes leFadeOutBottom { + from { opacity: 1 } + to { + opacity: 0; + transform: translateY(100%); + } +} + +/*-------------------------------------------------------------- + Letter Skate +--------------------------------------------------------------*/ +.skateX span { animation-name: scaleX; animation-iteration-count: infinite; } +@keyframes scaleX { + 50% { transform: scaleX(0.4) } +} +.skateY span { animation-name: scaleY; animation-iteration-count: infinite; } +@keyframes scaleY { + 50% { transform: scaleY(0.4) } +} +.skateXY span { animation-name: scaleXY; animation-iteration-count: infinite; animation-duration: 1.5s; } +@keyframes scaleXY { + 25% { transform: scale3d(1, 0.4, 0) } + 50% { transform: scale3d(0.4, 0.4, 1) } + 75% { transform: scale3d(0.4, 1, 1) } +} + +/*-------------------------------------------------------------- + Letter Scale +--------------------------------------------------------------*/ +.scaleXIn span { animation-name: scaleXIn } +@keyframes scaleXIn { + from { + transform: perspective(400px) rotateX(90deg); + opacity: 0; + } + 50% { opacity: 1 } +} +.scaleXOut span { animation-name: scaleXOut } +@keyframes scaleXOut { + to { + transform: perspective(400px) rotateX(90deg); + opacity: 0; + } + from { opacity: 1 } +} +.scaleYIn span { animation-name: scaleYIn } +@keyframes scaleYIn { + from { + transform: perspective(400px) rotateY(90deg); + opacity: 0; + } + 50% { opacity: 1 } +} +.scaleYOut span { animation-name: scaleYOut } +@keyframes scaleYOut { + to { + transform: perspective(400px) rotateY(90deg); + opacity: 0; + } + from { opacity: 1 } +} + +/*-------------------------------------------------------------- + Letter Jump +--------------------------------------------------------------*/ +.leJump span { animation-name: leJump; animation-iteration-count: infinite } +@keyframes leJump { + to { transform: translateY(-20px) } +} + +/*-------------------------------------------------------------- + Letter Fly +--------------------------------------------------------------*/ +.aboundTop span { animation-name: aboundTop } +@keyframes aboundTop { + 50% { + transform: translateY(-100px); + animation-timing-function: ease-in; + } +} +.aboundBottom span { animation-name: aboundBottom } +@keyframes aboundBottom { + 50% { + transform: translateY(100px); + animation-timing-function: ease-in; + } +} +.aboundLeft span { animation-name: aboundLeft } +@keyframes aboundLeft { + 50% { + transform: translateX(-100px); + animation-timing-function: ease-in; + } +} +.aboundRight span { animation-name: aboundRight } +@keyframes aboundRight { + 50% { + transform: translateX(100px); + animation-timing-function: ease-in; + } +} + +/*-------------------------------------------------------------- + Letter Fly In +--------------------------------------------------------------*/ +.flyInTop span { animation-name: flyInTop } +@keyframes flyInTop { + 0% { transform: translate(0px, -800px) } + 50% { transform: translate(10px, 40px) } +} +.flyInLeft span { animation-name: flyInLeft } +@keyframes flyInLeft { + 0% { + transform: translate(-40px, 0px); + opacity: 0; + } + 50% { transform: translate(40px, 0px) } +} +.flyInRight span { animation-name: flyInRight } +@keyframes flyInRight { + 0% { + transform: translate(40px, 0px); + opacity: 0; + } + 50% { transform: translate(-40px, 0px) } +} +.flyInBottom span { animation-name: flyInBottom } +@keyframes flyInBottom { + 0% { transform: translate(0px, 800px) } + 50% { transform: translate(10px, -40px) } +} + +/*-------------------------------------------------------------- + Letter Fly Out +--------------------------------------------------------------*/ +.flyOutTop span { animation-name: flyOutTop } +@keyframes flyOutTop { + 50% { transform: translate(0px, 40px) } + to { transform: translate(0px, -800px) } +} +.flyOutLeft span { animation-name: flyOutLeft } +@keyframes flyOutLeft { + 50% { transform: translate(40px, 0px) } + to { transform: translate(-1200px, 0px) } +} +.flyOutRight span { animation-name: flyOutRight } +@keyframes flyOutRight { + 50% { transform: translate(-40px, 0px) } + to { transform: translate(1200px, 0px) } +} +.flyOutBottom span { animation-name: flyOutBottom } +@keyframes flyOutBottom { + 50% { transform: translate(0px, -40px) } + to { transform: translate(0px, 800px) } +} + +/*-------------------------------------------------------------- + Letter Door Open & Close +--------------------------------------------------------------*/ +.leDoorCloseLeft span{ animation-name: leDoorCloseLeft } +@keyframes leDoorCloseLeft { + from, to { + transform: perspective(400px); + transform-origin: left + } + from { + transform: rotateY(90deg); + opacity: 0; + } + to { opacity: 1 } + +} +.leDoorOpenRight span{ animation-name: leDoorOpenRight } +@keyframes leDoorOpenRight { + from, to { + transform: perspective(400px); + transform-origin: left + } + to { + transform: rotateY(90deg); + opacity: 0; + } +} +.leDoorCloseRight span{ animation-name: leDoorCloseRight } +@keyframes leDoorCloseRight { + from, to { + transform: perspective(400px); + transform-origin: right + } + from { + transform: rotateY(-90deg); + opacity: 0; + } + to { opacity: 1 } +} +.leDoorOpenLeft span{ animation-name: leDoorOpenLeft } +@keyframes leDoorOpenLeft { + from, to { + transform: perspective(400px); + transform-origin: right + } + to { + transform: rotateY(-90deg); + opacity: 0; + } +} + +/*-------------------------------------------------------------- + Letter Hang And Drop +--------------------------------------------------------------*/ +.leHangAndDropLeft span{ animation-name: leHangAndDropLeft } +@keyframes leHangAndDropLeft { + from {transform-origin: left;} + 50% { + transform: rotate(100deg); + transform-origin: left; + } + 60% { + transform: rotate(90deg); + transform-origin: left; + } + to { + transform: translateY(800px) rotate(70deg); + transform-origin: left; + } +} +.leHangAndDropRight span{ animation-name: leHangAndDropRight } +@keyframes leHangAndDropRight { + from { transform-origin: right } + 50% { + transform: rotate(-100deg); + transform-origin: right; + } + 60% { + transform: rotate(-90deg); + transform-origin: right; + } + to { + transform: translateY(800px) rotate(-70deg); + transform-origin: right; + } +} + +/*-------------------------------------------------------------- + Letter Shake +--------------------------------------------------------------*/ +.lePulseShake span{ animation-name: lePulseShake; animation-iteration-count: infinite } +@keyframes lePulseShake { + 90% { transform: scale(1) } + 92% { transform: scale(1.2) } + 96% { transform: scale(1, 1) } + 98% { transform: scale(1.1) } +} +.leHorizontalShake span{ animation-name: leHorizontalShake; animation-iteration-count: infinite } +@keyframes leHorizontalShake { + 3%, 12%, 21%, 30%, 39%, 48%, 57%, 65%, 74%, 83%, 92% { transform: translateX(5px) } + 6%, 15%, 24%, 33%, 42%, 51%, 60%, 68%, 77%, 86%, 95% { transform: translateX(3px) } + 9%, 18%, 27%, 36%, 45%, 54%, 63%, 71%, 80%, 89%, 98% { transform: translateX(-5px) } +} +.leVerticalShake span{ animation-name: leVerticalShake; animation-iteration-count: infinite } +@keyframes leVerticalShake { + 3%, 12%, 21%, 30%, 39%, 48%, 57%, 65%, 74%, 83%, 92% { transform: translateY(5px) } + 6%, 15%, 24%, 33%, 42%, 51%, 60%, 68%, 77%, 86%, 95% { transform: translateY(3px) } + 9%, 18%, 27%, 36%, 45%, 54%, 63%, 71%, 80%, 89%, 98% { transform: translateY(-5px) } +} +.leMadMax span{ animation-name: leMadMax; animation-iteration-count: infinite } +@keyframes leMadMax { + 3%, 12%, 21%, 30%, 39%, 48%, 57%, 65%, 74%, 83%, 92% { transform: translateY(5px) scale(1.1) } + 6%, 15%, 24%, 33%, 42%, 51%, 60%, 68%, 77%, 86%, 95% { transform: translateY(3px) scale(.8) } + 9%, 18%, 27%, 36%, 45%, 54%, 63%, 71%, 80%, 89%, 98% { transform: translateY(-5px) scale(1.1) } +} +.leHorizontalTremble span{ animation-name: leHorizontalTremble; animation-iteration-count: infinite } +@keyframes leHorizontalTremble { + 3%, 21%, 39%, 57%, 74%, 92% { transform: translateX(5px) } + 6%, 24%, 42%, 60%, 77%, 95% { transform: translateX(3px) } + 9%, 27%, 45%, 63%, 80%, 98% { transform: translateX(-5px) } +} +.leVerticalTremble span{ animation-name: leVerticalTremble; animation-iteration-count: infinite } +@keyframes leVerticalTremble { + 3%, 21%, 39%, 57%, 74%, 92% { transform: translateY(5px) } + 6%, 24%, 42%, 60%, 77%, 95% { transform: translateY(3px) } + 9%, 27%, 45%, 63%, 80%, 98% { transform: translateY(-5px) } +} +.leCrazyCool span{ animation-name: leCrazyCool; animation-iteration-count: infinite } +@keyframes leCrazyCool { + 3%, 21%, 39%, 57%, 74%, 92% { transform: translateY(5px) scale(1.1) } + 6%, 24%, 42%, 60%, 77%, 95% { transform: translateY(3px) scale(.8) } + 9%, 27%, 45%, 63%, 80%, 98% { transform: translateY(-5px) scale(1.1) } +} +.leVibration span{ animation: leVibration .1s linear infinite } +@keyframes leVibration { + 50% { transform: skewY(1deg) skewX(-1deg) scale(1.06) } +} + +/*-------------------------------------------------------------- + Letter Push Release +--------------------------------------------------------------*/ +.lePushReleaseFrom span{ animation-name: lePushReleaseFrom } +@keyframes lePushReleaseFrom { + from { + transform: scale(3, 3); + opacity: 0; + } + 50% { transform: scale(.5, .5) } +} +.lePushReleaseFromLeft span{ animation-name: lePushReleaseFromLeft } +@keyframes lePushReleaseFromLeft { + from { + transform: translateX(-100%); + opacity: 0 + } + 30% { transform: translateX(100px) } +} +.lePushReleaseFromTop span{ animation-name: lePushReleaseFromTop } +@keyframes lePushReleaseFromTop { + from { + transform: translateY(-100%); + opacity: 0; + } + 30% { transform: translateY(100px) } +} +.lePushReleaseFromBottom span{ animation-name: lePushReleaseFromBottom } +@keyframes lePushReleaseFromBottom { + from { + transform: translateY(100%); + opacity: 0; + } + 30% { transform: translateY(-100px) } +} +.lePushReleaseTo span{ animation-name: lePushReleaseTo } +@keyframes lePushReleaseTo { + 30% { transform: scale(.5, .5) } + to { + transform: scale(5, 5); + opacity: 0; + } + +} +.lePushReleaseToTop span{ animation-name: lePushReleaseToTop } +@keyframes lePushReleaseToTop { + 30% { transform: translateY(100px) } + to { transform: translateY(-100%); opacity: 0} +} +.lePushReleaseToBottom span{ animation-name: lePushReleaseToBottom } +@keyframes lePushReleaseToBottom { + 30% { transform: translateY(-100px) } + to { transform: translateY(100%); opacity: 0 } +} + +/*-------------------------------------------------------------- + Letter Flip +--------------------------------------------------------------*/ +.leFlipIn span { animation-name: leFlipX } +@keyframes leFlipX { + from { + transform: perspective(600px); + opacity: 0 + } + 30% { + transform: perspective(600px) rotateX(180deg); + transform-origin: 0 0; + animation-timing-function: ease-out; + } + to {transform: perspective(600px) } +} +.leFlipOut span { animation-name: leFlipOut } +@keyframes leFlipOut { + to { + transform: perspective(600px); + opacity: 0 + } + 70% { + transform: perspective(600px) rotateX(180deg); + transform-origin: 0 0; + animation-timing-function: ease-out; + } + to {transform: perspective(600px) } +} + +/*-------------------------------------------------------------- + Letter Elevate +--------------------------------------------------------------*/ +.leElevateLeft span{ animation-name: leElevateLeft } +@keyframes leElevateLeft { + from { + transform: translateY(100%) rotate(-20deg); + transform-origin: right; + opacity: 0; + } + 40% { + transform: rotate(20deg); + transform-origin: right; + } + 65% { + transform: rotate(0deg); + transform-origin: right; + } +} +.leElevateRight span{ animation-name: leElevateRight } +@keyframes leElevateRight { + from { + transform: translateY(100%) rotate(20deg); + transform-origin: left; + opacity: 0; + } + 40% { + transform: rotate(-20deg); + transform-origin: left; + } + 65% { + transform: rotate(0deg); + transform-origin: left; + } +} + +/*-------------------------------------------------------------- + Letter Roll From +--------------------------------------------------------------*/ +.leRollFromLeft span{ animation-name: leRollFromLeft } +@keyframes leRollFromLeft { + from { transform: translateX(-60px) perspective(600px) rotateY(180deg); opacity: 0 } +} +.leRollFromRight span{ animation-name: leRollFromRight } +@keyframes leRollFromRight { + from { transform: translateX(60px) perspective(600px) rotateY(-180deg); opacity: 0 } +} +.leRollFromTop span{ animation-name: leRollFromTop } +@keyframes leRollFromTop { + from { transform: translateY(-60px) perspective(600px) rotateX(180deg); opacity: 0 } +} +.leRollFromBottom span{ animation-name: leRollFromBottom } +@keyframes leRollFromBottom { + from { transform: translateY(60px) perspective(600px) rotateX(-180deg); opacity: 0 } +} + +/*-------------------------------------------------------------- + Letter Roll To +--------------------------------------------------------------*/ +.leRollToLeft span{ animation-name: leRollToLeft } +@keyframes leRollToLeft { + to { transform: translateX(-60px) perspective(600px) rotateY(180deg); opacity: 0 } +} +.leRollToRight span{ animation-name: leRollToRight } +@keyframes leRollToRight { + to { transform: translateX(60px) perspective(600px) rotateY(-180deg); opacity: 0} +} +.leRollToTop span{ animation-name: leRollToTop } +@keyframes leRollToTop { + to { transform: translateY(-60px) perspective(600px) rotateX(180deg); opacity: 0} +} +.leRollToBottom span{ animation-name: leRollToBottom } +@keyframes leRollToBottom { + to { transform: translateY(60px) perspective(600px) rotateX(-180deg); opacity: 0} +} + +/*-------------------------------------------------------------- + Letter Rotation +--------------------------------------------------------------*/ +.leRotationXIn span{ animation-name: leRotationXIn } +@keyframes leRotationXIn { + from { + transform: perspective(600px) translate3d(0, -60px, -2000px) rotateX(75deg); + opacity: 0; + } + 5% { transform: perspective(600px) translate3d(0, -60px, -1500px) rotateX(75deg) } +} +.leRotationXOut span{ animation-name: leRotationXOut } +@keyframes leRotationXOut { + 95% { transform: perspective(600px) translate3d(0, -60px, -1500px) rotateX(75deg) } + to { + transform: perspective(600px) translate3d(0, -60px, -2000px) rotateX(75deg); + opacity: 0; + } +} +.leRotationYIn span{ animation-name: leRotationYIn } +@keyframes leRotationYIn { + from { + transform: perspective(600px) translate3d(0, -60px, -2000px) rotateY(75deg); + opacity: 0; + } + 5% { transform: perspective(600px) translate3d(0, -60px, -1500px) rotateY(75deg); } +} +.leRotationYOut span{ animation-name: leRotationYOut } +@keyframes leRotationYOut { + 95% { transform: perspective(600px) translate3d(0, -60px, -1500px) rotateY(75deg) } + to { + transform: perspective(600px) translate3d(0, -60px, -2000px) rotateY(75deg); + opacity: 0; + } +} + +/*-------------------------------------------------------------- + Letter Rotate +--------------------------------------------------------------*/ +.leRotateIn span { animation-name: leRotateIn } +@keyframes leRotateIn { + from { + transform: rotate(-180deg); + opacity: 0; + } + to { opacity: 1 } +} +.leRotateOut span { animation-name: leRotateOut } +@keyframes leRotateOut { + from { opacity: 1 } + to { + transform: rotate(180deg); + opacity: 0; + } +} +.leRotateInLeft span { animation-name: leRotateInLeft } +@keyframes leRotateInLeft { + from { + transform: rotate(-180deg) translateX(150px); + opacity: 0; + } + to { opacity: 1 } +} +.leRotateOutLeft span { animation-name: leRotateOutLeft } +@keyframes leRotateOutLeft { + from { opacity: 1 } + to { + transform: rotate(180deg) translateX(150px); + opacity: 0; + } +} +.leRotateInRight span { animation-name: leRotateInRight } +@keyframes leRotateInRight { + from { + transform: rotate(-180deg) translateX(-150px); + opacity: 0; + } + to { opacity: 1 } +} +.leRotateOutRight span { animation-name: leRotateOutRight } +@keyframes leRotateOutRight { + from { opacity: 1 } + to { + transform: rotate(180deg) translateX(-150px); + opacity: 0; + } +} + +/*-------------------------------------------------------------- + Letter Spin +--------------------------------------------------------------*/ +.leSpinInLeft span{ animation-name: leSpinInLeft } +@keyframes leSpinInLeft { + from, to { transform-origin: left bottom } + from { + transform: rotate(90deg); + opacity: 0; + } +} +.leSpinInRight span{ animation-name: leSpinInRight } +@keyframes leSpinInRight { + from, to { transform-origin: right bottom } + from { + transform: rotate(-90deg); + opacity: 0; + } +} +.leSpinOutLeft span{ animation-name: leSpinOutLeft } +@keyframes leSpinOutLeft { + from, to { transform-origin: left bottom } + to { + transform: rotate(90deg); + opacity: 0; + } +} +.leSpinOutRight span{ animation-name: leSpinOutRight } +@keyframes leSpinOutRight { + from, to { transform-origin: right bottom } + to { + transform: rotate(-90deg); + opacity: 0; + } +} + +/*-------------------------------------------------------------- + Letter Blur In +--------------------------------------------------------------*/ +.leBlurInRight span { animation-name: leBlurInRight } +@keyframes leBlurInRight { + from { + transform: scaleX(0.2) translateX(100px); + text-shadow: 0 0 10px rgba(167, 81, 203, 0.6), 0 0 30px rgba(167, 81, 203, 0.4), 0 0 50px rgba(167, 81, 203, 0.3), 0 0 180px rgba(167, 81, 203, 0.3); + color: transparent; + opacity: 0; + } + 20% { + text-shadow: 0 0 10px rgba(167, 81, 203, 0.6), 0 0 30px rgba(167, 81, 203, 0.4), 0 0 50px rgba(167, 81, 203, 0.3), 0 0 180px rgba(167, 81, 203, 0.3); + color: transparent; + } +} +.leBlurInLeft span { animation-name: leBlurInLeft } +@keyframes leBlurInLeft { + from { + transform: scaleX(0.2) translateX(-100px); + text-shadow: 0 0 10px rgba(167, 81, 203, 0.6), 0 0 30px rgba(167, 81, 203, 0.4), 0 0 50px rgba(167, 81, 203, 0.3), 0 0 180px rgba(167, 81, 203, 0.3); + color: transparent; + opacity: 0; + } + 20% { + text-shadow: 0 0 10px rgba(167, 81, 203, 0.6), 0 0 30px rgba(167, 81, 203, 0.4), 0 0 50px rgba(167, 81, 203, 0.3), 0 0 180px rgba(167, 81, 203, 0.3); + color: transparent; + } +} +.leBlurInTop span { animation-name: leBlurInTop } +@keyframes leBlurInTop { + from { + transform: scaleY(0.2) translateY(-100px); + text-shadow: 0 0 10px rgba(167, 81, 203, 0.6), 0 0 30px rgba(167, 81, 203, 0.4), 0 0 50px rgba(167, 81, 203, 0.3), 0 0 180px rgba(167, 81, 203, 0.3); + color: transparent; + opacity: 0; + } + 20% { + text-shadow: 0 0 10px rgba(167, 81, 203, 0.6), 0 0 30px rgba(167, 81, 203, 0.4), 0 0 50px rgba(167, 81, 203, 0.3), 0 0 180px rgba(167, 81, 203, 0.3); + color: transparent; + } +} +.leBlurInBottom span { animation-name: leBlurInBottom } +@keyframes leBlurInBottom { + from { + transform: scaleY(0.2) translateY(100px); + text-shadow: 0 0 10px rgba(167, 81, 203, 0.6), 0 0 30px rgba(167, 81, 203, 0.4), 0 0 50px rgba(167, 81, 203, 0.3), 0 0 180px rgba(167, 81, 203, 0.3); + color: transparent; + opacity: 0; + } + 20% { + text-shadow: 0 0 10px rgba(167, 81, 203, 0.6), 0 0 30px rgba(167, 81, 203, 0.4), 0 0 50px rgba(167, 81, 203, 0.3), 0 0 180px rgba(167, 81, 203, 0.3); + color: transparent; + } +} + +/*-------------------------------------------------------------- + Letter Blur Out +--------------------------------------------------------------*/ +.leBlurOutRight span { animation-name: leBlurOutRight } +@keyframes leBlurOutRight { + 20% { + text-shadow: 0 0 10px rgba(167, 81, 203, 0.6), 0 0 30px rgba(167, 81, 203, 0.4), 0 0 50px rgba(167, 81, 203, 0.3), 0 0 180px rgba(167, 81, 203, 0.3); + color: transparent; + } + to { + transform: scaleX(0.2) translateX(100px); + text-shadow: 0 0 10px rgba(167, 81, 203, 0.6), 0 0 30px rgba(167, 81, 203, 0.4), 0 0 50px rgba(167, 81, 203, 0.3), 0 0 180px rgba(167, 81, 203, 0.3); + color: transparent; + opacity: 0; + } +} +.leBlurOutLeft span { animation-name: leBlurOutLeft } +@keyframes leBlurOutLeft { + 20% { + text-shadow: 0 0 10px rgba(167, 81, 203, 0.6), 0 0 30px rgba(167, 81, 203, 0.4), 0 0 50px rgba(167, 81, 203, 0.3), 0 0 180px rgba(167, 81, 203, 0.3); + color: transparent; + } + to { + transform: scaleX(0.2) translateX(-100px); + text-shadow: 0 0 10px rgba(167, 81, 203, 0.6), 0 0 30px rgba(167, 81, 203, 0.4), 0 0 50px rgba(167, 81, 203, 0.3), 0 0 180px rgba(167, 81, 203, 0.3); + color: transparent; + opacity: 0; + } +} +.leBlurOutTop span { animation-name: leBlurOutTop } +@keyframes leBlurOutTop { + 20% { + text-shadow: 0 0 10px rgba(167, 81, 203, 0.6), 0 0 30px rgba(167, 81, 203, 0.4), 0 0 50px rgba(167, 81, 203, 0.3), 0 0 180px rgba(167, 81, 203, 0.3); + color: transparent; + } + to { + transform: scaleY(0.2) translateY(-100px); + text-shadow: 0 0 10px rgba(167, 81, 203, 0.6), 0 0 30px rgba(167, 81, 203, 0.4), 0 0 50px rgba(167, 81, 203, 0.3), 0 0 180px rgba(167, 81, 203, 0.3); + color: transparent; + opacity: 0; + } +} +.leBlurOutBottom span { animation-name: leBlurOutBottom } +@keyframes leBlurOutBottom { + 20% { + text-shadow: 0 0 10px rgba(167, 81, 203, 0.6), 0 0 30px rgba(167, 81, 203, 0.4), 0 0 50px rgba(167, 81, 203, 0.3), 0 0 180px rgba(167, 81, 203, 0.3); + color: transparent; + } + to { + transform: scaleY(0.2) translateY(100px); + text-shadow: 0 0 10px rgba(167, 81, 203, 0.6), 0 0 30px rgba(167, 81, 203, 0.4), 0 0 50px rgba(167, 81, 203, 0.3), 0 0 180px rgba(167, 81, 203, 0.3); + color: transparent; + opacity: 0; + } +} + +/*-------------------------------------------------------------- + Letter Pop Up +--------------------------------------------------------------*/ +.lePopUp span { animation-name: lePopUp } +@keyframes lePopUp { + 50% { transform: scale(1.5) } +} +.lePopUpLeft span { animation-name: lePopUpLeft } +@keyframes lePopUpLeft { + 50% { + transform: translateX(-50px) scale(1.5); + animation-timing-function: ease-in; + } +} +.lePopUpRight span { animation-name: lePopUpRight } +@keyframes lePopUpRight { + 50% { + transform: translateX(50px) scale(1.5); + animation-timing-function: ease-in; + } +} + +/*-------------------------------------------------------------- + Letter Pop Out +--------------------------------------------------------------*/ +.lePopOut span { animation-name: lePopOut } +@keyframes lePopOut { + 50% { transform: scale(.5) } +} +.lePopOutLeft span { animation-name: lePopOutLeft } +@keyframes lePopOutLeft { + 50% { + transform: translateX(-50px) scale(.5); + animation-timing-function: ease-in; + } +} +.lePopOutRight span { animation-name: lePopOutRight } +@keyframes lePopOutRight { + 50% { + transform: translateX(50px) scale(.5); + animation-timing-function: ease-in; + } +} + +/*-------------------------------------------------------------- + Letter Bouncing +--------------------------------------------------------------*/ +.leBounceFromTop span{ animation-name: leBounceFromTop } +@keyframes leBounceFromTop { + 0%, 25%, 55%, 85%, 100% { + animation-timing-function: ease-out; + transform: translate3d(0, 0, 0); + } + 41%, 44% { + animation-timing-function: ease-in; + transform: translate3d(0, -80px, 0) scale3d(1, 1.2, 1); + } + 70% { + animation-timing-function: ease-in; + transform: translate3d(0, -20px, 0); + } + 90% { transform: translate3d(0, -4px, 0) } +} +.leBounceFromDown span{ animation-name: leBounceFromDown } +@keyframes leBounceFromDown { + 0%, 25%, 55%, 85%, 100% { + animation-timing-function: ease-out; + transform: translate3d(0, 0, 0); + } + 41%, 44% { + animation-timing-function: ease-in; + transform: translate3d(0, 80px, 0) scale3d(1, 1.2, 1); + } + 70% { + animation-timing-function: ease-in; + transform: translate3d(0, 20px, 0); + } + 90% { transform: translate3d(0, 4px, 0) } +} +.leBounceY span{ animation-name: leBounceY } +@keyframes leBounceY { + 0%, 25%, 55%, 85%, 100% { + animation-timing-function: ease-out; + transform: scale3d(1, 1, 1); + } + 41%, 44% { + animation-timing-function: ease-in; + transform: scale3d(1, 2, 1); + } + 70% { + animation-timing-function: ease-in; + transform: scale3d(1, 1.5, 1); + } + 90% { transform: scale3d(1, 1.1, 1) } +} +.leBounceZoomIn span{ animation-name: leBounceZoomIn } +@keyframes leBounceZoomIn { + 0%, 25%, 55%, 85%, 100% { + animation-timing-function: ease-out; + transform: scale(1); + } + 41%, 44% { + animation-timing-function: ease-in; + transform: scale(1.7); + } + 70% { + animation-timing-function: ease-in; + transform: scale(1.9); + } + 90% { transform: scale(1.1) } +} +.leBounceZoomOut span{ animation-name: leBounceZoomOut } +@keyframes leBounceZoomOut { + 0%, 25%, 55%, 85%, 100% { + animation-timing-function: ease-out; + transform: scale(1); + } + 41%, 44% { + animation-timing-function: ease-in; + transform: scale(.5); + } + 70% { + animation-timing-function: ease-in; + transform: scale(.7); + } + 90% { transform: scale(.9) } +} + +/*-------------------------------------------------------------- + Letter Perspective +--------------------------------------------------------------*/ +.lePerspectiveOutTop span{ animation-name: lePerspectiveOutTop; transform: perspective(500px); transform-style: preserve-3d } +@keyframes lePerspectiveOutTop { + 50% { opacity: 1;} + to { + transform: perspective(500px) rotateX(90deg) translateY(-50px) translateZ(50px); + opacity: 0; + } +} +.lePerspectiveOutBottom span{ animation-name: lePerspectiveOutBottom; transform: perspective(500px); transform-style: preserve-3d } +@keyframes lePerspectiveOutBottom { + 50% { opacity: 1;} + to { + transform: perspective(500px) rotateX(90deg) translateY(50px) translateZ(-50px); + opacity: 0; + } +} + +/*-------------------------------------------------------------- + Letter Zoom In +--------------------------------------------------------------*/ +.leZoomIn span { animation-name: leZoomIn } +@keyframes leZoomIn { + from { + transform: scale(10); + opacity: 0; + } +} +.leZoomInLeft span{ animation-name: leZoomInLeft } +@keyframes leZoomInLeft { + from { + transform: scale(10) translateX(-150%); + opacity: 0; + } +} +.leZoomInRight span{ animation-name: leZoomInRight } +@keyframes leZoomInRight { + from { + transform: scale(10) translateX(150%); + opacity: 0; + } +} +.leZoomInTop span { animation-name: LetterZoomInTop } +@keyframes LetterZoomInTop { + from { + transform: scale(10) translateY(-50%); + opacity: 0; + } +} +.leZoomInBottom span { animation-name: leZoomInBottom } +@keyframes leZoomInBottom { + from { + transform: scale(10) translateY(50%); + opacity: 0; + } +} + +/*-------------------------------------------------------------- + Letter Zoom Out +--------------------------------------------------------------*/ +.leZoomOut span{ animation-name: leZoomOut } +@keyframes leZoomOut { + to { + transform: scale(10); + opacity: 0; + } +} +.leZoomOutLeft span{ animation-name: leZoomOutLeft } +@keyframes leZoomOutLeft { + to { + transform: scale(10) translateX(-150%); + opacity: 0; + } +} +.leZoomOutRight span{ animation-name: leZoomOutRight } +@keyframes leZoomOutRight { + to { + transform: scale(10) translateX(150%); + opacity: 0; + } +} +.leZoomOutTop span{ animation-name: leZoomOutTop } +@keyframes leZoomOutTop { + to { + transform: scale(10) translateY(-50%); + opacity: 0; + } +} +.leZoomOutBottom span{ animation-name: leZoomOutBottom } +@keyframes leZoomOutBottom { + to { + transform: scale(10) translateY(50%); + opacity: 0; + } +} + +/*-------------------------------------------------------------- + Letter Dance In +--------------------------------------------------------------*/ +.leDanceInTop span { animation-name: leDanceInTop; transform-origin: top } +@keyframes leDanceInTop { + from { opacity: 0 } + 16% { transform: skew(-14deg) } + 33% { transform: skew(12deg) } + 49% { transform: skew(-8deg) } + 66% { transform: skew(6deg) } + 83% { transform: skew(-4deg) } +} +.leDanceInMiddle span { animation-name: leDanceInMiddle } +@keyframes leDanceInMiddle { + from { opacity: 0 } + 16% { transform: skew(-14deg) } + 33% { transform: skew(12deg) } + 49% { transform: skew(-8deg) } + 66% { transform: skew(6deg) } + 83% { transform: skew(-4deg) } +} +.leDanceInBottom span { animation-name: leDanceInBottom; transform-origin: bottom } +@keyframes leDanceInBottom { + from { opacity: 0 } + 16% { transform: skew(-14deg) } + 33% { transform: skew(12deg) } + 49% { transform: skew(-8deg) } + 66% { transform: skew(6deg) } + 83% { transform: skew(-4deg) } +} + +/*-------------------------------------------------------------- + Letter Dance Out +--------------------------------------------------------------*/ +.leDanceOutTop span { animation-name: leDanceOutTop; transform-origin: top } +@keyframes leDanceOutTop { + 16% { transform: skew(-14deg) } + 33% { transform: skew(12deg) } + 49% { transform: skew(-8deg) } + 66% { transform: skew(6deg) } + 83% { transform: skew(-4deg) } + to { opacity: 0 } +} +.leDanceOutMiddle span { animation-name: leDanceOutMiddle } +@keyframes leDanceOutMiddle { + 16% { transform: skew(-14deg) } + 33% { transform: skew(12deg) } + 49% { transform: skew(-8deg) } + 66% { transform: skew(6deg) } + 83% { transform: skew(-4deg) } + to { opacity: 0 } +} +.leDanceOutBottom span { animation-name: leDanceOutBottom; transform-origin: bottom } +@keyframes leDanceOutBottom { + 16% { transform: skew(-14deg) } + 33% { transform: skew(12deg) } + 49% { transform: skew(-8deg) } + 66% { transform: skew(6deg) } + 83% { transform: skew(-4deg) } + to { opacity: 0 } +} + +/*-------------------------------------------------------------- + Fade in +--------------------------------------------------------------*/ +.fadeIn { animation-name: fadeIn } +@keyframes fadeIn { + from { opacity: 0 } + to { opacity: 1 } +} +.fadeInLeft { animation-name: fadeInLeft } +@keyframes fadeInLeft { + from { + opacity: 0; + transform: translateX(-100%); + } + to { opacity: 1 } +} +.fadeInRight { animation-name: fadeInRight } +@keyframes fadeInRight { + from { + opacity: 0; + transform: translateX(100%); + } + to { opacity: 1 } +} +.fadeInTop { animation-name: fadeInTop } +@keyframes fadeInTop { + from { + opacity: 0; + transform: translateY(-100%); + } + to { opacity: 1 } +} +.fadeInBottom { animation-name: fadeInBottom } +@keyframes fadeInBottom { + from { + opacity: 0; + transform: translateY(100%); + } + to { opacity: 1 } +} + +/*-------------------------------------------------------------- + Fade Out +--------------------------------------------------------------*/ +.fadeOut { animation-name: fadeOut } +@keyframes fadeOut { + to { opacity: 0 } +} +.fadeOutLeft { animation-name: fadeOutLeft } +@keyframes fadeOutLeft { + from { opacity: 1 } + to { + opacity: 0; + transform: translateX(-100%); + } +} +.fadeOutRight { animation-name: fadeOutRight } +@keyframes fadeOutRight { + from { opacity: 1 } + to { + opacity: 0; + transform: translateX(100%); + } +} +.fadeOutTop { animation-name: fadeOutTop } +@keyframes fadeOutTop { + from { opacity: 1 } + to { + opacity: 0; + transform: translateY(-100%); + } +} +.fadeOutBottom { animation-name: fadeOutBottom } +@keyframes fadeOutBottom { + from { opacity: 1 } + to { + opacity: 0; + transform: translateY(100%); + } +} + +/*-------------------------------------------------------------- + Move From +--------------------------------------------------------------*/ +.moveFromLeft { animation-name: moveFromLeft } +@keyframes moveFromLeft { + from { transform: translateX(-100%) } +} +.moveFromRight { animation-name: moveFromRight } +@keyframes moveFromRight { + from { transform: translateX(100%) } +} +.moveFromTop { animation-name: moveFromTop } +@keyframes moveFromTop { + from { transform: translateY(-100%) } +} +.moveFromBottom { animation-name: moveFromBottom } +@keyframes moveFromBottom { + from { transform: translateY(100%) } +} + +/*-------------------------------------------------------------- + Move To +--------------------------------------------------------------*/ +.moveToLeft { animation-name: moveToLeft } +@keyframes moveToLeft { + to { transform: translateX(-100%) } +} +.moveToRight { animation-name: moveToRight } +@keyframes moveToRight { + to { transform: translateX(100%) } +} +.moveToTop { animation-name: moveToTop } +@keyframes moveToTop { + to { transform: translateY(-100%) } +} +.moveToBottom { animation-name: moveToBottom } +@keyframes moveToBottom { + to { transform: translateY(100%) } +} + +/*-------------------------------------------------------------- + Door +--------------------------------------------------------------*/ +.doorCloseFromLeft { animation-name: doorCloseFromLeft } +@keyframes doorCloseFromLeft { + from, to { transform-origin: left } + from { + transform: perspective(400px) rotateY(90deg); + opacity: 0; + } + 50% { opacity: 1 } +} +.doorOpenFromRight { animation-name: doorOpenFromRight } +@keyframes doorOpenFromRight { + from, to { transform-origin: left } + to { + transform: perspective(400px) rotateY(90deg); + opacity: 0; + } +} +.doorCloseFromRight { animation-name: doorCloseFromRight } +@keyframes doorCloseFromRight { + from, to { transform-origin: right } + from { + transform: perspective(400px) rotateY(-90deg); + opacity: 0; + } + 50% { opacity: 1 } +} +.doorOpenFromLeft { animation-name: doorOpenFromLeft } +@keyframes doorOpenFromLeft { + from, to { transform-origin: right } + to { + transform: perspective(400px) rotateY(-90deg); + opacity: 0; + } +} + +/*-------------------------------------------------------------- + Heartbeat +--------------------------------------------------------------*/ +.heartbeat { animation-name: heartbeat; animation-iteration-count: infinite; animation-duration: .5s } +@keyframes heartbeat { + 35%, 65% { transform: scale(1.2) } +} + +.heartbeat2 { animation-name: heartbeat2; animation-iteration-count: infinite; } +@keyframes heartbeat2 { + 14%, 42% { transform: scale(1.3) } + 28%, 70% { transform: scale(1) } +} + +/*-------------------------------------------------------------- + Hang On +--------------------------------------------------------------*/ +.hangOnLeft { animation-name: hangOnLeft } +@keyframes hangOnLeft { + from {transform-origin: left;} + 40% { + transform: rotate(100deg); + transform-origin: left; + } + 55% { + transform: rotate(80deg); + transform-origin: left; + } + 70% { + transform: rotate(95deg); + transform-origin: left; + } + 85% { + transform: rotate(85deg); + transform-origin: left; + } + 100% { + transform: rotate(90deg); + transform-origin: left; + } +} +.hangOnRight { animation-name: hangOnRight } +@keyframes hangOnRight { + from {transform-origin: right;} + 40% { + transform: rotate(-100deg); + transform-origin: right; + } + 55% { + transform: rotate(-80deg); + transform-origin: right; + } + 70% { + transform: rotate(-95deg); + transform-origin: right; + } + 85% { + transform: rotate(-85deg); + transform-origin: right; + } + 100% { + transform: rotate(-90deg); + transform-origin: right; + } +} + + +/*-------------------------------------------------------------- + Hang And Drop +--------------------------------------------------------------*/ +.hangAndDropLeft { animation-name: hangAndDropLeft } +@keyframes hangAndDropLeft { + from {transform-origin: left;} + 50% { + transform: rotate(100deg); + transform-origin: left; + } + 60% { + transform: rotate(90deg); + transform-origin: left; + } + to { + transform: translateY(300px) rotate(70deg); + transform-origin: left; + } +} +.hangAndDropRight { animation-name: hangAndDropRight } +@keyframes hangAndDropRight { + from {transform-origin: right;} + 50% { + transform: rotate(-100deg); + transform-origin: right; + } + 60% { + transform: rotate(-90deg); + transform-origin: right; + } + to { + transform: translateY(300px) rotate(-70deg); + transform-origin: right; + } +} + +/*-------------------------------------------------------------- + Shake +--------------------------------------------------------------*/ +.pulseShake { animation-name: pulseShake; animation-iteration-count: infinite } +@keyframes pulseShake { + 90% { transform: scale(1) } + 92% { transform: scale(1.2) } + 96% { transform: scale(1, 1) } + 98% { transform: scale(1.1) } +} +.horizontalShake { animation-name: horizontalShake; animation-iteration-count: infinite } +@keyframes horizontalShake { + 3%, 12%, 21%, 30%, 39%, 48%, 57%, 65%, 74%, 83%, 92% { transform: translateX(5px) } + 6%, 15%, 24%, 33%, 42%, 51%, 60%, 68%, 77%, 86%, 95% { transform: translateX(3px) } + 9%, 18%, 27%, 36%, 45%, 54%, 63%, 71%, 80%, 89%, 98% { transform: translateX(-5px) } +} +.verticalShake { animation-name: verticalShake; animation-iteration-count: infinite } +@keyframes verticalShake { + 3%, 12%, 21%, 30%, 39%, 48%, 57%, 65%, 74%, 83%, 92% { transform: translateY(5px) } + 6%, 15%, 24%, 33%, 42%, 51%, 60%, 68%, 77%, 86%, 95% { transform: translateY(3px) } + 9%, 18%, 27%, 36%, 45%, 54%, 63%, 71%, 80%, 89%, 98% { transform: translateY(-5px) } +} +.madMax { animation-name: madMax; animation-iteration-count: infinite } +@keyframes madMax { + 3%, 12%, 21%, 30%, 39%, 48%, 57%, 65%, 74%, 83%, 92% { transform: translateY(5px) scale(1.1) } + 6%, 15%, 24%, 33%, 42%, 51%, 60%, 68%, 77%, 86%, 95% { transform: translateY(3px) scale(.8) } + 9%, 18%, 27%, 36%, 45%, 54%, 63%, 71%, 80%, 89%, 98% { transform: translateY(-5px) scale(1.1) } +} +.coolHorizontalShake { animation-name: coolHorizontalShake; animation-iteration-count: infinite } +@keyframes coolHorizontalShake { + 3%, 21%, 39%, 57%, 74%, 92% { transform: translateX(5px) } + 6%, 24%, 42%, 60%, 77%, 95% { transform: translateX(3px) } + 9%, 27%, 45%, 63%, 80%, 98% { transform: translateX(-5px) } +} +.coolVerticalShake { animation-name: coolVerticalShake; animation-iteration-count: infinite } +@keyframes coolVerticalShake { + 3%, 21%, 39%, 57%, 74%, 92% { transform: translateY(5px) } + 6%, 24%, 42%, 60%, 77%, 95% { transform: translateY(3px) } + 9%, 27%, 45%, 63%, 80%, 98% { transform: translateY(-5px) } +} +.quietMad { animation-name: quietMad; animation-iteration-count: infinite } +@keyframes quietMad { + 3%, 21%, 39%, 57%, 74%, 92% { transform: translateY(5px) scale(1.1) } + 6%, 24%, 42%, 60%, 77%, 95% { transform: translateY(3px) scale(.8) } + 9%, 27%, 45%, 63%, 80%, 98% { transform: translateY(-5px) scale(1.1) } +} +.vibration { animation: vibration .1s linear infinite } +@keyframes vibration { + 50% { transform: skewY(1deg) skewX(-1deg) scale(1.06) } +} + +/*-------------------------------------------------------------- + Push Release From +--------------------------------------------------------------*/ +.pushReleaseFrom { animation-name: pushReleaseFrom } +@keyframes pushReleaseFrom { + from { + transform: scale(3, 3); + opacity: 0; + } + 30% { transform: scale(.5, .5) } +} +.pushReleaseFromLeft { animation-name: pushReleaseFromLeft } +@keyframes pushReleaseFromLeft { + from { transform: translateX(-100%) } + 30% { transform: translateX(100px) } +} +.pushReleaseFromRight { animation-name: pushReleaseFromRight } +@keyframes pushReleaseFromRight { + from { transform: translateX(100%) } + 30% { transform: translateX(-100px) } +} +.pushReleaseFromTop { animation-name: pushReleaseFromTop } +@keyframes pushReleaseFromTop { + from { transform: translateY(-100%) } + 30% { transform: translateY(100px) } +} +.pushReleaseFromBottom { animation-name: pushReleaseFromBottom } +@keyframes pushReleaseFromBottom { + from { transform: translateY(100%) } + 30% { transform: translateY(-100px) } +} +/*-------------------------------------------------------------- + Push Release To +--------------------------------------------------------------*/ +.pushReleaseTo { animation-name: pushReleaseTo } +@keyframes pushReleaseTo { + 30% { transform: scale(.5, .5) } + to { + transform: scale(5, 5); + opacity: 0; + } + +} +.pushReleaseToLeft { animation-name: pushReleaseToLeft } +@keyframes pushReleaseToLeft { + 30% { transform: translateX(100px) } + to { transform: translateX(-100%) } +} +.pushReleaseToRight { animation-name: pushReleaseToRight } +@keyframes pushReleaseToRight { + 30% { transform: translateX(-100px) } + to { transform: translateX(100%) } +} +.pushReleaseToTop { animation-name: pushReleaseToTop } +@keyframes pushReleaseToTop { + 30% { transform: translateY(100px) } + to { transform: translateY(-100%) } +} +.pushReleaseToBottom { animation-name: pushReleaseToBottom } +@keyframes pushReleaseToBottom { + 30% { transform: translateY(-100px) } + to { transform: translateY(100%) } +} + +/*-------------------------------------------------------------- + Flip X +--------------------------------------------------------------*/ +.flipX { animation-name: flipX } +@keyframes flipX { + 40% { + transform: perspective(600px) rotateX(-180deg); + animation-timing-function: ease-out; + } + 80% { + transform: perspective(600px) rotateX(0deg); + animation-timing-function: ease-out; + } +} +.flipXZoomIn { animation-name: flipXZoomIn } +@keyframes flipXZoomIn { + 40% { + transform: perspective(600px) rotateX(-180deg) scale(1.8); + animation-timing-function: ease-out; + } + 80% { + transform: perspective(600px) rotateX(0deg) scale(.8); + animation-timing-function: ease-out; + } + 95%, to { + transform: perspective(600px); + animation-timing-function: ease-in; + } +} +.flipXZoomOut { animation-name: flipXZoomOut } +@keyframes flipXZoomOut { + 40% { + transform: perspective(600px) rotateX(-180deg) scale(.8); + animation-timing-function: ease-out; + } + 80% { + transform: perspective(600px) rotateX(0deg) scale(1.8); + animation-timing-function: ease-out; + } + 95%, to { + transform: perspective(600px); + animation-timing-function: ease-in; + } +} + +/*-------------------------------------------------------------- + Flip Y +--------------------------------------------------------------*/ +.flipY { animation-name: flipY } +@keyframes flipY { + 40% { + transform: perspective(600px) rotateY(-180deg); + animation-timing-function: ease-out; + } + 80% { + transform: perspective(600px) rotateY(0deg); + animation-timing-function: ease-out; + } +} +.flipYZoomIn { animation-name: flipYZoomIn } +@keyframes flipYZoomIn { + 40% { + transform: perspective(600px) rotateY(-180deg) scale(1.8); + animation-timing-function: ease-out; + } + 80% { + transform: perspective(600px) rotateY(0deg) scale(.8); + animation-timing-function: ease-out; + } + 95%, to { + transform: perspective(600px); + animation-timing-function: ease-in; + } +} +.flipYZoomOut { animation-name: flipYZoomOut } +@keyframes flipYZoomOut { + 40% { + transform: perspective(600px) rotateY(-180deg) scale(.8); + animation-timing-function: ease-out; + } + 80% { + transform: perspective(600px) rotateY(0deg) scale(1.8); + animation-timing-function: ease-out; + } + 95%, to { + transform: perspective(600px); + animation-timing-function: ease-in; + } +} + +/*-------------------------------------------------------------- + Skew +--------------------------------------------------------------*/ +.skewLeft { animation-name: skewLeft } +@keyframes skewLeft { + 70% { transform: skewX(30deg) } +} +.skewRight { animation-name: skewRight } +@keyframes skewRight { + 70% { transform: skewX(-30deg) } +} +.skewInLeft { animation-name: skewInLeft } +@keyframes skewInLeft { + from { transform: translateX(-100%) skewX(-40deg) } + 70% { transform: skewX(-30deg) } +} +.skewInRight { animation-name: skewInRight } +@keyframes skewInRight { + from { transform: translateX(100%) skewX(40deg) } + 70% { transform: skewX(30deg) } +} +.skewOutLeft { animation-name: skewOutLeft } +@keyframes skewOutLeft { + 50% { transform: skewX(40deg) } + to { transform: translateX(-100%) skewX(30deg) } + +} +.skewOutRight { animation-name: skewOutRight } +@keyframes skewOutRight { + 50% { transform: skewX(-40deg) } + to { transform: translateX(100%) skewX(-30deg) } +} + +/*-------------------------------------------------------------- + Shock In +--------------------------------------------------------------*/ +.shockZoom { animation-name: shockZoom } +@keyframes shockZoom { + from { transform: matrix(5, 0, 0, 5, 0, 0) } + 35% { transform: matrix(2, 0, 0, 2, 0, 0) } + 43% { transform: matrix(1, 0, 0, 1, 0, 0) } +} +.shockInLeft { animation-name: shockInLeft } +@keyframes shockInLeft { + from { transform: matrix(1, 0, 0, 1, -800, 0) } + 35% { transform: matrix(1, 0, 0, 1, 50, 0) } + 43% { transform: matrix(1, 0, 0, 1, 0, 0) } +} +.shockInRight { animation-name: shockInRight } +@keyframes shockInRight { + from { transform: matrix(1, 0, 0, 1, 800, 0) } + 35% { transform: matrix(1, 0, 0, 1, -50, 0) } + 43% { transform: matrix(1, 0, 0, 1, 0, 0) } +} +.shockInTop { animation-name: shockInTop } +@keyframes shockInTop { + from { transform: matrix(1, 0, 0, 1, 0, -400) } + 35% { transform: matrix(1, 0, 0, 1, 0, 50) } + 43% { transform: matrix(1, 0, 0, 1, 0, 0) } +} +.shockInBottom { animation-name: shockInBottom } +@keyframes shockInBottom { + from { transform: matrix(1, 0, 0, 1, 0, 400) } + 35% { transform: matrix(1, 0, 0, 1, 0, -50) } + 43% { transform: matrix(1, 0, 0, 1, 0, 0) } +} + +/*-------------------------------------------------------------- + Pull release +--------------------------------------------------------------*/ +.pullReleaseIn { animation-name: pullReleaseIn } +@keyframes pullReleaseIn { + 15% { transform: scale(1.5) } +} +.pullReleaseOut { animation-name: pullReleaseOut } +@keyframes pullReleaseOut { + 15% { transform: scale(.5) } +} + +/*-------------------------------------------------------------- + Swing In +--------------------------------------------------------------*/ +.swingInLeft { animation-name: swingInLeft } +@keyframes swingInLeft { + from { + transform: matrix(3, 0, 0, 3, -800, 0); + animation-timing-function: ease-out; + } + 50% { transform: matrix(1.3, 0, 0, 1.3, 20, 0) } +} +.swingInRight { animation-name: swingInRight } +@keyframes swingInRight { + from { + transform: matrix(3, 0, 0, 3, 800, 0); + animation-timing-function: ease-out; + } + 50% { transform: matrix(1.3, 0, 0, 1.3, -20, 0) } +} +.swingInTop { animation-name: swingInTop } +@keyframes swingInTop { + from { + transform: matrix(3, 0, 0, 3, 0, -800); + animation-timing-function: ease-out; + } + 50% { transform: matrix(1.3, 0, 0, 1.3, 0, 20) } +} +.swingInBottom { animation-name: swingInBottom } +@keyframes swingInBottom { + from { + transform: matrix(3, 0, 0, 3, 0, 800); + animation-timing-function: ease-out; + } + 50% { transform: matrix(1.3, 0, 0, 1.3, 0, -20) } +} + +/*-------------------------------------------------------------- + Elevate +--------------------------------------------------------------*/ +.elevateLeft { animation-name: elevateLeft } +@keyframes elevateLeft { + from { + transform: translateY(100%) rotate(-20deg); + transform-origin: right; + } + 40% { + transform: rotate(20deg); + transform-origin: right; + } + 65% { + transform: rotate(0deg); + transform-origin: right; + } +} +.elevateRight { animation-name: elevateRight } +@keyframes elevateRight { + from { + transform: translateY(100%) rotate(20deg); + transform-origin: left; + } + 40% { + transform: rotate(-20deg); + transform-origin: left; + } + 65% { + transform: rotate(0deg); + transform-origin: left; + } +} + +/*-------------------------------------------------------------- + Roll From +--------------------------------------------------------------*/ +.rollFromLeft { animation-name: rollFromLeft } +@keyframes rollFromLeft { + from { + transform: translateX(-100%) perspective(600px) rotateY(180deg); + opacity: 0 + } +} +.rollFromRight { animation-name: rollFromRight } +@keyframes rollFromRight { + from { + transform: translateX(100%) perspective(600px) rotateY(-180deg); + opacity: 0 + } +} +.rollFromTop { animation-name: rollFromTop } +@keyframes rollFromTop { + from { + transform: translateY(-100%) perspective(600px) rotateX(180deg); + opacity: 0 + } +} +.rollFromBottom { animation-name: rollFromBottom } +@keyframes rollFromBottom { + from { + transform: translateY(100%) perspective(600px) rotateX(-180deg); + opacity: 0 + } +} + +/*-------------------------------------------------------------- + Roll To +--------------------------------------------------------------*/ +.rollToLeft { animation-name: rollToLeft } +@keyframes rollToLeft { + to { + transform: translateX(-100%) perspective(600px) rotateY(180deg); + opacity: 0 + } +} +.rollToRight { animation-name: rollToRight } +@keyframes rollToRight { + to { + transform: translateX(100%) perspective(600px) rotateY(-180deg); + opacity: 0 + } +} +.rollToTop { animation-name: rollToTop } +@keyframes rollToTop { + to { + transform: translateY(-100%) perspective(600px) rotateX(180deg); + opacity: 0 + } +} +.rollToBottom { animation-name: rollToBottom } +@keyframes rollToBottom { + to { + transform: translateY(100%) perspective(600px) rotateX(-180deg); + opacity: 0 + } +} + +/*-------------------------------------------------------------- + Rotation +--------------------------------------------------------------*/ +.rotate { animation-name: rotate; animation-timing-function: linear; } +@keyframes rotate { + 50% { transform: rotate(-180deg) } + to { transform: rotate(0deg) } +} +.rotateX { animation-name: rotateX } +@keyframes rotateX { + to { transform: perspective(600px) rotateX(90deg) } +} +.rotateXIn { animation-name: rotateXIn } +@keyframes rotateXIn { + from { + transform: perspective(600px) translate3d(0, -60px, -2000px) rotateX(75deg); + opacity: 0; + } + 5% { transform: perspective(600px) translate3d(0, -60px, -1500px) rotateX(75deg) } +} +.rotateXOut { animation-name: rotateXOut } +@keyframes rotateXOut { + 95% { transform: perspective(600px) translate3d(0, -60px, -1500px) rotateX(75deg) } + to { + transform: perspective(600px) translate3d(0, -60px, -2000px) rotateX(75deg); + opacity: 0; + } +} +.rotateY { animation-name: rotateY } +@keyframes rotateY { + to { transform: perspective(600px) rotateY(90deg) } +} +.rotateYIn { animation-name: rotateYIn } +@keyframes rotateYIn { + from { + transform: perspective(600px) translate3d(0, -60px, -2000px) rotateY(75deg); + opacity: 0; + } + 5% { transform: perspective(600px) translate3d(0, -60px, -1500px) rotateY(75deg); } +} +.rotateYOut { animation-name: rotateYOut } +@keyframes rotateYOut { + 95% { transform: perspective(600px) translate3d(0, -60px, -1500px) rotateY(75deg) } + to { + transform: perspective(600px) translate3d(0, -60px, -2000px) rotateY(75deg); + opacity: 0; + } +} + +/*-------------------------------------------------------------- + Rotate In +--------------------------------------------------------------*/ +.rotateInLeft { animation-name: rotateInLeft } +@keyframes rotateInLeft { + from { transform: translateX(-100%) rotate(0deg) } + to { transform: translateX(0px) rotate(360deg) } +} +.rotateInRight { animation-name: rotateInRight } +@keyframes rotateInRight { + from { transform: translateX(100%) rotate(0deg) } + to { transform: translateX(0px) rotate(-360deg) } +} +.rotateInTop { animation-name: rotateInTop } +@keyframes rotateInTop { + from { transform: translateY(-400%) rotate(0deg) } + to { transform: translateX(0px) rotate(360deg) } +} +.rotateInBottom { animation-name: rotateInBottom } +@keyframes rotateInBottom { + from { transform: translateY(400%) rotate(0deg) } + to { transform: translateX(0px) rotate(360deg) } +} + +/*-------------------------------------------------------------- + Rotate Out +--------------------------------------------------------------*/ +.rotateOutLeft { animation-name: rotateOutLeft } +@keyframes rotateOutLeft { + from { transform: translateX(0px) rotate(360deg) } + to { transform: translateX(-100%) rotate(0deg) } +} +.rotateOutRight { animation-name: rotateOutRight } +@keyframes rotateOutRight { + from { transform: translateX(0px) rotate(-360deg) } + to { transform: translateX(100%) rotate(0deg) } +} +.rotateOutTop { animation-name: rotateOutTop } +@keyframes rotateOutTop { + from { transform: translateX(0px) rotate(360deg) } + to { transform: translateY(-400%) rotate(0deg) } +} +.rotateOutBottom { animation-name: rotateOutBottom } +@keyframes rotateOutBottom { + from { transform: translateX(0px) rotate(360deg) } + to { transform: translateY(400%) rotate(0deg) } +} + +/*-------------------------------------------------------------- + Spin To +--------------------------------------------------------------*/ +.spinToLeft { animation-name: spinToLeft } +@keyframes spinToLeft { + from, to { transform-origin: left bottom } + from { + transform: rotate(90deg); + opacity: 0; + } +} +.spinToRight { animation-name: spinToRight } +@keyframes spinToRight { + from, to { transform-origin: right bottom } + from { + transform: rotate(-90deg); + opacity: 0; + } +} +.spinToTop { animation-name: spinToTop } +@keyframes spinToTop { + from, to { transform-origin: left bottom } + from { + transform: rotate(-90deg); + opacity: 0; + } +} +.spinToBottom { animation-name: spinToBottom } +@keyframes spinToBottom { + from, to { transform-origin: right bottom } + from { + transform: rotate(90deg); + opacity: 0; + } +} + +/*-------------------------------------------------------------- + Spin From +--------------------------------------------------------------*/ +.spinFromLeft { animation-name: spinFromLeft } +@keyframes spinFromLeft { + from, to { transform-origin: left bottom } + to { + transform: rotate(90deg); + opacity: 0; + } +} +.spinFromRight { animation-name: spinFromRight } +@keyframes spinFromRight { + from, to { transform-origin: right bottom } + to { + transform: rotate(-90deg); + opacity: 0; + } +} +.spinFromTop { animation-name: spinFromTop } +@keyframes spinFromTop { + from, to { transform-origin: left bottom } + to { + transform: rotate(-90deg); + opacity: 0; + } +} +.spinFromBottom { animation-name: spinFromBottom } +@keyframes spinFromBottom { + from, to { transform-origin: right bottom } + to { + transform: rotate(90deg); + opacity: 0; + } +} + +/*-------------------------------------------------------------- + Blur In +--------------------------------------------------------------*/ +.blurIn { animation-name: blurIn } +@keyframes blurIn { + to { + text-shadow: 0 0 10px rgba(167, 81, 203, 0.6), 0 0 30px rgba(167, 81, 203, 0.4), 0 0 50px rgba(167, 81, 203, 0.3), 0 0 180px rgba(167, 81, 203, 0.3); + color: transparent; + } +} +.blurInLeft { animation-name: blurInLeft } +@keyframes blurInLeft { + from { + transform: translateX(100%); + text-shadow: none; + } + + to { + text-shadow: 0 0 10px rgba(167, 81, 203, 0.6), 0 0 30px rgba(167, 81, 203, 0.4), 0 0 50px rgba(167, 81, 203, 0.3), 0 0 180px rgba(167, 81, 203, 0.3); + color: transparent; + } +} +.blurInRight { animation-name: blurInRight } +@keyframes blurInRight { + from { + transform: translateX(-100%); + text-shadow: none; + } + + to { + text-shadow: 0 0 10px rgba(167, 81, 203, 0.6), 0 0 30px rgba(167, 81, 203, 0.4), 0 0 50px rgba(167, 81, 203, 0.3), 0 0 180px rgba(167, 81, 203, 0.3); + color: transparent; + } +} +.blurInTop { animation-name: blurInTop } +@keyframes blurInTop { + from { + transform: translateY(100%); + text-shadow: none; + } + to { + text-shadow: 0 0 10px rgba(167, 81, 203, 0.6), 0 0 30px rgba(167, 81, 203, 0.4), 0 0 50px rgba(167, 81, 203, 0.3), 0 0 180px rgba(167, 81, 203, 0.3); + color: transparent; + } +} +.blurInBottom { animation-name: blurInBottom } +@keyframes blurInBottom { + from { + transform: translateY(-100%); + text-shadow: none; + } + to { + text-shadow: 0 0 10px rgba(167, 81, 203, 0.6), 0 0 30px rgba(167, 81, 203, 0.4), 0 0 50px rgba(167, 81, 203, 0.3), 0 0 180px rgba(167, 81, 203, 0.3); + color: transparent; + } +} +/*-------------------------------------------------------------- + Blur Out +--------------------------------------------------------------*/ +.blurOut { animation-name: blurOut } +@keyframes blurOut { + from { + text-shadow: 0 0 10px rgba(167, 81, 203, 0.6), 0 0 30px rgba(167, 81, 203, 0.4), 0 0 50px rgba(167, 81, 203, 0.3), 0 0 180px rgba(167, 81, 203, 0.3); + color: transparent; + } +} +.blurOutLeft { animation-name: blurOutLeft } +@keyframes blurOutLeft { + from { + text-shadow: 0 0 10px rgba(167, 81, 203, 0.6), 0 0 30px rgba(167, 81, 203, 0.4), 0 0 50px rgba(167, 81, 203, 0.3), 0 0 180px rgba(167, 81, 203, 0.3); + color: transparent; + } + to { + transform: translateX(100%); + text-shadow: none; + } +} +.blurOutRight { animation-name: blurOutRight } +@keyframes blurOutRight { + from { + text-shadow: 0 0 10px rgba(167, 81, 203, 0.6), 0 0 30px rgba(167, 81, 203, 0.4), 0 0 50px rgba(167, 81, 203, 0.3), 0 0 180px rgba(167, 81, 203, 0.3); + color: transparent; + } + to { + transform: translateX(-100%); + text-shadow: none; + } +} +.blurOutTop { animation-name: blurOutTop } +@keyframes blurOutTop { + from { + text-shadow: 0 0 10px rgba(167, 81, 203, 0.6), 0 0 30px rgba(167, 81, 203, 0.4), 0 0 50px rgba(167, 81, 203, 0.3), 0 0 180px rgba(167, 81, 203, 0.3); + color: transparent; + } + to { + transform: translateY(100%); + text-shadow: none; + } +} +.blurOutBottom { animation-name: blurOutBottom } +@keyframes blurOutBottom { + from { + text-shadow: 0 0 10px rgba(167, 81, 203, 0.6), 0 0 30px rgba(167, 81, 203, 0.4), 0 0 50px rgba(167, 81, 203, 0.3), 0 0 180px rgba(167, 81, 203, 0.3); + color: transparent; + } + to { + transform: translateY(-100%); + text-shadow: none; + } +} + +/*-------------------------------------------------------------- + Bounce +--------------------------------------------------------------*/ +.bounceFromTop { animation-name: bounceFromTop } +@keyframes bounceFromTop { + 0%, 25%, 55%, 85%, 100% { + animation-timing-function: ease-out; + transform: translate3d(0, 0, 0); + } + 41%, 44% { + animation-timing-function: ease-in; + transform: translate3d(0, -80px, 0) scale3d(1, 1.2, 1); + } + 70% { + animation-timing-function: ease-in; + transform: translate3d(0, -20px, 0); + } + 90% { transform: translate3d(0, -4px, 0) } +} +.bounceFromDown { animation-name: bounceFromDown } +@keyframes bounceFromDown { + 0%, 25%, 55%, 85%, 100% { + animation-timing-function: ease-out; + transform: translate3d(0, 0, 0); + } + 41%, 44% { + animation-timing-function: ease-in; + transform: translate3d(0, 80px, 0) scale3d(1, 1.2, 1); + } + 70% { + animation-timing-function: ease-in; + transform: translate3d(0, 20px, 0); + } + 90% { transform: translate3d(0, 4px, 0) } +} +.bounceX { animation-name: bounceX } +@keyframes bounceX { + 0%, 25%, 55%, 85%, 100% { + animation-timing-function: ease-out; + transform: scale3d(1, 1, 1); + } + 41%, 44% { + animation-timing-function: ease-in; + transform: scale3d(1.8, 1, 1); + } + 70% { + animation-timing-function: ease-in; + transform: scale3d(1.5, 1, 1); + } + 90% { transform: scale3d(1.1, 1, 1) } +} +.bounceY { animation-name: bounceY } +@keyframes bounceY { + 0%, 25%, 55%, 85%, 100% { + animation-timing-function: ease-out; + transform: scale3d(1, 1, 1); + } + 41%, 44% { + animation-timing-function: ease-in; + transform: scale3d(1, 2, 1); + } + 70% { + animation-timing-function: ease-in; + transform: scale3d(1, 1.5, 1); + } + 90% { transform: scale3d(1, 1.1, 1) } +} +.bounceZoomIn { animation-name: bounceZoomIn } +@keyframes bounceZoomIn { + 0%, 25%, 55%, 85%, 100% { + animation-timing-function: ease-out; + transform: scale(1); + } + 41%, 44% { + animation-timing-function: ease-in; + transform: scale(1.5); + } + 70% { + animation-timing-function: ease-in; + transform: scale(1.3); + } + 90% { transform: scale(1.1) } +} +.bounceZoomOut { animation-name: bounceZoomOut } +@keyframes bounceZoomOut { + 0%, 25%, 55%, 85%, 100% { + animation-timing-function: ease-out; + transform: scale(1); + } + 41%, 44% { + animation-timing-function: ease-in; + transform: scale(.3); + } + 70% { + animation-timing-function: ease-in; + transform: scale(.5); + } + 90% { transform: scale(.9) } +} + +/*-------------------------------------------------------------- + Bounce In +--------------------------------------------------------------*/ +.bounceInTop { animation-name: bounceInTop } +@keyframes bounceInTop { + 0% { transform: translate3d(0, -300%, 0) } + 58% { transform: translate3d(0, 27px, 0) } + 73% { transform: translate3d(0, -12px, 0) } + 88% { transform: translate3d(0, 7px, 0) } +} +.bounceInBottom { animation-name: bounceInBottom } +@keyframes bounceInBottom { + 0% { transform: translate3d(0, 300%, 0) } + 58% { transform: translate3d(0, -27px, 0) } + 73% { transform: translate3d(0, 12px, 0) } + 88% { transform: translate3d(0, -8px, 0) } +} +.bounceInLeft { animation-name: bounceInLeft } +@keyframes bounceInLeft { + 0% { transform: translate3d(-300%, 0, 0) } + 58% { transform: translate3d(27px, 0, 0) } + 73% { transform: translate3d(-12px, 0, 0) } + 88% { transform: translate3d(8px, 0, 0) } +} +.bounceInRight { animation-name: bounceInRight } +@keyframes bounceInRight { + 0% { transform: translate3d(300%, 0, 0) } + 58% { transform: translate3d(-27px, 0, 0) } + 73% { transform: translate3d(12px, 0, 0) } + 88% { transform: translate3d(-8px, 0, 0) } +} +/*-------------------------------------------------------------- + Bounce Out +--------------------------------------------------------------*/ +.bounceOutTop { animation-name: bounceOutTop } +@keyframes bounceOutTop { + 18% { transform: translate3d(0, 27px, 0) } + 33% { transform: translate3d(0, -12px, 0) } + 48% { transform: translate3d(0, 8px, 0) } + 100% { transform: translate3d(0, -300%, 0) } +} +.bounceOutBottom { animation-name: bounceOutBottom } +@keyframes bounceOutBottom { + 18% { transform: translate3d(0, -27px, 0) } + 33% { transform: translate3d(0, 12px, 0) } + 48% { transform: translate3d(0, -8px, 0) } + 100% { transform: translate3d(0, 300%, 0) } +} +.bounceOutLeft { animation-name: bounceOutLeft } +@keyframes bounceOutLeft { + 18% { transform: translate3d(27px, 0, 0) } + 33% { transform: translate3d(-12px, 0, 0) } + 48% { transform: translate3d(8px, 0, 0) } + 100% { transform: translate3d(-300%, 0, 0) } +} +.bounceOutRight { animation-name: bounceOutRight } +@keyframes bounceOutRight { + 18% { transform: translate3d(-27px, 0, 0) } + 33% { transform: translate3d(12px, 0, 0) } + 48% { transform: translate3d(-8px, 0, 0) } + 100% { transform: translate3d(300%, 0, 0) } +} + +/*-------------------------------------------------------------- + Perspective +--------------------------------------------------------------*/ +.perspectiveToTop { animation-name: perspectiveToTop; transform: perspective(500px); transform-style: preserve-3d } +@keyframes perspectiveToTop { + 50% { opacity: 1;} + to { + transform: perspective(500px) rotateX(90deg) translateY(-50px) translateZ(50px); + opacity: 0; + } +} +.perspectiveToBottom { animation-name: perspectiveToBottom; transform: perspective(500px); transform-style: preserve-3d } +@keyframes perspectiveToBottom { + 50% { opacity: 1;} + to { + transform: perspective(500px) rotateX(90deg) translateY(50px) translateZ(-50px); + opacity: 0; + } +} + +/*-------------------------------------------------------------- + Zoom In +--------------------------------------------------------------*/ +.zoomIn { animation-name: zoomIn } +@keyframes zoomIn { + from { + transform: scale(10); + opacity: 0; + } +} +.zoomInLeft { animation-name: zoomInLeft } +@keyframes zoomInLeft { + from { + transform: scale(10) translateX(-50%); + opacity: 0; + } +} +.zoomInRight { animation-name: zoomInRight } +@keyframes zoomInRight { + from { + transform: scale(10) translateX(50%); + opacity: 0; + } +} +.zoomInTop { animation-name: zoomInTop } +@keyframes zoomInTop { + from { + transform: scale(10) translateY(-50%); + opacity: 0; + } +} +.zoomInBottom { animation-name: zoomInBottom } +@keyframes zoomInBottom { + from { + transform: scale(10) translateY(50%); + opacity: 0; + } +} + +/*-------------------------------------------------------------- + Zoom Out +--------------------------------------------------------------*/ +.zoomOut { animation-name: zoomOut } +@keyframes zoomOut { + to { + transform: scale(10); + opacity: 0; + } +} +.zoomOutLeft { animation-name: zoomOutLeft } +@keyframes zoomOutLeft { + to { + transform: scale(10) translateX(-50%); + opacity: 0; + } +} +.zoomOutRight { animation-name: zoomOutRight } +@keyframes zoomOutRight { + to { + transform: scale(10) translateX(50%); + opacity: 0; + } +} +.zoomOutTop { animation-name: zoomOutTop } +@keyframes zoomOutTop { + to { + transform: scale(10) translateY(-50%); + opacity: 0; + } +} +.zoomOutBottom { animation-name: zoomOutBottom } +@keyframes zoomOutBottom { + to { + transform: scale(10) translateY(50%); + opacity: 0; + } +} + +/*-------------------------------------------------------------- + Dance +--------------------------------------------------------------*/ +.danceTop { animation-name: danceTop; transform-origin: top } +@keyframes danceTop { + 16% { transform: skew(-14deg) } + 33% { transform: skew(12deg) } + 49% { transform: skew(-8deg) } + 66% { transform: skew(6deg) } + 83% { transform: skew(-4deg) } +} + +.danceMiddle { animation-name: danceMiddle } +@keyframes danceMiddle { + 16% { transform: skew(-14deg) } + 33% { transform: skew(12deg) } + 49% { transform: skew(-8deg) } + 66% { transform: skew(6deg) } + 83% { transform: skew(-4deg) } +} + +.danceBottom { animation-name: danceBottom; transform-origin: bottom } +@keyframes danceBottom { + 16% { transform: skew(-14deg) } + 33% { transform: skew(12deg) } + 49% { transform: skew(-8deg) } + 66% { transform: skew(6deg) } + 83% { transform: skew(-4deg) } +} diff --git a/cssanimation.min.css b/cssanimation.min.css new file mode 100644 index 0000000..fd61410 --- /dev/null +++ b/cssanimation.min.css @@ -0,0 +1,14 @@ +/* +Written by : Pavel +Contribute by: Amzad Hossain & Miraz Hossain +Find me at: https://bd.linkedin.com/in/bdpavel +Email: hello@cssanimation.io +Released: 2016 +Current Version: 1.0.1 +Amount of Animation: 260 +Description: "cssanimation.io - A CSS Animation Library for Developers and Ninjas" +Library Size: 149 kB +Copyright (c) 2016 cssanimation.io +License: cssanimattion is licensed under the MIT license. (https://opensource.org/licenses/MIT) +*/ +.duration{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}.duration span{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both;display:inline-block}.open,.typing,.wipe{overflow:hidden;display:inherit}.infinite{-webkit-animation-iteration-count:infinite!important;animation-iteration-count:infinite!important}.hu___hu___{-webkit-animation-name:hu___hu__;animation-name:hu___hu__;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-duration:2s;animation-duration:2s;-webkit-animation-timing-function:linear;animation-timing-function:linear}.rainDrop span,.snake span{-webkit-animation-iteration-count:infinite}@-webkit-keyframes hu___hu__{from,to{-webkit-transform:translateY(30px);transform:translateY(30px)}50%{-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes hu___hu__{from,to{-webkit-transform:translateY(30px);transform:translateY(30px)}50%{-webkit-transform:translateY(0);transform:translateY(0)}}.snake span{-webkit-animation-name:snake;animation-name:snake;animation-iteration-count:infinite;-webkit-animation-duration:1.5s;animation-duration:1.5s}@-webkit-keyframes snake{from,to{-webkit-transform:translateY(0);transform:translateY(0)}50%{-webkit-transform:translateY(30px);transform:translateY(30px)}}@keyframes snake{from,to{-webkit-transform:translateY(0);transform:translateY(0)}50%{-webkit-transform:translateY(30px);transform:translateY(30px)}}.effect3d{-webkit-animation-name:effect3d;animation-name:effect3d}@-webkit-keyframes effect3d{to{text-shadow:0 1px 0 #ccc,0 2px 0 #c9c9c9,0 3px 0 #bbb,0 4px 0 #b9b9b9,0 5px 0 #aaa,0 6px 1px rgba(0,0,0,.1),0 0 5px rgba(0,0,0,.1),0 1px 3px rgba(0,0,0,.3),0 3px 5px rgba(0,0,0,.2),0 5px 10px rgba(0,0,0,.25),0 10px 10px rgba(0,0,0,.2),0 20px 20px rgba(0,0,0,.15)}}@keyframes effect3d{to{text-shadow:0 1px 0 #ccc,0 2px 0 #c9c9c9,0 3px 0 #bbb,0 4px 0 #b9b9b9,0 5px 0 #aaa,0 6px 1px rgba(0,0,0,.1),0 0 5px rgba(0,0,0,.1),0 1px 3px rgba(0,0,0,.3),0 3px 5px rgba(0,0,0,.2),0 5px 10px rgba(0,0,0,.25),0 10px 10px rgba(0,0,0,.2),0 20px 20px rgba(0,0,0,.15)}}.rainDrop span{-webkit-animation-name:rainDrop;animation-name:rainDrop;animation-iteration-count:infinite}@-webkit-keyframes rainDrop{0%,100%,25%,55%,75%,87%,97%{-webkit-transform:scaleX(1);transform:scaleX(1)}26%,56%,76%{-webkit-transform:scaleX(1.3) scaleY(.8);transform:scaleX(1.3) scaleY(.8)}31%,61%,81%{-webkit-transform:scaleX(.8) scaleY(1.2);transform:scaleX(.8) scaleY(1.2)}76%,88%{-webkit-transform:scaleX(1.2);transform:scaleX(1.2)}98%{-webkit-transform:scaleX(1.1);transform:scaleX(1.1)}}@keyframes rainDrop{0%,100%,25%,55%,75%,87%,97%{-webkit-transform:scaleX(1);transform:scaleX(1)}26%,56%,76%{-webkit-transform:scaleX(1.3) scaleY(.8);transform:scaleX(1.3) scaleY(.8)}31%,61%,81%{-webkit-transform:scaleX(.8) scaleY(1.2);transform:scaleX(.8) scaleY(1.2)}76%,88%{-webkit-transform:scaleX(1.2);transform:scaleX(1.2)}98%{-webkit-transform:scaleX(1.1);transform:scaleX(1.1)}}.pepe{-webkit-animation-name:pepe;animation-name:pepe;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}@-webkit-keyframes pepe{33%,66%,from,to{-webkit-transform:rotate(4deg);transform:rotate(4deg)}16%,50%,83%{-webkit-transform:rotate(-4deg);transform:rotate(-4deg)}}@keyframes pepe{33%,66%,from,to{-webkit-transform:rotate(4deg);transform:rotate(4deg)}16%,50%,83%{-webkit-transform:rotate(-4deg);transform:rotate(-4deg)}}.waterWave span{-webkit-animation:waterWave .2s linear infinite;animation:waterWave .2s linear infinite}.electricity,.lightning{-webkit-animation-iteration-count:infinite}@-webkit-keyframes waterWave{50%{-webkit-transform:skewY(1deg) skewX(-1deg) scale(1.06);transform:skewY(1deg) skewX(-1deg) scale(1.06)}}@keyframes waterWave{50%{-webkit-transform:skewY(1deg) skewX(-1deg) scale(1.06);transform:skewY(1deg) skewX(-1deg) scale(1.06)}}.lightning{-webkit-animation-name:lightning;animation-name:lightning;animation-iteration-count:infinite}@-webkit-keyframes lightning{40%,80%,from,to{opacity:1}20%,60%{opacity:0}}@keyframes lightning{40%,80%,from,to{opacity:1}20%,60%{opacity:0}}.joltZoom span{-webkit-animation-name:joltZoom;animation-name:joltZoom}@-webkit-keyframes joltZoom{10%{font-size:140%}40%{font-size:80%;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}100%{font-size:100%}}@keyframes joltZoom{10%{font-size:140%}40%{font-size:80%;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}100%{font-size:100%}}.typing{width:568px;border-right:2px solid #7E2EA0;-webkit-animation:typing 2s steps(11,end),blink-caret .25s steps(11,end) infinite;animation:typing 2s steps(11,end),blink-caret .25s steps(11,end) infinite}@-webkit-keyframes typing{from{width:0}}@keyframes typing{from{width:0}}@-webkit-keyframes blink-caret{50%{border-color:transparent}}@keyframes blink-caret{50%{border-color:transparent}}.electricity{-webkit-animation-name:electricity;animation-name:electricity;animation-iteration-count:infinite}.SkateX span,.leBeat span{-webkit-animation-iteration-count:infinite}@-webkit-keyframes electricity{37%,48%,67%,72%,80%,85%,93%,96%,from{-webkit-transform:translateY(30px);transform:translateY(30px)}12%,20%,28%,4%,52%,56%,60%,64%,88%{-webkit-transform:translateY(10px);transform:translateY(10px)}16%,24%,32%,40%,44%,8%{-webkit-transform:translateY(5px);transform:translateY(5px)}76%,to{-webkit-transform:translateY(40px);transform:translateY(40px)}}@keyframes electricity{37%,48%,67%,72%,80%,85%,93%,96%,from{-webkit-transform:translateY(30px);transform:translateY(30px)}12%,20%,28%,4%,52%,56%,60%,64%,88%{-webkit-transform:translateY(10px);transform:translateY(10px)}16%,24%,32%,40%,44%,8%{-webkit-transform:translateY(5px);transform:translateY(5px)}76%,to{-webkit-transform:translateY(40px);transform:translateY(40px)}}.wipe{width:566px;-webkit-animation-name:wipe;animation-name:wipe}@-webkit-keyframes wipe{to{width:0}}@keyframes wipe{to{width:0}}.open{width:566px;-webkit-animation-name:open;animation-name:open}@-webkit-keyframes open{from{width:0}}@keyframes open{from{width:0}}.shapeRise span{-webkit-animation-name:shapeRise;animation-name:shapeRise}@-webkit-keyframes shapeRise{50%{-webkit-transform:scale(1.8);transform:scale(1.8);letter-spacing:26px}}@keyframes shapeRise{50%{-webkit-transform:scale(1.8);transform:scale(1.8);letter-spacing:26px}}.leBeat span{-webkit-animation-name:leBeat;animation-name:leBeat;animation-iteration-count:infinite}@-webkit-keyframes leBeat{14%,42%{-webkit-transform:scale(1.3);transform:scale(1.3)}28%,70%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes leBeat{14%,42%{-webkit-transform:scale(1.3);transform:scale(1.3)}28%,70%{-webkit-transform:scale(1);transform:scale(1)}}.leFadeIn span{-webkit-animation-name:leFadeIn;animation-name:leFadeIn}@-webkit-keyframes leFadeIn{from{opacity:0}to{opacity:1}}@keyframes leFadeIn{from{opacity:0}to{opacity:1}}.leFadeInLeft span{-webkit-animation-name:leFadeInLeft;animation-name:leFadeInLeft}@-webkit-keyframes leFadeInLeft{from{opacity:0;-webkit-transform:translateX(-60px);transform:translateX(-60px)}to{opacity:1}}@keyframes leFadeInLeft{from{opacity:0;-webkit-transform:translateX(-60px);transform:translateX(-60px)}to{opacity:1}}.leFadeInRight span{-webkit-animation-name:leFadeInRight;animation-name:leFadeInRight}@-webkit-keyframes leFadeInRight{from{opacity:0;-webkit-transform:translateX(60px);transform:translateX(60px)}to{opacity:1}}@keyframes leFadeInRight{from{opacity:0;-webkit-transform:translateX(60px);transform:translateX(60px)}to{opacity:1}}.leFadeInTop span{-webkit-animation-name:leFadeInTop;animation-name:leFadeInTop}@-webkit-keyframes leFadeInTop{from{opacity:0;-webkit-transform:translateY(-100%);transform:translateY(-100%)}to{opacity:1}}@keyframes leFadeInTop{from{opacity:0;-webkit-transform:translateY(-100%);transform:translateY(-100%)}to{opacity:1}}.leFadeInBottom span{-webkit-animation-name:leFadeInBottom;animation-name:leFadeInBottom}@-webkit-keyframes leFadeInBottom{from{opacity:0;-webkit-transform:translateY(100%);transform:translateY(100%)}to{opacity:1}}@keyframes leFadeInBottom{from{opacity:0;-webkit-transform:translateY(100%);transform:translateY(100%)}to{opacity:1}}.leFadeOut span{-webkit-animation-name:leFadeOut;animation-name:leFadeOut}@-webkit-keyframes leFadeOut{to{opacity:0}}@keyframes leFadeOut{to{opacity:0}}.leFadeOutLeft span{-webkit-animation-name:leFadeOutLeft;animation-name:leFadeOutLeft}@-webkit-keyframes leFadeOutLeft{from{opacity:1}to{opacity:0;-webkit-transform:translateX(-60px);transform:translateX(-60px)}}@keyframes leFadeOutLeft{from{opacity:1}to{opacity:0;-webkit-transform:translateX(-60px);transform:translateX(-60px)}}.leFadeOutRight span{-webkit-animation-name:leFadeOutRight;animation-name:leFadeOutRight}@-webkit-keyframes leFadeOutRight{from{opacity:1}to{opacity:0;-webkit-transform:translateX(60px);transform:translateX(60px)}}@keyframes leFadeOutRight{from{opacity:1}to{opacity:0;-webkit-transform:translateX(60px);transform:translateX(60px)}}.leFadeOutTop span{-webkit-animation-name:leFadeOutTop;animation-name:leFadeOutTop}@-webkit-keyframes leFadeOutTop{from{opacity:1}to{opacity:0;-webkit-transform:translateY(-100%);transform:translateY(-100%)}}@keyframes leFadeOutTop{from{opacity:1}to{opacity:0;-webkit-transform:translateY(-100%);transform:translateY(-100%)}}.leFadeOutBottom span{-webkit-animation-name:leFadeOutBottom;animation-name:leFadeOutBottom}@-webkit-keyframes leFadeOutBottom{from{opacity:1}to{opacity:0;-webkit-transform:translateY(100%);transform:translateY(100%)}}@keyframes leFadeOutBottom{from{opacity:1}to{opacity:0;-webkit-transform:translateY(100%);transform:translateY(100%)}}.SkateX span{-webkit-animation-name:scaleX;animation-name:scaleX;animation-iteration-count:infinite}.skateXY span,.skateY span{-webkit-animation-iteration-count:infinite}@-webkit-keyframes scaleX{50%{-webkit-transform:scaleX(.4);transform:scaleX(.4)}}@keyframes scaleX{50%{-webkit-transform:scaleX(.4);transform:scaleX(.4)}}.skateY span{-webkit-animation-name:scaleY;animation-name:scaleY;animation-iteration-count:infinite}@-webkit-keyframes scaleY{50%{-webkit-transform:scaleY(.4);transform:scaleY(.4)}}@keyframes scaleY{50%{-webkit-transform:scaleY(.4);transform:scaleY(.4)}}.skateXY span{-webkit-animation-name:scaleXY;animation-name:scaleXY;animation-iteration-count:infinite;-webkit-animation-duration:1.5s;animation-duration:1.5s}.leJumpBottom span,.leJumpTop span{-webkit-animation-iteration-count:infinite}@-webkit-keyframes scaleXY{25%{-webkit-transform:scale3d(1,.4,0);transform:scale3d(1,.4,0)}50%{-webkit-transform:scale3d(.4,.4,1);transform:scale3d(.4,.4,1)}75%{-webkit-transform:scale3d(.4,1,1);transform:scale3d(.4,1,1)}}@keyframes scaleXY{25%{-webkit-transform:scale3d(1,.4,0);transform:scale3d(1,.4,0)}50%{-webkit-transform:scale3d(.4,.4,1);transform:scale3d(.4,.4,1)}75%{-webkit-transform:scale3d(.4,1,1);transform:scale3d(.4,1,1)}}.scaleXIn span{-webkit-animation-name:scaleXIn;animation-name:scaleXIn}@-webkit-keyframes scaleXIn{from{-webkit-transform:perspective(400px) rotateX(90deg);transform:perspective(400px) rotateX(90deg);opacity:0}50%{opacity:1}}@keyframes scaleXIn{from{-webkit-transform:perspective(400px) rotateX(90deg);transform:perspective(400px) rotateX(90deg);opacity:0}50%{opacity:1}}.scaleXOut span{-webkit-animation-name:ScaleXOut;animation-name:ScaleXOut}@-webkit-keyframes scaleXOut{to{-webkit-transform:perspective(400px) rotateX(90deg);transform:perspective(400px) rotateX(90deg);opacity:0}from{opacity:1}}@keyframes scaleXOut{to{-webkit-transform:perspective(400px) rotateX(90deg);transform:perspective(400px) rotateX(90deg);opacity:0}from{opacity:1}}.scaleYIn span{-webkit-animation-name:ScaleYIn;animation-name:ScaleYIn}@-webkit-keyframes scaleYIn{from{-webkit-transform:perspective(400px) rotateY(90deg);transform:perspective(400px) rotateY(90deg);opacity:0}50%{opacity:1}}@keyframes scaleYIn{from{-webkit-transform:perspective(400px) rotateY(90deg);transform:perspective(400px) rotateY(90deg);opacity:0}50%{opacity:1}}.scaleYOut span{-webkit-animation-name:ScaleYOut;animation-name:ScaleYOut}@-webkit-keyframes scaleYOut{to{-webkit-transform:perspective(400px) rotateY(90deg);transform:perspective(400px) rotateY(90deg);opacity:0}from{opacity:1}}@keyframes scaleYOut{to{-webkit-transform:perspective(400px) rotateY(90deg);transform:perspective(400px) rotateY(90deg);opacity:0}from{opacity:1}}.leJumpTop span{-webkit-animation-name:leJumpTop;animation-name:leJumpTop;animation-iteration-count:infinite}@-webkit-keyframes leJumpTop{to{-webkit-transform:translateY(-20px);transform:translateY(-20px)}}@keyframes leJumpTop{to{-webkit-transform:translateY(-20px);transform:translateY(-20px)}}.leJumpBottom span{-webkit-animation-name:leJumpBottom;animation-name:leJumpBottom;animation-iteration-count:infinite}.leHorizontalShake span,.lePulseShake span{-webkit-animation-iteration-count:infinite}@-webkit-keyframes leJumpBottom{to{-webkit-transform:translateY(20px);transform:translateY(20px)}}@keyframes leJumpBottom{to{-webkit-transform:translateY(20px);transform:translateY(20px)}}.aboundTop span{-webkit-animation-name:aboundTop;animation-name:aboundTop}@-webkit-keyframes aboundTop{50%{-webkit-transform:translateY(-100px);transform:translateY(-100px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}}@keyframes aboundTop{50%{-webkit-transform:translateY(-100px);transform:translateY(-100px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}}.aboundBottom span{-webkit-animation-name:aboundBottom;animation-name:aboundBottom}@-webkit-keyframes aboundBottom{50%{-webkit-transform:translateY(100px);transform:translateY(100px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}}@keyframes aboundBottom{50%{-webkit-transform:translateY(100px);transform:translateY(100px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}}.aboundLeft span{-webkit-animation-name:aboundLeft;animation-name:aboundLeft}@-webkit-keyframes aboundLeft{50%{-webkit-transform:translateX(-100px);transform:translateX(-100px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}}@keyframes aboundLeft{50%{-webkit-transform:translateX(-100px);transform:translateX(-100px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}}.aboundRight span{-webkit-animation-name:aboundRight;animation-name:aboundRight}@-webkit-keyframes aboundRight{50%{-webkit-transform:translateX(100px);transform:translateX(100px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}}@keyframes aboundRight{50%{-webkit-transform:translateX(100px);transform:translateX(100px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}}.flyInTop span{-webkit-animation-name:flyInTop;animation-name:flyInTop}@-webkit-keyframes flyInTop{0%{-webkit-transform:translate(0,-300px);transform:translate(0,-300px)}50%{-webkit-transform:translate(10px,40px);transform:translate(10px,40px)}}@keyframes flyInTop{0%{-webkit-transform:translate(0,-300px);transform:translate(0,-300px)}50%{-webkit-transform:translate(10px,40px);transform:translate(10px,40px)}}.flyInLeft span{-webkit-animation-name:flyInLeft;animation-name:flyInLeft}@-webkit-keyframes flyInLeft{0%{-webkit-transform:translate(-40px,0);transform:translate(-40px,0);opacity:0}50%{-webkit-transform:translate(40px,0);transform:translate(40px,0)}}@keyframes flyInLeft{0%{-webkit-transform:translate(-40px,0);transform:translate(-40px,0);opacity:0}50%{-webkit-transform:translate(40px,0);transform:translate(40px,0)}}.flyInRight span{-webkit-animation-name:flyInRight;animation-name:flyInRight}@-webkit-keyframes flyInRight{0%{-webkit-transform:translate(40px,0);transform:translate(40px,0);opacity:0}50%{-webkit-transform:translate(-40px,0);transform:translate(-40px,0)}}@keyframes flyInRight{0%{-webkit-transform:translate(40px,0);transform:translate(40px,0);opacity:0}50%{-webkit-transform:translate(-40px,0);transform:translate(-40px,0)}}.flyInBottom span{-webkit-animation-name:flyInBottom;animation-name:flyInBottom}@-webkit-keyframes flyInBottom{0%{-webkit-transform:translate(0,300px);transform:translate(0,300px)}50%{-webkit-transform:translate(10px,-40px);transform:translate(10px,-40px)}}@keyframes flyInBottom{0%{-webkit-transform:translate(0,300px);transform:translate(0,300px)}50%{-webkit-transform:translate(10px,-40px);transform:translate(10px,-40px)}}.flyOutTop span{-webkit-animation-name:flyOutTop;animation-name:flyOutTop}@-webkit-keyframes flyOutTop{50%{-webkit-transform:translate(0,40px);transform:translate(0,40px)}to{-webkit-transform:translate(0,-300px);transform:translate(0,-300px)}}@keyframes flyOutTop{50%{-webkit-transform:translate(0,40px);transform:translate(0,40px)}to{-webkit-transform:translate(0,-300px);transform:translate(0,-300px)}}.flyOutLeft span{-webkit-animation-name:flyOutLeft;animation-name:flyOutLeft}@-webkit-keyframes flyOutLeft{50%{-webkit-transform:translate(40px,0);transform:translate(40px,0)}to{-webkit-transform:translate(-1200px,0);transform:translate(-1200px,0)}}@keyframes flyOutLeft{50%{-webkit-transform:translate(40px,0);transform:translate(40px,0)}to{-webkit-transform:translate(-1200px,0);transform:translate(-1200px,0)}}.flyOutRight span{-webkit-animation-name:flyOutRight;animation-name:flyOutRight}@-webkit-keyframes flyOutRight{50%{-webkit-transform:translate(-40px,0);transform:translate(-40px,0)}to{-webkit-transform:translate(1200px,0);transform:translate(1200px,0)}}@keyframes flyOutRight{50%{-webkit-transform:translate(-40px,0);transform:translate(-40px,0)}to{-webkit-transform:translate(1200px,0);transform:translate(1200px,0)}}.flyOutBottom span{-webkit-animation-name:flyOutBottom;animation-name:flyOutBottom}@-webkit-keyframes flyOutBottom{50%{-webkit-transform:translate(0,-40px);transform:translate(0,-40px)}to{-webkit-transform:translate(0,300px);transform:translate(0,300px)}}@keyframes flyOutBottom{50%{-webkit-transform:translate(0,-40px);transform:translate(0,-40px)}to{-webkit-transform:translate(0,300px);transform:translate(0,300px)}}.leDoorCloseLeft span{-webkit-animation-name:leDoorCloseLeft;animation-name:leDoorCloseLeft}@-webkit-keyframes leDoorCloseLeft{from,to{-webkit-transform:perspective(400px);transform:perspective(400px);-webkit-transform-origin:left;transform-origin:left}from{-webkit-transform:rotateY(90deg);transform:rotateY(90deg);opacity:0}to{opacity:1}}@keyframes leDoorCloseLeft{from,to{-webkit-transform:perspective(400px);transform:perspective(400px);-webkit-transform-origin:left;transform-origin:left}from{-webkit-transform:rotateY(90deg);transform:rotateY(90deg);opacity:0}to{opacity:1}}.leDoorOpenRight span{-webkit-animation-name:leDoorOpenRight;animation-name:leDoorOpenRight}@-webkit-keyframes leDoorOpenRight{from,to{-webkit-transform:perspective(400px);transform:perspective(400px);-webkit-transform-origin:left;transform-origin:left}to{-webkit-transform:rotateY(90deg);transform:rotateY(90deg);opacity:0}}@keyframes leDoorOpenRight{from,to{-webkit-transform:perspective(400px);transform:perspective(400px);-webkit-transform-origin:left;transform-origin:left}to{-webkit-transform:rotateY(90deg);transform:rotateY(90deg);opacity:0}}.leDoorCloseRight span{-webkit-animation-name:leDoorCloseRight;animation-name:leDoorCloseRight}@-webkit-keyframes leDoorCloseRight{from,to{-webkit-transform:perspective(400px);transform:perspective(400px);-webkit-transform-origin:right;transform-origin:right}from{-webkit-transform:rotateY(-90deg);transform:rotateY(-90deg);opacity:0}to{opacity:1}}@keyframes leDoorCloseRight{from,to{-webkit-transform:perspective(400px);transform:perspective(400px);-webkit-transform-origin:right;transform-origin:right}from{-webkit-transform:rotateY(-90deg);transform:rotateY(-90deg);opacity:0}to{opacity:1}}.leDoorOpenLeft span{-webkit-animation-name:leDoorOpenLeft;animation-name:leDoorOpenLeft}@-webkit-keyframes leDoorOpenLeft{from,to{-webkit-transform:perspective(400px);transform:perspective(400px);-webkit-transform-origin:right;transform-origin:right}to{-webkit-transform:rotateY(-90deg);transform:rotateY(-90deg);opacity:0}}@keyframes leDoorOpenLeft{from,to{-webkit-transform:perspective(400px);transform:perspective(400px);-webkit-transform-origin:right;transform-origin:right}to{-webkit-transform:rotateY(-90deg);transform:rotateY(-90deg);opacity:0}}.leHangAndDropLeft span{-webkit-animation-name:leHangAndDropLeft;animation-name:leHangAndDropLeft}@-webkit-keyframes leHangAndDropLeft{from{-webkit-transform-origin:left;transform-origin:left}50%{-webkit-transform:rotate(100deg);transform:rotate(100deg);-webkit-transform-origin:left;transform-origin:left}60%{-webkit-transform:rotate(90deg);transform:rotate(90deg);-webkit-transform-origin:left;transform-origin:left}to{-webkit-transform:translateY(300px) rotate(70deg);transform:translateY(300px) rotate(70deg);-webkit-transform-origin:left;transform-origin:left}}@keyframes leHangAndDropLeft{from{-webkit-transform-origin:left;transform-origin:left}50%{-webkit-transform:rotate(100deg);transform:rotate(100deg);-webkit-transform-origin:left;transform-origin:left}60%{-webkit-transform:rotate(90deg);transform:rotate(90deg);-webkit-transform-origin:left;transform-origin:left}to{-webkit-transform:translateY(300px) rotate(70deg);transform:translateY(300px) rotate(70deg);-webkit-transform-origin:left;transform-origin:left}}.leHangAndDropRight span{-webkit-animation-name:leHangAndDropRight;animation-name:leHangAndDropRight}@-webkit-keyframes leHangAndDropRight{from{-webkit-transform-origin:right;transform-origin:right}50%{-webkit-transform:rotate(-100deg);transform:rotate(-100deg);-webkit-transform-origin:right;transform-origin:right}60%{-webkit-transform:rotate(-90deg);transform:rotate(-90deg);-webkit-transform-origin:right;transform-origin:right}to{-webkit-transform:translateY(300px) rotate(-70deg);transform:translateY(300px) rotate(-70deg);-webkit-transform-origin:right;transform-origin:right}}@keyframes leHangAndDropRight{from{-webkit-transform-origin:right;transform-origin:right}50%{-webkit-transform:rotate(-100deg);transform:rotate(-100deg);-webkit-transform-origin:right;transform-origin:right}60%{-webkit-transform:rotate(-90deg);transform:rotate(-90deg);-webkit-transform-origin:right;transform-origin:right}to{-webkit-transform:translateY(300px) rotate(-70deg);transform:translateY(300px) rotate(-70deg);-webkit-transform-origin:right;transform-origin:right}}.lePulseShake span{-webkit-animation-name:lePulseShake;animation-name:lePulseShake;animation-iteration-count:infinite}@-webkit-keyframes lePulseShake{90%{-webkit-transform:scale(1);transform:scale(1)}92%{-webkit-transform:scale(1.2);transform:scale(1.2)}96%{-webkit-transform:scale(1,1);transform:scale(1,1)}98%{-webkit-transform:scale(1.1);transform:scale(1.1)}}@keyframes lePulseShake{90%{-webkit-transform:scale(1);transform:scale(1)}92%{-webkit-transform:scale(1.2);transform:scale(1.2)}96%{-webkit-transform:scale(1,1);transform:scale(1,1)}98%{-webkit-transform:scale(1.1);transform:scale(1.1)}}.leHorizontalShake span{-webkit-animation-name:leHorizontalShake;animation-name:leHorizontalShake;animation-iteration-count:infinite}.leMadMax span,.leVerticalShake span{-webkit-animation-iteration-count:infinite}@-webkit-keyframes leHorizontalShake{12%,21%,3%,30%,39%,48%,57%,65%,74%,83%,92%{-webkit-transform:translateX(5px);transform:translateX(5px)}15%,24%,33%,42%,51%,6%,60%,68%,77%,86%,95%{-webkit-transform:translateX(3px);transform:translateX(3px)}18%,27%,36%,45%,54%,63%,71%,80%,89%,9%,98%{-webkit-transform:translateX(-5px);transform:translateX(-5px)}}@keyframes leHorizontalShake{12%,21%,3%,30%,39%,48%,57%,65%,74%,83%,92%{-webkit-transform:translateX(5px);transform:translateX(5px)}15%,24%,33%,42%,51%,6%,60%,68%,77%,86%,95%{-webkit-transform:translateX(3px);transform:translateX(3px)}18%,27%,36%,45%,54%,63%,71%,80%,89%,9%,98%{-webkit-transform:translateX(-5px);transform:translateX(-5px)}}.leVerticalShake span{-webkit-animation-name:leVerticalShake;animation-name:leVerticalShake;animation-iteration-count:infinite}@-webkit-keyframes leVerticalShake{12%,21%,3%,30%,39%,48%,57%,65%,74%,83%,92%{-webkit-transform:translateY(5px);transform:translateY(5px)}15%,24%,33%,42%,51%,6%,60%,68%,77%,86%,95%{-webkit-transform:translateY(3px);transform:translateY(3px)}18%,27%,36%,45%,54%,63%,71%,80%,89%,9%,98%{-webkit-transform:translateY(-5px);transform:translateY(-5px)}}@keyframes leVerticalShake{12%,21%,3%,30%,39%,48%,57%,65%,74%,83%,92%{-webkit-transform:translateY(5px);transform:translateY(5px)}15%,24%,33%,42%,51%,6%,60%,68%,77%,86%,95%{-webkit-transform:translateY(3px);transform:translateY(3px)}18%,27%,36%,45%,54%,63%,71%,80%,89%,9%,98%{-webkit-transform:translateY(-5px);transform:translateY(-5px)}}.leMadMax span{-webkit-animation-name:leMadMax;animation-name:leMadMax;animation-iteration-count:infinite}@-webkit-keyframes leMadMax{12%,21%,3%,30%,39%,48%,57%,65%,74%,83%,92%{-webkit-transform:translateY(5px) scale(1.1);transform:translateY(5px) scale(1.1)}15%,24%,33%,42%,51%,6%,60%,68%,77%,86%,95%{-webkit-transform:translateY(3px) scale(.8);transform:translateY(3px) scale(.8)}18%,27%,36%,45%,54%,63%,71%,80%,89%,9%,98%{-webkit-transform:translateY(-5px) scale(1.1);transform:translateY(-5px) scale(1.1)}}@keyframes leMadMax{12%,21%,3%,30%,39%,48%,57%,65%,74%,83%,92%{-webkit-transform:translateY(5px) scale(1.1);transform:translateY(5px) scale(1.1)}15%,24%,33%,42%,51%,6%,60%,68%,77%,86%,95%{-webkit-transform:translateY(3px) scale(.8);transform:translateY(3px) scale(.8)}18%,27%,36%,45%,54%,63%,71%,80%,89%,9%,98%{-webkit-transform:translateY(-5px) scale(1.1);transform:translateY(-5px) scale(1.1)}}.leHorizontalTremble span{-webkit-animation-name:leHorizontalTremble;animation-name:leHorizontalTremble;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}@-webkit-keyframes leHorizontalTremble{21%,3%,39%,57%,74%,92%{-webkit-transform:translateX(5px);transform:translateX(5px)}24%,42%,6%,60%,77%,95%{-webkit-transform:translateX(3px);transform:translateX(3px)}27%,45%,63%,80%,9%,98%{-webkit-transform:translateX(-5px);transform:translateX(-5px)}}@keyframes leHorizontalTremble{21%,3%,39%,57%,74%,92%{-webkit-transform:translateX(5px);transform:translateX(5px)}24%,42%,6%,60%,77%,95%{-webkit-transform:translateX(3px);transform:translateX(3px)}27%,45%,63%,80%,9%,98%{-webkit-transform:translateX(-5px);transform:translateX(-5px)}}.leVerticalTremble span{-webkit-animation-name:leVerticalTremble;animation-name:leVerticalTremble;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}@-webkit-keyframes leVerticalTremble{21%,3%,39%,57%,74%,92%{-webkit-transform:translateY(5px);transform:translateY(5px)}24%,42%,6%,60%,77%,95%{-webkit-transform:translateY(3px);transform:translateY(3px)}27%,45%,63%,80%,9%,98%{-webkit-transform:translateY(-5px);transform:translateY(-5px)}}@keyframes leVerticalTremble{21%,3%,39%,57%,74%,92%{-webkit-transform:translateY(5px);transform:translateY(5px)}24%,42%,6%,60%,77%,95%{-webkit-transform:translateY(3px);transform:translateY(3px)}27%,45%,63%,80%,9%,98%{-webkit-transform:translateY(-5px);transform:translateY(-5px)}}.leCrazyCool span{-webkit-animation-name:leCrazyCool;animation-name:leCrazyCool;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}@-webkit-keyframes leCrazyCool{21%,3%,39%,57%,74%,92%{-webkit-transform:translateY(5px) scale(1.1);transform:translateY(5px) scale(1.1)}24%,42%,6%,60%,77%,95%{-webkit-transform:translateY(3px) scale(.8);transform:translateY(3px) scale(.8)}27%,45%,63%,80%,9%,98%{-webkit-transform:translateY(-5px) scale(1.1);transform:translateY(-5px) scale(1.1)}}@keyframes leCrazyCool{21%,3%,39%,57%,74%,92%{-webkit-transform:translateY(5px) scale(1.1);transform:translateY(5px) scale(1.1)}24%,42%,6%,60%,77%,95%{-webkit-transform:translateY(3px) scale(.8);transform:translateY(3px) scale(.8)}27%,45%,63%,80%,9%,98%{-webkit-transform:translateY(-5px) scale(1.1);transform:translateY(-5px) scale(1.1)}}.leVibration span{-webkit-animation:leVibration .1s linear infinite;animation:leVibration .1s linear infinite}.heartbeat,.heartbeat2{-webkit-animation-iteration-count:infinite}@-webkit-keyframes leVibration{50%{-webkit-transform:skewY(1deg) skewX(-1deg) scale(1.06);transform:skewY(1deg) skewX(-1deg) scale(1.06)}}@keyframes leVibration{50%{-webkit-transform:skewY(1deg) skewX(-1deg) scale(1.06);transform:skewY(1deg) skewX(-1deg) scale(1.06)}}.lePushReleaseFrom span{-webkit-animation-name:lePushReleaseFrom;animation-name:lePushReleaseFrom}@-webkit-keyframes lePushReleaseFrom{from{-webkit-transform:scale(3,3);transform:scale(3,3);opacity:0}50%{-webkit-transform:scale(.5,.5);transform:scale(.5,.5)}}@keyframes lePushReleaseFrom{from{-webkit-transform:scale(3,3);transform:scale(3,3);opacity:0}50%{-webkit-transform:scale(.5,.5);transform:scale(.5,.5)}}.lePushReleaseFromLeft span{-webkit-animation-name:lePushReleaseFromLeft;animation-name:lePushReleaseFromLeft}@-webkit-keyframes lePushReleaseFromLeft{from{-webkit-transform:translateX(-100%);transform:translateX(-100%);opacity:0}30%{-webkit-transform:translateX(100px);transform:translateX(100px)}}@keyframes lePushReleaseFromLeft{from{-webkit-transform:translateX(-100%);transform:translateX(-100%);opacity:0}30%{-webkit-transform:translateX(100px);transform:translateX(100px)}}.lePushReleaseFromTop span{-webkit-animation-name:lePushReleaseFromTop;animation-name:lePushReleaseFromTop}@-webkit-keyframes lePushReleaseFromTop{from{-webkit-transform:translateY(-100%);transform:translateY(-100%);opacity:0}30%{-webkit-transform:translateY(100px);transform:translateY(100px)}}@keyframes lePushReleaseFromTop{from{-webkit-transform:translateY(-100%);transform:translateY(-100%);opacity:0}30%{-webkit-transform:translateY(100px);transform:translateY(100px)}}.lePushReleaseFromBottom span{-webkit-animation-name:lePushReleaseFromBottom;animation-name:lePushReleaseFromBottom}@-webkit-keyframes lePushReleaseFromBottom{from{-webkit-transform:translateY(100%);transform:translateY(100%);opacity:0}30%{-webkit-transform:translateY(-100px);transform:translateY(-100px)}}@keyframes lePushReleaseFromBottom{from{-webkit-transform:translateY(100%);transform:translateY(100%);opacity:0}30%{-webkit-transform:translateY(-100px);transform:translateY(-100px)}}.lePushReleaseTo span{-webkit-animation-name:lePushReleaseTo;animation-name:lePushReleaseTo}@-webkit-keyframes lePushReleaseTo{30%{-webkit-transform:scale(.5,.5);transform:scale(.5,.5)}to{-webkit-transform:scale(5,5);transform:scale(5,5);opacity:0}}@keyframes lePushReleaseTo{30%{-webkit-transform:scale(.5,.5);transform:scale(.5,.5)}to{-webkit-transform:scale(5,5);transform:scale(5,5);opacity:0}}.lePushReleaseToTop span{-webkit-animation-name:lePushReleaseToTop;animation-name:lePushReleaseToTop}@-webkit-keyframes lePushReleaseToTop{30%{-webkit-transform:translateY(100px);transform:translateY(100px)}to{-webkit-transform:translateY(-100%);transform:translateY(-100%);opacity:0}}@keyframes lePushReleaseToTop{30%{-webkit-transform:translateY(100px);transform:translateY(100px)}to{-webkit-transform:translateY(-100%);transform:translateY(-100%);opacity:0}}.lePushReleaseToBottom span{-webkit-animation-name:lePushReleaseToBottom;animation-name:lePushReleaseToBottom}@-webkit-keyframes lePushReleaseToBottom{30%{-webkit-transform:translateY(-100px);transform:translateY(-100px)}to{-webkit-transform:translateY(100%);transform:translateY(100%);opacity:0}}@keyframes lePushReleaseToBottom{30%{-webkit-transform:translateY(-100px);transform:translateY(-100px)}to{-webkit-transform:translateY(100%);transform:translateY(100%);opacity:0}}.leFlipIn span{-webkit-animation-name:leFlipX;animation-name:leFlipX}@-webkit-keyframes leFlipX{from{-webkit-transform:perspective(600px);transform:perspective(600px);opacity:0}30%{-webkit-transform:perspective(600px) rotateX(180deg);transform:perspective(600px) rotateX(180deg);-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}to{-webkit-transform:perspective(600px);transform:perspective(600px)}}@keyframes leFlipX{from{-webkit-transform:perspective(600px);transform:perspective(600px);opacity:0}30%{-webkit-transform:perspective(600px) rotateX(180deg);transform:perspective(600px) rotateX(180deg);-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}to{-webkit-transform:perspective(600px);transform:perspective(600px)}}.leFlipOut span{-webkit-animation-name:leFlipXZoomIn;animation-name:leFlipXZoomIn}@-webkit-keyframes leFlipXZoomIn{70%{-webkit-transform:perspective(600px) rotateX(180deg);transform:perspective(600px) rotateX(180deg);-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}to{opacity:0;-webkit-transform:perspective(600px);transform:perspective(600px)}}@keyframes leFlipXZoomIn{70%{-webkit-transform:perspective(600px) rotateX(180deg);transform:perspective(600px) rotateX(180deg);-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}to{opacity:0;-webkit-transform:perspective(600px);transform:perspective(600px)}}.leElevateLeft span{-webkit-animation-name:leElevateLeft;animation-name:leElevateLeft}@-webkit-keyframes leElevateLeft{from{-webkit-transform:translateY(100%) rotate(-20deg);transform:translateY(100%) rotate(-20deg);-webkit-transform-origin:right;transform-origin:right;opacity:0}40%{-webkit-transform:rotate(20deg);transform:rotate(20deg);-webkit-transform-origin:right;transform-origin:right}65%{-webkit-transform:rotate(0);transform:rotate(0);-webkit-transform-origin:right;transform-origin:right}}@keyframes leElevateLeft{from{-webkit-transform:translateY(100%) rotate(-20deg);transform:translateY(100%) rotate(-20deg);-webkit-transform-origin:right;transform-origin:right;opacity:0}40%{-webkit-transform:rotate(20deg);transform:rotate(20deg);-webkit-transform-origin:right;transform-origin:right}65%{-webkit-transform:rotate(0);transform:rotate(0);-webkit-transform-origin:right;transform-origin:right}}.leElevateRight span{-webkit-animation-name:leElevateRight;animation-name:leElevateRight}@-webkit-keyframes leElevateRight{from{-webkit-transform:translateY(100%) rotate(20deg);transform:translateY(100%) rotate(20deg);-webkit-transform-origin:left;transform-origin:left;opacity:0}40%{-webkit-transform:rotate(-20deg);transform:rotate(-20deg);-webkit-transform-origin:left;transform-origin:left}65%{-webkit-transform:rotate(0);transform:rotate(0);-webkit-transform-origin:left;transform-origin:left}}@keyframes leElevateRight{from{-webkit-transform:translateY(100%) rotate(20deg);transform:translateY(100%) rotate(20deg);-webkit-transform-origin:left;transform-origin:left;opacity:0}40%{-webkit-transform:rotate(-20deg);transform:rotate(-20deg);-webkit-transform-origin:left;transform-origin:left}65%{-webkit-transform:rotate(0);transform:rotate(0);-webkit-transform-origin:left;transform-origin:left}}.leRollFromLeft span{-webkit-animation-name:leRollFromLeft;animation-name:leRollFromLeft}@-webkit-keyframes leRollFromLeft{from{-webkit-transform:translateX(-60px) perspective(600px) rotateY(180deg);transform:translateX(-60px) perspective(600px) rotateY(180deg);opacity:0}}@keyframes leRollFromLeft{from{-webkit-transform:translateX(-60px) perspective(600px) rotateY(180deg);transform:translateX(-60px) perspective(600px) rotateY(180deg);opacity:0}}.leRollFromRight span{-webkit-animation-name:leRollFromRight;animation-name:leRollFromRight}@-webkit-keyframes leRollFromRight{from{-webkit-transform:translateX(60px) perspective(600px) rotateY(-180deg);transform:translateX(60px) perspective(600px) rotateY(-180deg);opacity:0}}@keyframes leRollFromRight{from{-webkit-transform:translateX(60px) perspective(600px) rotateY(-180deg);transform:translateX(60px) perspective(600px) rotateY(-180deg);opacity:0}}.leRollFromTop span{-webkit-animation-name:leRollFromTop;animation-name:leRollFromTop}@-webkit-keyframes leRollFromTop{from{-webkit-transform:translateY(-60px) perspective(600px) rotateX(180deg);transform:translateY(-60px) perspective(600px) rotateX(180deg);opacity:0}}@keyframes leRollFromTop{from{-webkit-transform:translateY(-60px) perspective(600px) rotateX(180deg);transform:translateY(-60px) perspective(600px) rotateX(180deg);opacity:0}}.leRollFromBottom span{-webkit-animation-name:leRollFromBottom;animation-name:leRollFromBottom}@-webkit-keyframes leRollFromBottom{from{-webkit-transform:translateY(60px) perspective(600px) rotateX(-180deg);transform:translateY(60px) perspective(600px) rotateX(-180deg);opacity:0}}@keyframes leRollFromBottom{from{-webkit-transform:translateY(60px) perspective(600px) rotateX(-180deg);transform:translateY(60px) perspective(600px) rotateX(-180deg);opacity:0}}.leRollToLeft span{-webkit-animation-name:leRollToLeft;animation-name:leRollToLeft}@-webkit-keyframes leRollToLeft{to{-webkit-transform:translateX(-60px) perspective(600px) rotateY(180deg);transform:translateX(-60px) perspective(600px) rotateY(180deg);opacity:0}}@keyframes leRollToLeft{to{-webkit-transform:translateX(-60px) perspective(600px) rotateY(180deg);transform:translateX(-60px) perspective(600px) rotateY(180deg);opacity:0}}.leRollToRight span{-webkit-animation-name:leRollToRight;animation-name:leRollToRight}@-webkit-keyframes leRollToRight{to{-webkit-transform:translateX(60px) perspective(600px) rotateY(-180deg);transform:translateX(60px) perspective(600px) rotateY(-180deg);opacity:0}}@keyframes leRollToRight{to{-webkit-transform:translateX(60px) perspective(600px) rotateY(-180deg);transform:translateX(60px) perspective(600px) rotateY(-180deg);opacity:0}}.leRollToTop span{-webkit-animation-name:leRollToTop;animation-name:leRollToTop}@-webkit-keyframes leRollToTop{to{-webkit-transform:translateY(-60px) perspective(600px) rotateX(180deg);transform:translateY(-60px) perspective(600px) rotateX(180deg);opacity:0}}@keyframes leRollToTop{to{-webkit-transform:translateY(-60px) perspective(600px) rotateX(180deg);transform:translateY(-60px) perspective(600px) rotateX(180deg);opacity:0}}.leRollToBottom span{-webkit-animation-name:leRollToBottom;animation-name:leRollToBottom}@-webkit-keyframes leRollToBottom{to{-webkit-transform:translateY(60px) perspective(600px) rotateX(-180deg);transform:translateY(60px) perspective(600px) rotateX(-180deg);opacity:0}}@keyframes leRollToBottom{to{-webkit-transform:translateY(60px) perspective(600px) rotateX(-180deg);transform:translateY(60px) perspective(600px) rotateX(-180deg);opacity:0}}.leRotationXIn span{-webkit-animation-name:leRotationXIn;animation-name:leRotationXIn}@-webkit-keyframes leRotationXIn{from{-webkit-transform:perspective(600px) translate3d(0,-60px,-2000px) rotateX(75deg);transform:perspective(600px) translate3d(0,-60px,-2000px) rotateX(75deg);opacity:0}5%{-webkit-transform:perspective(600px) translate3d(0,-60px,-1500px) rotateX(75deg);transform:perspective(600px) translate3d(0,-60px,-1500px) rotateX(75deg)}}@keyframes leRotationXIn{from{-webkit-transform:perspective(600px) translate3d(0,-60px,-2000px) rotateX(75deg);transform:perspective(600px) translate3d(0,-60px,-2000px) rotateX(75deg);opacity:0}5%{-webkit-transform:perspective(600px) translate3d(0,-60px,-1500px) rotateX(75deg);transform:perspective(600px) translate3d(0,-60px,-1500px) rotateX(75deg)}}.leRotationXOut span{-webkit-animation-name:leRotationXOut;animation-name:leRotationXOut}@-webkit-keyframes leRotationXOut{95%{-webkit-transform:perspective(600px) translate3d(0,-60px,-1500px) rotateX(75deg);transform:perspective(600px) translate3d(0,-60px,-1500px) rotateX(75deg)}to{-webkit-transform:perspective(600px) translate3d(0,-60px,-2000px) rotateX(75deg);transform:perspective(600px) translate3d(0,-60px,-2000px) rotateX(75deg);opacity:0}}@keyframes leRotationXOut{95%{-webkit-transform:perspective(600px) translate3d(0,-60px,-1500px) rotateX(75deg);transform:perspective(600px) translate3d(0,-60px,-1500px) rotateX(75deg)}to{-webkit-transform:perspective(600px) translate3d(0,-60px,-2000px) rotateX(75deg);transform:perspective(600px) translate3d(0,-60px,-2000px) rotateX(75deg);opacity:0}}.leRotationYIn span{-webkit-animation-name:leRotationYIn;animation-name:leRotationYIn}@-webkit-keyframes leRotationYIn{from{-webkit-transform:perspective(600px) translate3d(0,-60px,-2000px) rotateY(75deg);transform:perspective(600px) translate3d(0,-60px,-2000px) rotateY(75deg);opacity:0}5%{-webkit-transform:perspective(600px) translate3d(0,-60px,-1500px) rotateY(75deg);transform:perspective(600px) translate3d(0,-60px,-1500px) rotateY(75deg)}}@keyframes leRotationYIn{from{-webkit-transform:perspective(600px) translate3d(0,-60px,-2000px) rotateY(75deg);transform:perspective(600px) translate3d(0,-60px,-2000px) rotateY(75deg);opacity:0}5%{-webkit-transform:perspective(600px) translate3d(0,-60px,-1500px) rotateY(75deg);transform:perspective(600px) translate3d(0,-60px,-1500px) rotateY(75deg)}}.leRotationYOut span{-webkit-animation-name:leRotationYOut;animation-name:leRotationYOut}@-webkit-keyframes leRotationYOut{95%{-webkit-transform:perspective(600px) translate3d(0,-60px,-1500px) rotateY(75deg);transform:perspective(600px) translate3d(0,-60px,-1500px) rotateY(75deg)}to{-webkit-transform:perspective(600px) translate3d(0,-60px,-2000px) rotateY(75deg);transform:perspective(600px) translate3d(0,-60px,-2000px) rotateY(75deg);opacity:0}}@keyframes leRotationYOut{95%{-webkit-transform:perspective(600px) translate3d(0,-60px,-1500px) rotateY(75deg);transform:perspective(600px) translate3d(0,-60px,-1500px) rotateY(75deg)}to{-webkit-transform:perspective(600px) translate3d(0,-60px,-2000px) rotateY(75deg);transform:perspective(600px) translate3d(0,-60px,-2000px) rotateY(75deg);opacity:0}}.leRotateIn span{-webkit-animation-name:leRotateIn;animation-name:leRotateIn}@-webkit-keyframes leRotateIn{from{-webkit-transform:rotate(-180deg);transform:rotate(-180deg);opacity:0}to{opacity:1}}@keyframes leRotateIn{from{-webkit-transform:rotate(-180deg);transform:rotate(-180deg);opacity:0}to{opacity:1}}.leRotateOut span{-webkit-animation-name:leRotateOut;animation-name:leRotateOut}@-webkit-keyframes leRotateOut{from{opacity:1}to{-webkit-transform:rotate(180deg);transform:rotate(180deg);opacity:0}}@keyframes leRotateOut{from{opacity:1}to{-webkit-transform:rotate(180deg);transform:rotate(180deg);opacity:0}}.leRotateInLeft span{-webkit-animation-name:leRotateInLeft;animation-name:leRotateInLeft}@-webkit-keyframes leRotateInLeft{from{-webkit-transform:rotate(-180deg) translateX(150px);transform:rotate(-180deg) translateX(150px);opacity:0}to{opacity:1}}@keyframes leRotateInLeft{from{-webkit-transform:rotate(-180deg) translateX(150px);transform:rotate(-180deg) translateX(150px);opacity:0}to{opacity:1}}.leRotateOutLeft span{-webkit-animation-name:leRotateOutLeft;animation-name:leRotateOutLeft}@-webkit-keyframes leRotateOutLeft{from{opacity:1}to{-webkit-transform:rotate(180deg) translateX(150px);transform:rotate(180deg) translateX(150px);opacity:0}}@keyframes leRotateOutLeft{from{opacity:1}to{-webkit-transform:rotate(180deg) translateX(150px);transform:rotate(180deg) translateX(150px);opacity:0}}.leRotateInRight span{-webkit-animation-name:leRotateInRight;animation-name:leRotateInRight}@-webkit-keyframes leRotateInRight{from{-webkit-transform:rotate(-180deg) translateX(-150px);transform:rotate(-180deg) translateX(-150px);opacity:0}to{opacity:1}}@keyframes leRotateInRight{from{-webkit-transform:rotate(-180deg) translateX(-150px);transform:rotate(-180deg) translateX(-150px);opacity:0}to{opacity:1}}.leRotateOutRight span{-webkit-animation-name:leRotateOutRight;animation-name:leRotateOutRight}@-webkit-keyframes leRotateOutRight{from{opacity:1}to{-webkit-transform:rotate(180deg) translateX(-150px);transform:rotate(180deg) translateX(-150px);opacity:0}}@keyframes leRotateOutRight{from{opacity:1}to{-webkit-transform:rotate(180deg) translateX(-150px);transform:rotate(180deg) translateX(-150px);opacity:0}}.leSpinInLeft span{-webkit-animation-name:leSpinInLeft;animation-name:leSpinInLeft}@-webkit-keyframes leSpinInLeft{from,to{-webkit-transform-origin:left bottom;transform-origin:left bottom}from{-webkit-transform:rotate(90deg);transform:rotate(90deg);opacity:0}}@keyframes leSpinInLeft{from,to{-webkit-transform-origin:left bottom;transform-origin:left bottom}from{-webkit-transform:rotate(90deg);transform:rotate(90deg);opacity:0}}.leSpinInRight span{-webkit-animation-name:leSpinInRight;animation-name:leSpinInRight}@-webkit-keyframes leSpinInRight{from,to{-webkit-transform-origin:right bottom;transform-origin:right bottom}from{-webkit-transform:rotate(-90deg);transform:rotate(-90deg);opacity:0}}@keyframes leSpinInRight{from,to{-webkit-transform-origin:right bottom;transform-origin:right bottom}from{-webkit-transform:rotate(-90deg);transform:rotate(-90deg);opacity:0}}.leSpinOutLeft span{-webkit-animation-name:leSpinOutLeft;animation-name:leSpinOutLeft}@-webkit-keyframes leSpinOutLeft{from,to{-webkit-transform-origin:left bottom;transform-origin:left bottom}to{-webkit-transform:rotate(90deg);transform:rotate(90deg);opacity:0}}@keyframes leSpinOutLeft{from,to{-webkit-transform-origin:left bottom;transform-origin:left bottom}to{-webkit-transform:rotate(90deg);transform:rotate(90deg);opacity:0}}.leSpinOutRight span{-webkit-animation-name:leSpinOutRight;animation-name:leSpinOutRight}@-webkit-keyframes leSpinOutRight{from,to{-webkit-transform-origin:right bottom;transform-origin:right bottom}to{-webkit-transform:rotate(-90deg);transform:rotate(-90deg);opacity:0}}@keyframes leSpinOutRight{from,to{-webkit-transform-origin:right bottom;transform-origin:right bottom}to{-webkit-transform:rotate(-90deg);transform:rotate(-90deg);opacity:0}}.leBlurInRight span{-webkit-animation-name:leBlurInRight;animation-name:leBlurInRight}@-webkit-keyframes leBlurInRight{from{-webkit-transform:scaleX(.2) translateX(100px);transform:scaleX(.2) translateX(100px);text-shadow:0 0 10px rgba(167,81,203,.6),0 0 30px rgba(167,81,203,.4),0 0 50px rgba(167,81,203,.3),0 0 180px rgba(167,81,203,.3);color:transparent;opacity:0}20%{text-shadow:0 0 10px rgba(167,81,203,.6),0 0 30px rgba(167,81,203,.4),0 0 50px rgba(167,81,203,.3),0 0 180px rgba(167,81,203,.3);color:transparent}}@keyframes leBlurInRight{from{-webkit-transform:scaleX(.2) translateX(100px);transform:scaleX(.2) translateX(100px);text-shadow:0 0 10px rgba(167,81,203,.6),0 0 30px rgba(167,81,203,.4),0 0 50px rgba(167,81,203,.3),0 0 180px rgba(167,81,203,.3);color:transparent;opacity:0}20%{text-shadow:0 0 10px rgba(167,81,203,.6),0 0 30px rgba(167,81,203,.4),0 0 50px rgba(167,81,203,.3),0 0 180px rgba(167,81,203,.3);color:transparent}}.leBlurInLeft span{-webkit-animation-name:leBlurInLeft;animation-name:leBlurInLeft}@-webkit-keyframes leBlurInLeft{from{-webkit-transform:scaleX(.2) translateX(-100px);transform:scaleX(.2) translateX(-100px);text-shadow:0 0 10px rgba(167,81,203,.6),0 0 30px rgba(167,81,203,.4),0 0 50px rgba(167,81,203,.3),0 0 180px rgba(167,81,203,.3);color:transparent;opacity:0}20%{text-shadow:0 0 10px rgba(167,81,203,.6),0 0 30px rgba(167,81,203,.4),0 0 50px rgba(167,81,203,.3),0 0 180px rgba(167,81,203,.3);color:transparent}}@keyframes leBlurInLeft{from{-webkit-transform:scaleX(.2) translateX(-100px);transform:scaleX(.2) translateX(-100px);text-shadow:0 0 10px rgba(167,81,203,.6),0 0 30px rgba(167,81,203,.4),0 0 50px rgba(167,81,203,.3),0 0 180px rgba(167,81,203,.3);color:transparent;opacity:0}20%{text-shadow:0 0 10px rgba(167,81,203,.6),0 0 30px rgba(167,81,203,.4),0 0 50px rgba(167,81,203,.3),0 0 180px rgba(167,81,203,.3);color:transparent}}.leBlurInTop span{-webkit-animation-name:leBlurInTop;animation-name:leBlurInTop}@-webkit-keyframes leBlurInTop{from{-webkit-transform:scaleY(.2) translateY(-100px);transform:scaleY(.2) translateY(-100px);text-shadow:0 0 10px rgba(167,81,203,.6),0 0 30px rgba(167,81,203,.4),0 0 50px rgba(167,81,203,.3),0 0 180px rgba(167,81,203,.3);color:transparent;opacity:0}20%{text-shadow:0 0 10px rgba(167,81,203,.6),0 0 30px rgba(167,81,203,.4),0 0 50px rgba(167,81,203,.3),0 0 180px rgba(167,81,203,.3);color:transparent}}@keyframes leBlurInTop{from{-webkit-transform:scaleY(.2) translateY(-100px);transform:scaleY(.2) translateY(-100px);text-shadow:0 0 10px rgba(167,81,203,.6),0 0 30px rgba(167,81,203,.4),0 0 50px rgba(167,81,203,.3),0 0 180px rgba(167,81,203,.3);color:transparent;opacity:0}20%{text-shadow:0 0 10px rgba(167,81,203,.6),0 0 30px rgba(167,81,203,.4),0 0 50px rgba(167,81,203,.3),0 0 180px rgba(167,81,203,.3);color:transparent}}.leBlurInBottom span{-webkit-animation-name:leBlurInBottom;animation-name:leBlurInBottom}@-webkit-keyframes leBlurInBottom{from{-webkit-transform:scaleY(.2) translateY(100px);transform:scaleY(.2) translateY(100px);text-shadow:0 0 10px rgba(167,81,203,.6),0 0 30px rgba(167,81,203,.4),0 0 50px rgba(167,81,203,.3),0 0 180px rgba(167,81,203,.3);color:transparent;opacity:0}20%{text-shadow:0 0 10px rgba(167,81,203,.6),0 0 30px rgba(167,81,203,.4),0 0 50px rgba(167,81,203,.3),0 0 180px rgba(167,81,203,.3);color:transparent}}@keyframes leBlurInBottom{from{-webkit-transform:scaleY(.2) translateY(100px);transform:scaleY(.2) translateY(100px);text-shadow:0 0 10px rgba(167,81,203,.6),0 0 30px rgba(167,81,203,.4),0 0 50px rgba(167,81,203,.3),0 0 180px rgba(167,81,203,.3);color:transparent;opacity:0}20%{text-shadow:0 0 10px rgba(167,81,203,.6),0 0 30px rgba(167,81,203,.4),0 0 50px rgba(167,81,203,.3),0 0 180px rgba(167,81,203,.3);color:transparent}}.leBlurOutRight span{-webkit-animation-name:leBlurOutRight;animation-name:leBlurOutRight}@-webkit-keyframes leBlurOutRight{20%{text-shadow:0 0 10px rgba(167,81,203,.6),0 0 30px rgba(167,81,203,.4),0 0 50px rgba(167,81,203,.3),0 0 180px rgba(167,81,203,.3);color:transparent}to{-webkit-transform:scaleX(.2) translateX(100px);transform:scaleX(.2) translateX(100px);text-shadow:0 0 10px rgba(167,81,203,.6),0 0 30px rgba(167,81,203,.4),0 0 50px rgba(167,81,203,.3),0 0 180px rgba(167,81,203,.3);color:transparent;opacity:0}}@keyframes leBlurOutRight{20%{text-shadow:0 0 10px rgba(167,81,203,.6),0 0 30px rgba(167,81,203,.4),0 0 50px rgba(167,81,203,.3),0 0 180px rgba(167,81,203,.3);color:transparent}to{-webkit-transform:scaleX(.2) translateX(100px);transform:scaleX(.2) translateX(100px);text-shadow:0 0 10px rgba(167,81,203,.6),0 0 30px rgba(167,81,203,.4),0 0 50px rgba(167,81,203,.3),0 0 180px rgba(167,81,203,.3);color:transparent;opacity:0}}.leBlurOutLeft span{-webkit-animation-name:leBlurOutLeft;animation-name:leBlurOutLeft}@-webkit-keyframes leBlurOutLeft{20%{text-shadow:0 0 10px rgba(167,81,203,.6),0 0 30px rgba(167,81,203,.4),0 0 50px rgba(167,81,203,.3),0 0 180px rgba(167,81,203,.3);color:transparent}to{-webkit-transform:scaleX(.2) translateX(-100px);transform:scaleX(.2) translateX(-100px);text-shadow:0 0 10px rgba(167,81,203,.6),0 0 30px rgba(167,81,203,.4),0 0 50px rgba(167,81,203,.3),0 0 180px rgba(167,81,203,.3);color:transparent;opacity:0}}@keyframes leBlurOutLeft{20%{text-shadow:0 0 10px rgba(167,81,203,.6),0 0 30px rgba(167,81,203,.4),0 0 50px rgba(167,81,203,.3),0 0 180px rgba(167,81,203,.3);color:transparent}to{-webkit-transform:scaleX(.2) translateX(-100px);transform:scaleX(.2) translateX(-100px);text-shadow:0 0 10px rgba(167,81,203,.6),0 0 30px rgba(167,81,203,.4),0 0 50px rgba(167,81,203,.3),0 0 180px rgba(167,81,203,.3);color:transparent;opacity:0}}.leBlurOutTop span{-webkit-animation-name:leBlurOutTop;animation-name:leBlurOutTop}@-webkit-keyframes leBlurOutTop{20%{text-shadow:0 0 10px rgba(167,81,203,.6),0 0 30px rgba(167,81,203,.4),0 0 50px rgba(167,81,203,.3),0 0 180px rgba(167,81,203,.3);color:transparent}to{-webkit-transform:scaleY(.2) translateY(-100px);transform:scaleY(.2) translateY(-100px);text-shadow:0 0 10px rgba(167,81,203,.6),0 0 30px rgba(167,81,203,.4),0 0 50px rgba(167,81,203,.3),0 0 180px rgba(167,81,203,.3);color:transparent;opacity:0}}@keyframes leBlurOutTop{20%{text-shadow:0 0 10px rgba(167,81,203,.6),0 0 30px rgba(167,81,203,.4),0 0 50px rgba(167,81,203,.3),0 0 180px rgba(167,81,203,.3);color:transparent}to{-webkit-transform:scaleY(.2) translateY(-100px);transform:scaleY(.2) translateY(-100px);text-shadow:0 0 10px rgba(167,81,203,.6),0 0 30px rgba(167,81,203,.4),0 0 50px rgba(167,81,203,.3),0 0 180px rgba(167,81,203,.3);color:transparent;opacity:0}}.leBlurOutBottom span{-webkit-animation-name:leBlurOutBottom;animation-name:leBlurOutBottom}@-webkit-keyframes leBlurOutBottom{20%{text-shadow:0 0 10px rgba(167,81,203,.6),0 0 30px rgba(167,81,203,.4),0 0 50px rgba(167,81,203,.3),0 0 180px rgba(167,81,203,.3);color:transparent}to{-webkit-transform:scaleY(.2) translateY(100px);transform:scaleY(.2) translateY(100px);text-shadow:0 0 10px rgba(167,81,203,.6),0 0 30px rgba(167,81,203,.4),0 0 50px rgba(167,81,203,.3),0 0 180px rgba(167,81,203,.3);color:transparent;opacity:0}}@keyframes leBlurOutBottom{20%{text-shadow:0 0 10px rgba(167,81,203,.6),0 0 30px rgba(167,81,203,.4),0 0 50px rgba(167,81,203,.3),0 0 180px rgba(167,81,203,.3);color:transparent}to{-webkit-transform:scaleY(.2) translateY(100px);transform:scaleY(.2) translateY(100px);text-shadow:0 0 10px rgba(167,81,203,.6),0 0 30px rgba(167,81,203,.4),0 0 50px rgba(167,81,203,.3),0 0 180px rgba(167,81,203,.3);color:transparent;opacity:0}}.lePopUp span{-webkit-animation-name:lePopUp;animation-name:lePopUp}@-webkit-keyframes lePopUp{50%{-webkit-transform:scale(1.5);transform:scale(1.5)}}@keyframes lePopUp{50%{-webkit-transform:scale(1.5);transform:scale(1.5)}}.lePopUpLeft span{-webkit-animation-name:lePopUpLeft;animation-name:lePopUpLeft}@-webkit-keyframes lePopUpLeft{50%{-webkit-transform:translateX(-50px) scale(1.5);transform:translateX(-50px) scale(1.5);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}}@keyframes lePopUpLeft{50%{-webkit-transform:translateX(-50px) scale(1.5);transform:translateX(-50px) scale(1.5);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}}.lePopUpRight span{-webkit-animation-name:lePopUpRight;animation-name:lePopUpRight}@-webkit-keyframes lePopUpRight{50%{-webkit-transform:translateX(50px) scale(1.5);transform:translateX(50px) scale(1.5);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}}@keyframes lePopUpRight{50%{-webkit-transform:translateX(50px) scale(1.5);transform:translateX(50px) scale(1.5);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}}.lePopOut span{-webkit-animation-name:lePopOut;animation-name:lePopOut}@-webkit-keyframes lePopOut{50%{-webkit-transform:scale(.5);transform:scale(.5)}}@keyframes lePopOut{50%{-webkit-transform:scale(.5);transform:scale(.5)}}.lePopOutLeft span{-webkit-animation-name:lePopOutLeft;animation-name:lePopOutLeft}@-webkit-keyframes lePopOutLeft{50%{-webkit-transform:translateX(-50px) scale(.5);transform:translateX(-50px) scale(.5);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}}@keyframes lePopOutLeft{50%{-webkit-transform:translateX(-50px) scale(.5);transform:translateX(-50px) scale(.5);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}}.lePopOutRight span{-webkit-animation-name:lePopOutRight;animation-name:lePopOutRight}@-webkit-keyframes lePopOutRight{50%{-webkit-transform:translateX(50px) scale(.5);transform:translateX(50px) scale(.5);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}}@keyframes lePopOutRight{50%{-webkit-transform:translateX(50px) scale(.5);transform:translateX(50px) scale(.5);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}}.leBounceFromTop span{-webkit-animation-name:leBounceFromTop;animation-name:leBounceFromTop}@-webkit-keyframes leBounceFromTop{0%,100%,25%,55%,85%{-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}41%,44%{-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;-webkit-transform:translate3d(0,-80px,0) scale3d(1,1.2,1);transform:translate3d(0,-80px,0) scale3d(1,1.2,1)}70%{-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}90%{-webkit-transform:translate3d(0,-4px,0);transform:translate3d(0,-4px,0)}}@keyframes leBounceFromTop{0%,100%,25%,55%,85%{-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}41%,44%{-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;-webkit-transform:translate3d(0,-80px,0) scale3d(1,1.2,1);transform:translate3d(0,-80px,0) scale3d(1,1.2,1)}70%{-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}90%{-webkit-transform:translate3d(0,-4px,0);transform:translate3d(0,-4px,0)}}.leBounceFromDown span{-webkit-animation-name:leBounceFromDown;animation-name:leBounceFromDown}@-webkit-keyframes leBounceFromDown{0%,100%,25%,55%,85%{-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}41%,44%{-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;-webkit-transform:translate3d(0,80px,0) scale3d(1,1.2,1);transform:translate3d(0,80px,0) scale3d(1,1.2,1)}70%{-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;-webkit-transform:translate3d(0,20px,0);transform:translate3d(0,20px,0)}90%{-webkit-transform:translate3d(0,4px,0);transform:translate3d(0,4px,0)}}@keyframes leBounceFromDown{0%,100%,25%,55%,85%{-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}41%,44%{-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;-webkit-transform:translate3d(0,80px,0) scale3d(1,1.2,1);transform:translate3d(0,80px,0) scale3d(1,1.2,1)}70%{-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;-webkit-transform:translate3d(0,20px,0);transform:translate3d(0,20px,0)}90%{-webkit-transform:translate3d(0,4px,0);transform:translate3d(0,4px,0)}}.leBounceY span{-webkit-animation-name:leBounceY;animation-name:leBounceY}@-webkit-keyframes leBounceY{0%,100%,25%,55%,85%{-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}41%,44%{-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;-webkit-transform:scale3d(1,2,1);transform:scale3d(1,2,1)}70%{-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;-webkit-transform:scale3d(1,1.5,1);transform:scale3d(1,1.5,1)}90%{-webkit-transform:scale3d(1,1.1,1);transform:scale3d(1,1.1,1)}}@keyframes leBounceY{0%,100%,25%,55%,85%{-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}41%,44%{-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;-webkit-transform:scale3d(1,2,1);transform:scale3d(1,2,1)}70%{-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;-webkit-transform:scale3d(1,1.5,1);transform:scale3d(1,1.5,1)}90%{-webkit-transform:scale3d(1,1.1,1);transform:scale3d(1,1.1,1)}}.leBounceZoomIn span{-webkit-animation-name:leBounceZoomIn;animation-name:leBounceZoomIn}@-webkit-keyframes leBounceZoomIn{0%,100%,25%,55%,85%{-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out;-webkit-transform:scale(1);transform:scale(1)}41%,44%{-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;-webkit-transform:scale(1.7);transform:scale(1.7)}70%{-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;-webkit-transform:scale(1.9);transform:scale(1.9)}90%{-webkit-transform:scale(1.1);transform:scale(1.1)}}@keyframes leBounceZoomIn{0%,100%,25%,55%,85%{-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out;-webkit-transform:scale(1);transform:scale(1)}41%,44%{-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;-webkit-transform:scale(1.7);transform:scale(1.7)}70%{-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;-webkit-transform:scale(1.9);transform:scale(1.9)}90%{-webkit-transform:scale(1.1);transform:scale(1.1)}}.leBounceZoomOut span{-webkit-animation-name:leBounceZoomOut;animation-name:leBounceZoomOut}@-webkit-keyframes leBounceZoomOut{0%,100%,25%,55%,85%{-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out;-webkit-transform:scale(1);transform:scale(1)}41%,44%{-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;-webkit-transform:scale(.5);transform:scale(.5)}70%{-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;-webkit-transform:scale(.7);transform:scale(.7)}90%{-webkit-transform:scale(.9);transform:scale(.9)}}@keyframes leBounceZoomOut{0%,100%,25%,55%,85%{-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out;-webkit-transform:scale(1);transform:scale(1)}41%,44%{-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;-webkit-transform:scale(.5);transform:scale(.5)}70%{-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;-webkit-transform:scale(.7);transform:scale(.7)}90%{-webkit-transform:scale(.9);transform:scale(.9)}}.leBounceIn span{-webkit-animation-name:leBounceIn;animation-name:leBounceIn}@-webkit-keyframes leBounceIn{from{opacity:0}18%,33%,48%,to{-webkit-animation-timing-function:cubic-bezier(.9,.03,.69,.22);animation-timing-function:cubic-bezier(.9,.03,.69,.22)}18%{-webkit-transform:translate3d(0,27px,0);transform:translate3d(0,27px,0)}33%{-webkit-transform:translate3d(0,-12px,0);transform:translate3d(0,-12px,0)}48%{-webkit-transform:translate3d(0,8px,0);transform:translate3d(0,8px,0)}}@keyframes leBounceIn{from{opacity:0}18%,33%,48%,to{-webkit-animation-timing-function:cubic-bezier(.9,.03,.69,.22);animation-timing-function:cubic-bezier(.9,.03,.69,.22)}18%{-webkit-transform:translate3d(0,27px,0);transform:translate3d(0,27px,0)}33%{-webkit-transform:translate3d(0,-12px,0);transform:translate3d(0,-12px,0)}48%{-webkit-transform:translate3d(0,8px,0);transform:translate3d(0,8px,0)}}.leBounceOut span{-webkit-animation-name:leBounceOut;animation-name:leBounceOut}@-webkit-keyframes leBounceOut{18%,33%,48%,to{-webkit-animation-timing-function:cubic-bezier(.9,.03,.69,.22);animation-timing-function:cubic-bezier(.9,.03,.69,.22)}18%{-webkit-transform:translate3d(0,27px,0);transform:translate3d(0,27px,0)}33%{-webkit-transform:translate3d(0,-12px,0);transform:translate3d(0,-12px,0)}48%{-webkit-transform:translate3d(0,8px,0);transform:translate3d(0,8px,0)}100%{opacity:0}}@keyframes leBounceOut{18%,33%,48%,to{-webkit-animation-timing-function:cubic-bezier(.9,.03,.69,.22);animation-timing-function:cubic-bezier(.9,.03,.69,.22)}18%{-webkit-transform:translate3d(0,27px,0);transform:translate3d(0,27px,0)}33%{-webkit-transform:translate3d(0,-12px,0);transform:translate3d(0,-12px,0)}48%{-webkit-transform:translate3d(0,8px,0);transform:translate3d(0,8px,0)}100%{opacity:0}}.lePerspectiveOutTop span{-webkit-animation-name:lePerspectiveOutTop;animation-name:lePerspectiveOutTop;-webkit-transform:perspective(500px);transform:perspective(500px);-webkit-transform-style:preserve-3d;transform-style:preserve-3d}@-webkit-keyframes lePerspectiveOutTop{50%{opacity:1}to{-webkit-transform:perspective(500px) rotateX(90deg) translateY(-50px) translateZ(50px);transform:perspective(500px) rotateX(90deg) translateY(-50px) translateZ(50px);opacity:0}}@keyframes lePerspectiveOutTop{50%{opacity:1}to{-webkit-transform:perspective(500px) rotateX(90deg) translateY(-50px) translateZ(50px);transform:perspective(500px) rotateX(90deg) translateY(-50px) translateZ(50px);opacity:0}}.lePerspectiveOutBottom span{-webkit-animation-name:lePerspectiveOutBottom;animation-name:lePerspectiveOutBottom;-webkit-transform:perspective(500px);transform:perspective(500px);-webkit-transform-style:preserve-3d;transform-style:preserve-3d}@-webkit-keyframes lePerspectiveOutBottom{50%{opacity:1}to{-webkit-transform:perspective(500px) rotateX(90deg) translateY(50px) translateZ(-50px);transform:perspective(500px) rotateX(90deg) translateY(50px) translateZ(-50px);opacity:0}}@keyframes lePerspectiveOutBottom{50%{opacity:1}to{-webkit-transform:perspective(500px) rotateX(90deg) translateY(50px) translateZ(-50px);transform:perspective(500px) rotateX(90deg) translateY(50px) translateZ(-50px);opacity:0}}.leZoomIn span{-webkit-animation-name:leZoomIn;animation-name:leZoomIn}@-webkit-keyframes leZoomIn{from{-webkit-transform:scale(10);transform:scale(10);opacity:0}}@keyframes leZoomIn{from{-webkit-transform:scale(10);transform:scale(10);opacity:0}}.leZoomInLeft span{-webkit-animation-name:leZoomInLeft;animation-name:leZoomInLeft}@-webkit-keyframes leZoomInLeft{from{-webkit-transform:scale(10) translateX(-150%);transform:scale(10) translateX(-150%);opacity:0}}@keyframes leZoomInLeft{from{-webkit-transform:scale(10) translateX(-150%);transform:scale(10) translateX(-150%);opacity:0}}.leZoomInRight span{-webkit-animation-name:leZoomInRight;animation-name:leZoomInRight}@-webkit-keyframes leZoomInRight{from{-webkit-transform:scale(10) translateX(150%);transform:scale(10) translateX(150%);opacity:0}}@keyframes leZoomInRight{from{-webkit-transform:scale(10) translateX(150%);transform:scale(10) translateX(150%);opacity:0}}.leZoomInTop span{-webkit-animation-name:LetterZoomInTop;animation-name:LetterZoomInTop}@-webkit-keyframes LetterZoomInTop{from{-webkit-transform:scale(10) translateY(-50%);transform:scale(10) translateY(-50%);opacity:0}}@keyframes LetterZoomInTop{from{-webkit-transform:scale(10) translateY(-50%);transform:scale(10) translateY(-50%);opacity:0}}.leZoomInBottom span{-webkit-animation-name:LetterZoomInBottom;animation-name:LetterZoomInBottom}@-webkit-keyframes LetterZoomInBottom{from{-webkit-transform:scale(10) translateY(50%);transform:scale(10) translateY(50%);opacity:0}}@keyframes LetterZoomInBottom{from{-webkit-transform:scale(10) translateY(50%);transform:scale(10) translateY(50%);opacity:0}}.leZoomOut span{-webkit-animation-name:leZoomOut;animation-name:leZoomOut}@-webkit-keyframes leZoomOut{to{-webkit-transform:scale(10);transform:scale(10);opacity:0}}@keyframes leZoomOut{to{-webkit-transform:scale(10);transform:scale(10);opacity:0}}.leZoomOutLeft span{-webkit-animation-name:leZoomOutLeft;animation-name:leZoomOutLeft}@-webkit-keyframes leZoomOutLeft{to{-webkit-transform:scale(10) translateX(-150%);transform:scale(10) translateX(-150%);opacity:0}}@keyframes leZoomOutLeft{to{-webkit-transform:scale(10) translateX(-150%);transform:scale(10) translateX(-150%);opacity:0}}.leZoomOutRight span{-webkit-animation-name:leZoomOutRight;animation-name:leZoomOutRight}@-webkit-keyframes leZoomOutRight{to{-webkit-transform:scale(10) translateX(150%);transform:scale(10) translateX(150%);opacity:0}}@keyframes leZoomOutRight{to{-webkit-transform:scale(10) translateX(150%);transform:scale(10) translateX(150%);opacity:0}}.leZoomOutTop span{-webkit-animation-name:leZoomOutTop;animation-name:leZoomOutTop}@-webkit-keyframes leZoomOutTop{to{-webkit-transform:scale(10) translateY(-50%);transform:scale(10) translateY(-50%);opacity:0}}@keyframes leZoomOutTop{to{-webkit-transform:scale(10) translateY(-50%);transform:scale(10) translateY(-50%);opacity:0}}.leZoomOutBottom span{-webkit-animation-name:leZoomOutBottom;animation-name:leZoomOutBottom}@-webkit-keyframes leZoomOutBottom{to{-webkit-transform:scale(10) translateY(50%);transform:scale(10) translateY(50%);opacity:0}}@keyframes leZoomOutBottom{to{-webkit-transform:scale(10) translateY(50%);transform:scale(10) translateY(50%);opacity:0}}.leDanceInTop span{-webkit-animation-name:leDanceInTop;animation-name:leDanceInTop;-webkit-transform-origin:top;transform-origin:top}@-webkit-keyframes leDanceInTop{from{opacity:0}16%{-webkit-transform:skew(-14deg);transform:skew(-14deg)}33%{-webkit-transform:skew(12deg);transform:skew(12deg)}49%{-webkit-transform:skew(-8deg);transform:skew(-8deg)}66%{-webkit-transform:skew(6deg);transform:skew(6deg)}83%{-webkit-transform:skew(-4deg);transform:skew(-4deg)}}@keyframes leDanceInTop{from{opacity:0}16%{-webkit-transform:skew(-14deg);transform:skew(-14deg)}33%{-webkit-transform:skew(12deg);transform:skew(12deg)}49%{-webkit-transform:skew(-8deg);transform:skew(-8deg)}66%{-webkit-transform:skew(6deg);transform:skew(6deg)}83%{-webkit-transform:skew(-4deg);transform:skew(-4deg)}}.leDanceInMiddle span{-webkit-animation-name:leDanceInMiddle;animation-name:leDanceInMiddle}@-webkit-keyframes leDanceInMiddle{from{opacity:0}16%{-webkit-transform:skew(-14deg);transform:skew(-14deg)}33%{-webkit-transform:skew(12deg);transform:skew(12deg)}49%{-webkit-transform:skew(-8deg);transform:skew(-8deg)}66%{-webkit-transform:skew(6deg);transform:skew(6deg)}83%{-webkit-transform:skew(-4deg);transform:skew(-4deg)}}@keyframes leDanceInMiddle{from{opacity:0}16%{-webkit-transform:skew(-14deg);transform:skew(-14deg)}33%{-webkit-transform:skew(12deg);transform:skew(12deg)}49%{-webkit-transform:skew(-8deg);transform:skew(-8deg)}66%{-webkit-transform:skew(6deg);transform:skew(6deg)}83%{-webkit-transform:skew(-4deg);transform:skew(-4deg)}}.leDanceInBottom span{-webkit-animation-name:leDanceInBottom;animation-name:leDanceInBottom;-webkit-transform-origin:bottom;transform-origin:bottom}@-webkit-keyframes leDanceInBottom{from{opacity:0}16%{-webkit-transform:skew(-14deg);transform:skew(-14deg)}33%{-webkit-transform:skew(12deg);transform:skew(12deg)}49%{-webkit-transform:skew(-8deg);transform:skew(-8deg)}66%{-webkit-transform:skew(6deg);transform:skew(6deg)}83%{-webkit-transform:skew(-4deg);transform:skew(-4deg)}}@keyframes leDanceInBottom{from{opacity:0}16%{-webkit-transform:skew(-14deg);transform:skew(-14deg)}33%{-webkit-transform:skew(12deg);transform:skew(12deg)}49%{-webkit-transform:skew(-8deg);transform:skew(-8deg)}66%{-webkit-transform:skew(6deg);transform:skew(6deg)}83%{-webkit-transform:skew(-4deg);transform:skew(-4deg)}}.leDanceOutTop span{-webkit-animation-name:leDanceOutTop;animation-name:leDanceOutTop;-webkit-transform-origin:top;transform-origin:top}@-webkit-keyframes leDanceOutTop{16%{-webkit-transform:skew(-14deg);transform:skew(-14deg)}33%{-webkit-transform:skew(12deg);transform:skew(12deg)}49%{-webkit-transform:skew(-8deg);transform:skew(-8deg)}66%{-webkit-transform:skew(6deg);transform:skew(6deg)}83%{-webkit-transform:skew(-4deg);transform:skew(-4deg)}to{opacity:0}}@keyframes leDanceOutTop{16%{-webkit-transform:skew(-14deg);transform:skew(-14deg)}33%{-webkit-transform:skew(12deg);transform:skew(12deg)}49%{-webkit-transform:skew(-8deg);transform:skew(-8deg)}66%{-webkit-transform:skew(6deg);transform:skew(6deg)}83%{-webkit-transform:skew(-4deg);transform:skew(-4deg)}to{opacity:0}}.leDanceOutMiddle span{-webkit-animation-name:leDanceOutMiddle;animation-name:leDanceOutMiddle}@-webkit-keyframes leDanceOutMiddle{16%{-webkit-transform:skew(-14deg);transform:skew(-14deg)}33%{-webkit-transform:skew(12deg);transform:skew(12deg)}49%{-webkit-transform:skew(-8deg);transform:skew(-8deg)}66%{-webkit-transform:skew(6deg);transform:skew(6deg)}83%{-webkit-transform:skew(-4deg);transform:skew(-4deg)}to{opacity:0}}@keyframes leDanceOutMiddle{16%{-webkit-transform:skew(-14deg);transform:skew(-14deg)}33%{-webkit-transform:skew(12deg);transform:skew(12deg)}49%{-webkit-transform:skew(-8deg);transform:skew(-8deg)}66%{-webkit-transform:skew(6deg);transform:skew(6deg)}83%{-webkit-transform:skew(-4deg);transform:skew(-4deg)}to{opacity:0}}.leDanceOutBottom span{-webkit-animation-name:leDanceOutBottom;animation-name:leDanceOutBottom;-webkit-transform-origin:bottom;transform-origin:bottom}@-webkit-keyframes leDanceOutBottom{16%{-webkit-transform:skew(-14deg);transform:skew(-14deg)}33%{-webkit-transform:skew(12deg);transform:skew(12deg)}49%{-webkit-transform:skew(-8deg);transform:skew(-8deg)}66%{-webkit-transform:skew(6deg);transform:skew(6deg)}83%{-webkit-transform:skew(-4deg);transform:skew(-4deg)}to{opacity:0}}@keyframes leDanceOutBottom{16%{-webkit-transform:skew(-14deg);transform:skew(-14deg)}33%{-webkit-transform:skew(12deg);transform:skew(12deg)}49%{-webkit-transform:skew(-8deg);transform:skew(-8deg)}66%{-webkit-transform:skew(6deg);transform:skew(6deg)}83%{-webkit-transform:skew(-4deg);transform:skew(-4deg)}to{opacity:0}}.fadeIn{-webkit-animation-name:fadeIn;animation-name:fadeIn}@-webkit-keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes fadeIn{from{opacity:0}to{opacity:1}}.fadeInLeft{-webkit-animation-name:fadeInLeft;animation-name:fadeInLeft}@-webkit-keyframes fadeInLeft{from{opacity:0;-webkit-transform:translateX(-100%);transform:translateX(-100%)}to{opacity:1}}@keyframes fadeInLeft{from{opacity:0;-webkit-transform:translateX(-100%);transform:translateX(-100%)}to{opacity:1}}.fadeInRight{-webkit-animation-name:fadeInRight;animation-name:fadeInRight}@-webkit-keyframes fadeInRight{from{opacity:0;-webkit-transform:translateX(100%);transform:translateX(100%)}to{opacity:1}}@keyframes fadeInRight{from{opacity:0;-webkit-transform:translateX(100%);transform:translateX(100%)}to{opacity:1}}.fadeInTop{-webkit-animation-name:fadeInTop;animation-name:fadeInTop}@-webkit-keyframes fadeInTop{from{opacity:0;-webkit-transform:translateY(-100%);transform:translateY(-100%)}to{opacity:1}}@keyframes fadeInTop{from{opacity:0;-webkit-transform:translateY(-100%);transform:translateY(-100%)}to{opacity:1}}.fadeInBottom{-webkit-animation-name:fadeInBottom;animation-name:fadeInBottom}@-webkit-keyframes fadeInBottom{from{opacity:0;-webkit-transform:translateY(100%);transform:translateY(100%)}to{opacity:1}}@keyframes fadeInBottom{from{opacity:0;-webkit-transform:translateY(100%);transform:translateY(100%)}to{opacity:1}}.fadeOut{-webkit-animation-name:fadeOut;animation-name:fadeOut}@-webkit-keyframes fadeOut{to{opacity:0}}@keyframes fadeOut{to{opacity:0}}.fadeOutLeft{-webkit-animation-name:fadeOutLeft;animation-name:fadeOutLeft}@-webkit-keyframes fadeOutLeft{from{opacity:1}to{opacity:0;-webkit-transform:translateX(-100%);transform:translateX(-100%)}}@keyframes fadeOutLeft{from{opacity:1}to{opacity:0;-webkit-transform:translateX(-100%);transform:translateX(-100%)}}.fadeOutRight{-webkit-animation-name:fadeOutRight;animation-name:fadeOutRight}@-webkit-keyframes fadeOutRight{from{opacity:1}to{opacity:0;-webkit-transform:translateX(100%);transform:translateX(100%)}}@keyframes fadeOutRight{from{opacity:1}to{opacity:0;-webkit-transform:translateX(100%);transform:translateX(100%)}}.fadeOutTop{-webkit-animation-name:fadeOutTop;animation-name:fadeOutTop}@-webkit-keyframes fadeOutTop{from{opacity:1}to{opacity:0;-webkit-transform:translateY(-100%);transform:translateY(-100%)}}@keyframes fadeOutTop{from{opacity:1}to{opacity:0;-webkit-transform:translateY(-100%);transform:translateY(-100%)}}.fadeOutBottom{-webkit-animation-name:fadeOutBottom;animation-name:fadeOutBottom}@-webkit-keyframes fadeOutBottom{from{opacity:1}to{opacity:0;-webkit-transform:translateY(100%);transform:translateY(100%)}}@keyframes fadeOutBottom{from{opacity:1}to{opacity:0;-webkit-transform:translateY(100%);transform:translateY(100%)}}.moveFromLeft{-webkit-animation-name:moveFromLeft;animation-name:moveFromLeft}@-webkit-keyframes moveFromLeft{from{-webkit-transform:translateX(-100%);transform:translateX(-100%)}}@keyframes moveFromLeft{from{-webkit-transform:translateX(-100%);transform:translateX(-100%)}}.moveFromRight{-webkit-animation-name:moveFromRight;animation-name:moveFromRight}@-webkit-keyframes moveFromRight{from{-webkit-transform:translateX(100%);transform:translateX(100%)}}@keyframes moveFromRight{from{-webkit-transform:translateX(100%);transform:translateX(100%)}}.moveFromTop{-webkit-animation-name:moveFromTop;animation-name:moveFromTop}@-webkit-keyframes moveFromTop{from{-webkit-transform:translateY(-100%);transform:translateY(-100%)}}@keyframes moveFromTop{from{-webkit-transform:translateY(-100%);transform:translateY(-100%)}}.moveFromBottom{-webkit-animation-name:moveFromBottom;animation-name:moveFromBottom}@-webkit-keyframes moveFromBottom{from{-webkit-transform:translateY(100%);transform:translateY(100%)}}@keyframes moveFromBottom{from{-webkit-transform:translateY(100%);transform:translateY(100%)}}.moveToLeft{-webkit-animation-name:moveToLeft;animation-name:moveToLeft}@-webkit-keyframes moveToLeft{to{-webkit-transform:translateX(-100%);transform:translateX(-100%)}}@keyframes moveToLeft{to{-webkit-transform:translateX(-100%);transform:translateX(-100%)}}.moveToRight{-webkit-animation-name:moveToRight;animation-name:moveToRight}@-webkit-keyframes moveToRight{to{-webkit-transform:translateX(100%);transform:translateX(100%)}}@keyframes moveToRight{to{-webkit-transform:translateX(100%);transform:translateX(100%)}}.moveToTop{-webkit-animation-name:moveToTop;animation-name:moveToTop}@-webkit-keyframes moveToTop{to{-webkit-transform:translateY(-100%);transform:translateY(-100%)}}@keyframes moveToTop{to{-webkit-transform:translateY(-100%);transform:translateY(-100%)}}.moveToBottom{-webkit-animation-name:moveToBottom;animation-name:moveToBottom}@-webkit-keyframes moveToBottom{to{-webkit-transform:translateY(100%);transform:translateY(100%)}}@keyframes moveToBottom{to{-webkit-transform:translateY(100%);transform:translateY(100%)}}.doorCloseFromLeft{-webkit-animation-name:doorCloseFromLeft;animation-name:doorCloseFromLeft}@-webkit-keyframes doorCloseFromLeft{from,to{-webkit-transform-origin:left;transform-origin:left}from{-webkit-transform:perspective(400px) rotateY(90deg);transform:perspective(400px) rotateY(90deg);opacity:0}50%{opacity:1}}@keyframes doorCloseFromLeft{from,to{-webkit-transform-origin:left;transform-origin:left}from{-webkit-transform:perspective(400px) rotateY(90deg);transform:perspective(400px) rotateY(90deg);opacity:0}50%{opacity:1}}.doorOpenFromRight{-webkit-animation-name:doorOpenFromRight;animation-name:doorOpenFromRight}@-webkit-keyframes doorOpenFromRight{from,to{-webkit-transform-origin:left;transform-origin:left}to{-webkit-transform:perspective(400px) rotateY(90deg);transform:perspective(400px) rotateY(90deg);opacity:0}}@keyframes doorOpenFromRight{from,to{-webkit-transform-origin:left;transform-origin:left}to{-webkit-transform:perspective(400px) rotateY(90deg);transform:perspective(400px) rotateY(90deg);opacity:0}}.doorCloseFromRight{-webkit-animation-name:doorCloseFromRight;animation-name:doorCloseFromRight}@-webkit-keyframes doorCloseFromRight{from,to{-webkit-transform-origin:right;transform-origin:right}from{-webkit-transform:perspective(400px) rotateY(-90deg);transform:perspective(400px) rotateY(-90deg);opacity:0}50%{opacity:1}}@keyframes doorCloseFromRight{from,to{-webkit-transform-origin:right;transform-origin:right}from{-webkit-transform:perspective(400px) rotateY(-90deg);transform:perspective(400px) rotateY(-90deg);opacity:0}50%{opacity:1}}.doorOpenFromLeft{-webkit-animation-name:doorOpenFromLeft;animation-name:doorOpenFromLeft}@-webkit-keyframes doorOpenFromLeft{from,to{-webkit-transform-origin:right;transform-origin:right}to{-webkit-transform:perspective(400px) rotateY(-90deg);transform:perspective(400px) rotateY(-90deg);opacity:0}}@keyframes doorOpenFromLeft{from,to{-webkit-transform-origin:right;transform-origin:right}to{-webkit-transform:perspective(400px) rotateY(-90deg);transform:perspective(400px) rotateY(-90deg);opacity:0}}.heartbeat{-webkit-animation-name:heartbeat;animation-name:heartbeat;animation-iteration-count:infinite;-webkit-animation-duration:.5s;animation-duration:.5s}@-webkit-keyframes heartbeat{35%,65%{-webkit-transform:scale(1.2);transform:scale(1.2)}}@keyframes heartbeat{35%,65%{-webkit-transform:scale(1.2);transform:scale(1.2)}}.heartbeat2{-webkit-animation-name:heartbeat2;animation-name:heartbeat2;animation-iteration-count:infinite}.horizontalShake,.pulseShake{-webkit-animation-iteration-count:infinite}@-webkit-keyframes heartbeat2{14%,42%{-webkit-transform:scale(1.3);transform:scale(1.3)}28%,70%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes heartbeat2{14%,42%{-webkit-transform:scale(1.3);transform:scale(1.3)}28%,70%{-webkit-transform:scale(1);transform:scale(1)}}.hangOnLeft{-webkit-animation-name:hangOnLeft;animation-name:hangOnLeft}@-webkit-keyframes hangOnLeft{from{-webkit-transform-origin:left;transform-origin:left}40%{-webkit-transform:rotate(100deg);transform:rotate(100deg);-webkit-transform-origin:left;transform-origin:left}55%{-webkit-transform:rotate(80deg);transform:rotate(80deg);-webkit-transform-origin:left;transform-origin:left}70%{-webkit-transform:rotate(95deg);transform:rotate(95deg);-webkit-transform-origin:left;transform-origin:left}85%{-webkit-transform:rotate(85deg);transform:rotate(85deg);-webkit-transform-origin:left;transform-origin:left}100%{-webkit-transform:rotate(90deg);transform:rotate(90deg);-webkit-transform-origin:left;transform-origin:left}}@keyframes hangOnLeft{from{-webkit-transform-origin:left;transform-origin:left}40%{-webkit-transform:rotate(100deg);transform:rotate(100deg);-webkit-transform-origin:left;transform-origin:left}55%{-webkit-transform:rotate(80deg);transform:rotate(80deg);-webkit-transform-origin:left;transform-origin:left}70%{-webkit-transform:rotate(95deg);transform:rotate(95deg);-webkit-transform-origin:left;transform-origin:left}85%{-webkit-transform:rotate(85deg);transform:rotate(85deg);-webkit-transform-origin:left;transform-origin:left}100%{-webkit-transform:rotate(90deg);transform:rotate(90deg);-webkit-transform-origin:left;transform-origin:left}}.hangOnRight{-webkit-animation-name:hangOnRight;animation-name:hangOnRight}@-webkit-keyframes hangOnRight{from{-webkit-transform-origin:right;transform-origin:right}40%{-webkit-transform:rotate(-100deg);transform:rotate(-100deg);-webkit-transform-origin:right;transform-origin:right}55%{-webkit-transform:rotate(-80deg);transform:rotate(-80deg);-webkit-transform-origin:right;transform-origin:right}70%{-webkit-transform:rotate(-95deg);transform:rotate(-95deg);-webkit-transform-origin:right;transform-origin:right}85%{-webkit-transform:rotate(-85deg);transform:rotate(-85deg);-webkit-transform-origin:right;transform-origin:right}100%{-webkit-transform:rotate(-90deg);transform:rotate(-90deg);-webkit-transform-origin:right;transform-origin:right}}@keyframes hangOnRight{from{-webkit-transform-origin:right;transform-origin:right}40%{-webkit-transform:rotate(-100deg);transform:rotate(-100deg);-webkit-transform-origin:right;transform-origin:right}55%{-webkit-transform:rotate(-80deg);transform:rotate(-80deg);-webkit-transform-origin:right;transform-origin:right}70%{-webkit-transform:rotate(-95deg);transform:rotate(-95deg);-webkit-transform-origin:right;transform-origin:right}85%{-webkit-transform:rotate(-85deg);transform:rotate(-85deg);-webkit-transform-origin:right;transform-origin:right}100%{-webkit-transform:rotate(-90deg);transform:rotate(-90deg);-webkit-transform-origin:right;transform-origin:right}}.hangAndDropLeft{-webkit-animation-name:hangAndDropLeft;animation-name:hangAndDropLeft}@-webkit-keyframes hangAndDropLeft{from{-webkit-transform-origin:left;transform-origin:left}50%{-webkit-transform:rotate(100deg);transform:rotate(100deg);-webkit-transform-origin:left;transform-origin:left}60%{-webkit-transform:rotate(90deg);transform:rotate(90deg);-webkit-transform-origin:left;transform-origin:left}to{-webkit-transform:translateY(300px) rotate(70deg);transform:translateY(300px) rotate(70deg);-webkit-transform-origin:left;transform-origin:left}}@keyframes hangAndDropLeft{from{-webkit-transform-origin:left;transform-origin:left}50%{-webkit-transform:rotate(100deg);transform:rotate(100deg);-webkit-transform-origin:left;transform-origin:left}60%{-webkit-transform:rotate(90deg);transform:rotate(90deg);-webkit-transform-origin:left;transform-origin:left}to{-webkit-transform:translateY(300px) rotate(70deg);transform:translateY(300px) rotate(70deg);-webkit-transform-origin:left;transform-origin:left}}.hangAndDropRight{-webkit-animation-name:hangAndDropRight;animation-name:hangAndDropRight}@-webkit-keyframes hangAndDropRight{from{-webkit-transform-origin:right;transform-origin:right}50%{-webkit-transform:rotate(-100deg);transform:rotate(-100deg);-webkit-transform-origin:right;transform-origin:right}60%{-webkit-transform:rotate(-90deg);transform:rotate(-90deg);-webkit-transform-origin:right;transform-origin:right}to{-webkit-transform:translateY(300px) rotate(-70deg);transform:translateY(300px) rotate(-70deg);-webkit-transform-origin:right;transform-origin:right}}@keyframes hangAndDropRight{from{-webkit-transform-origin:right;transform-origin:right}50%{-webkit-transform:rotate(-100deg);transform:rotate(-100deg);-webkit-transform-origin:right;transform-origin:right}60%{-webkit-transform:rotate(-90deg);transform:rotate(-90deg);-webkit-transform-origin:right;transform-origin:right}to{-webkit-transform:translateY(300px) rotate(-70deg);transform:translateY(300px) rotate(-70deg);-webkit-transform-origin:right;transform-origin:right}}.pulseShake{-webkit-animation-name:pulseShake;animation-name:pulseShake;animation-iteration-count:infinite}@-webkit-keyframes pulseShake{90%{-webkit-transform:scale(1);transform:scale(1)}92%{-webkit-transform:scale(1.2);transform:scale(1.2)}96%{-webkit-transform:scale(1,1);transform:scale(1,1)}98%{-webkit-transform:scale(1.1);transform:scale(1.1)}}@keyframes pulseShake{90%{-webkit-transform:scale(1);transform:scale(1)}92%{-webkit-transform:scale(1.2);transform:scale(1.2)}96%{-webkit-transform:scale(1,1);transform:scale(1,1)}98%{-webkit-transform:scale(1.1);transform:scale(1.1)}}.horizontalShake{-webkit-animation-name:horizontalShake;animation-name:horizontalShake;animation-iteration-count:infinite}.madMax,.verticalShake{-webkit-animation-iteration-count:infinite}@-webkit-keyframes horizontalShake{12%,21%,3%,30%,39%,48%,57%,65%,74%,83%,92%{-webkit-transform:translateX(5px);transform:translateX(5px)}15%,24%,33%,42%,51%,6%,60%,68%,77%,86%,95%{-webkit-transform:translateX(3px);transform:translateX(3px)}18%,27%,36%,45%,54%,63%,71%,80%,89%,9%,98%{-webkit-transform:translateX(-5px);transform:translateX(-5px)}}@keyframes horizontalShake{12%,21%,3%,30%,39%,48%,57%,65%,74%,83%,92%{-webkit-transform:translateX(5px);transform:translateX(5px)}15%,24%,33%,42%,51%,6%,60%,68%,77%,86%,95%{-webkit-transform:translateX(3px);transform:translateX(3px)}18%,27%,36%,45%,54%,63%,71%,80%,89%,9%,98%{-webkit-transform:translateX(-5px);transform:translateX(-5px)}}.verticalShake{-webkit-animation-name:verticalShake;animation-name:verticalShake;animation-iteration-count:infinite}@-webkit-keyframes verticalShake{12%,21%,3%,30%,39%,48%,57%,65%,74%,83%,92%{-webkit-transform:translateY(5px);transform:translateY(5px)}15%,24%,33%,42%,51%,6%,60%,68%,77%,86%,95%{-webkit-transform:translateY(3px);transform:translateY(3px)}18%,27%,36%,45%,54%,63%,71%,80%,89%,9%,98%{-webkit-transform:translateY(-5px);transform:translateY(-5px)}}@keyframes verticalShake{12%,21%,3%,30%,39%,48%,57%,65%,74%,83%,92%{-webkit-transform:translateY(5px);transform:translateY(5px)}15%,24%,33%,42%,51%,6%,60%,68%,77%,86%,95%{-webkit-transform:translateY(3px);transform:translateY(3px)}18%,27%,36%,45%,54%,63%,71%,80%,89%,9%,98%{-webkit-transform:translateY(-5px);transform:translateY(-5px)}}.madMax{-webkit-animation-name:madMax;animation-name:madMax;animation-iteration-count:infinite}.coolHorizontalShake,.coolVerticalShake{-webkit-animation-iteration-count:infinite}@-webkit-keyframes madMax{12%,21%,3%,30%,39%,48%,57%,65%,74%,83%,92%{-webkit-transform:translateY(5px) scale(1.1);transform:translateY(5px) scale(1.1)}15%,24%,33%,42%,51%,6%,60%,68%,77%,86%,95%{-webkit-transform:translateY(3px) scale(.8);transform:translateY(3px) scale(.8)}18%,27%,36%,45%,54%,63%,71%,80%,89%,9%,98%{-webkit-transform:translateY(-5px) scale(1.1);transform:translateY(-5px) scale(1.1)}}@keyframes madMax{12%,21%,3%,30%,39%,48%,57%,65%,74%,83%,92%{-webkit-transform:translateY(5px) scale(1.1);transform:translateY(5px) scale(1.1)}15%,24%,33%,42%,51%,6%,60%,68%,77%,86%,95%{-webkit-transform:translateY(3px) scale(.8);transform:translateY(3px) scale(.8)}18%,27%,36%,45%,54%,63%,71%,80%,89%,9%,98%{-webkit-transform:translateY(-5px) scale(1.1);transform:translateY(-5px) scale(1.1)}}.coolHorizontalShake{-webkit-animation-name:coolHorizontalShake;animation-name:coolHorizontalShake;animation-iteration-count:infinite}@-webkit-keyframes coolHorizontalShake{21%,3%,39%,57%,74%,92%{-webkit-transform:translateX(5px);transform:translateX(5px)}24%,42%,6%,60%,77%,95%{-webkit-transform:translateX(3px);transform:translateX(3px)}27%,45%,63%,80%,9%,98%{-webkit-transform:translateX(-5px);transform:translateX(-5px)}}@keyframes coolHorizontalShake{21%,3%,39%,57%,74%,92%{-webkit-transform:translateX(5px);transform:translateX(5px)}24%,42%,6%,60%,77%,95%{-webkit-transform:translateX(3px);transform:translateX(3px)}27%,45%,63%,80%,9%,98%{-webkit-transform:translateX(-5px);transform:translateX(-5px)}}.coolVerticalShake{-webkit-animation-name:coolVerticalShake;animation-name:coolVerticalShake;animation-iteration-count:infinite}@-webkit-keyframes coolVerticalShake{21%,3%,39%,57%,74%,92%{-webkit-transform:translateY(5px);transform:translateY(5px)}24%,42%,6%,60%,77%,95%{-webkit-transform:translateY(3px);transform:translateY(3px)}27%,45%,63%,80%,9%,98%{-webkit-transform:translateY(-5px);transform:translateY(-5px)}}@keyframes coolVerticalShake{21%,3%,39%,57%,74%,92%{-webkit-transform:translateY(5px);transform:translateY(5px)}24%,42%,6%,60%,77%,95%{-webkit-transform:translateY(3px);transform:translateY(3px)}27%,45%,63%,80%,9%,98%{-webkit-transform:translateY(-5px);transform:translateY(-5px)}}.quietMad{-webkit-animation-name:quietMad;animation-name:quietMad;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}@-webkit-keyframes quietMad{21%,3%,39%,57%,74%,92%{-webkit-transform:translateY(5px) scale(1.1);transform:translateY(5px) scale(1.1)}24%,42%,6%,60%,77%,95%{-webkit-transform:translateY(3px) scale(.8);transform:translateY(3px) scale(.8)}27%,45%,63%,80%,9%,98%{-webkit-transform:translateY(-5px) scale(1.1);transform:translateY(-5px) scale(1.1)}}@keyframes quietMad{21%,3%,39%,57%,74%,92%{-webkit-transform:translateY(5px) scale(1.1);transform:translateY(5px) scale(1.1)}24%,42%,6%,60%,77%,95%{-webkit-transform:translateY(3px) scale(.8);transform:translateY(3px) scale(.8)}27%,45%,63%,80%,9%,98%{-webkit-transform:translateY(-5px) scale(1.1);transform:translateY(-5px) scale(1.1)}}.vibration{-webkit-animation:vibration .1s linear infinite;animation:vibration .1s linear infinite}@-webkit-keyframes vibration{50%{-webkit-transform:skewY(1deg) skewX(-1deg) scale(1.06);transform:skewY(1deg) skewX(-1deg) scale(1.06)}}@keyframes vibration{50%{-webkit-transform:skewY(1deg) skewX(-1deg) scale(1.06);transform:skewY(1deg) skewX(-1deg) scale(1.06)}}.pushReleaseFrom{-webkit-animation-name:pushReleaseFrom;animation-name:pushReleaseFrom}@-webkit-keyframes pushReleaseFrom{from{-webkit-transform:scale(3,3);transform:scale(3,3);opacity:0}30%{-webkit-transform:scale(.5,.5);transform:scale(.5,.5)}}@keyframes pushReleaseFrom{from{-webkit-transform:scale(3,3);transform:scale(3,3);opacity:0}30%{-webkit-transform:scale(.5,.5);transform:scale(.5,.5)}}.pushReleaseFromLeft{-webkit-animation-name:pushReleaseFromLeft;animation-name:pushReleaseFromLeft}@-webkit-keyframes pushReleaseFromLeft{from{-webkit-transform:translateX(-100%);transform:translateX(-100%)}30%{-webkit-transform:translateX(100px);transform:translateX(100px)}}@keyframes pushReleaseFromLeft{from{-webkit-transform:translateX(-100%);transform:translateX(-100%)}30%{-webkit-transform:translateX(100px);transform:translateX(100px)}}.pushReleaseFromRight{-webkit-animation-name:pushReleaseFromRight;animation-name:pushReleaseFromRight}@-webkit-keyframes pushReleaseFromRight{from{-webkit-transform:translateX(100%);transform:translateX(100%)}30%{-webkit-transform:translateX(-100px);transform:translateX(-100px)}}@keyframes pushReleaseFromRight{from{-webkit-transform:translateX(100%);transform:translateX(100%)}30%{-webkit-transform:translateX(-100px);transform:translateX(-100px)}}.pushReleaseFromTop{-webkit-animation-name:pushReleaseFromTop;animation-name:pushReleaseFromTop}@-webkit-keyframes pushReleaseFromTop{from{-webkit-transform:translateY(-100%);transform:translateY(-100%)}30%{-webkit-transform:translateY(100px);transform:translateY(100px)}}@keyframes pushReleaseFromTop{from{-webkit-transform:translateY(-100%);transform:translateY(-100%)}30%{-webkit-transform:translateY(100px);transform:translateY(100px)}}.pushReleaseFromBottom{-webkit-animation-name:pushReleaseFromBottom;animation-name:pushReleaseFromBottom}@-webkit-keyframes pushReleaseFromBottom{from{-webkit-transform:translateY(100%);transform:translateY(100%)}30%{-webkit-transform:translateY(-100px);transform:translateY(-100px)}}@keyframes pushReleaseFromBottom{from{-webkit-transform:translateY(100%);transform:translateY(100%)}30%{-webkit-transform:translateY(-100px);transform:translateY(-100px)}}.pushReleaseTo{-webkit-animation-name:pushReleaseTo;animation-name:pushReleaseTo}@-webkit-keyframes pushReleaseTo{30%{-webkit-transform:scale(.5,.5);transform:scale(.5,.5)}to{-webkit-transform:scale(5,5);transform:scale(5,5);opacity:0}}@keyframes pushReleaseTo{30%{-webkit-transform:scale(.5,.5);transform:scale(.5,.5)}to{-webkit-transform:scale(5,5);transform:scale(5,5);opacity:0}}.pushReleaseToLeft{-webkit-animation-name:pushReleaseToLeft;animation-name:pushReleaseToLeft}@-webkit-keyframes pushReleaseToLeft{30%{-webkit-transform:translateX(100px);transform:translateX(100px)}to{-webkit-transform:translateX(-100%);transform:translateX(-100%)}}@keyframes pushReleaseToLeft{30%{-webkit-transform:translateX(100px);transform:translateX(100px)}to{-webkit-transform:translateX(-100%);transform:translateX(-100%)}}.pushReleaseToRight{-webkit-animation-name:pushReleaseToRight;animation-name:pushReleaseToRight}@-webkit-keyframes pushReleaseToRight{30%{-webkit-transform:translateX(-100px);transform:translateX(-100px)}to{-webkit-transform:translateX(100%);transform:translateX(100%)}}@keyframes pushReleaseToRight{30%{-webkit-transform:translateX(-100px);transform:translateX(-100px)}to{-webkit-transform:translateX(100%);transform:translateX(100%)}}.pushReleaseToTop{-webkit-animation-name:pushReleaseToTop;animation-name:pushReleaseToTop}@-webkit-keyframes pushReleaseToTop{30%{-webkit-transform:translateY(100px);transform:translateY(100px)}to{-webkit-transform:translateY(-100%);transform:translateY(-100%)}}@keyframes pushReleaseToTop{30%{-webkit-transform:translateY(100px);transform:translateY(100px)}to{-webkit-transform:translateY(-100%);transform:translateY(-100%)}}.pushReleaseToBottom{-webkit-animation-name:pushReleaseToBottom;animation-name:pushReleaseToBottom}@-webkit-keyframes pushReleaseToBottom{30%{-webkit-transform:translateY(-100px);transform:translateY(-100px)}to{-webkit-transform:translateY(100%);transform:translateY(100%)}}@keyframes pushReleaseToBottom{30%{-webkit-transform:translateY(-100px);transform:translateY(-100px)}to{-webkit-transform:translateY(100%);transform:translateY(100%)}}.flipX{-webkit-animation-name:flipX;animation-name:flipX}@-webkit-keyframes flipX{40%{-webkit-transform:perspective(600px) rotateX(-180deg);transform:perspective(600px) rotateX(-180deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}80%{-webkit-transform:perspective(600px) rotateX(0);transform:perspective(600px) rotateX(0);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}@keyframes flipX{40%{-webkit-transform:perspective(600px) rotateX(-180deg);transform:perspective(600px) rotateX(-180deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}80%{-webkit-transform:perspective(600px) rotateX(0);transform:perspective(600px) rotateX(0);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}.flipXZoomIn{-webkit-animation-name:flipXZoomIn;animation-name:flipXZoomIn}@-webkit-keyframes flipXZoomIn{40%{-webkit-transform:perspective(600px) rotateX(-180deg) scale(1.8);transform:perspective(600px) rotateX(-180deg) scale(1.8);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}80%{-webkit-transform:perspective(600px) rotateX(0) scale(.8);transform:perspective(600px) rotateX(0) scale(.8);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}95%,to{-webkit-transform:perspective(600px);transform:perspective(600px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}}@keyframes flipXZoomIn{40%{-webkit-transform:perspective(600px) rotateX(-180deg) scale(1.8);transform:perspective(600px) rotateX(-180deg) scale(1.8);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}80%{-webkit-transform:perspective(600px) rotateX(0) scale(.8);transform:perspective(600px) rotateX(0) scale(.8);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}95%,to{-webkit-transform:perspective(600px);transform:perspective(600px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}}.flipXZoomOut{-webkit-animation-name:flipXZoomOut;animation-name:flipXZoomOut}@-webkit-keyframes flipXZoomOut{40%{-webkit-transform:perspective(600px) rotateX(-180deg) scale(.8);transform:perspective(600px) rotateX(-180deg) scale(.8);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}80%{-webkit-transform:perspective(600px) rotateX(0) scale(1.8);transform:perspective(600px) rotateX(0) scale(1.8);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}95%,to{-webkit-transform:perspective(600px);transform:perspective(600px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}}@keyframes flipXZoomOut{40%{-webkit-transform:perspective(600px) rotateX(-180deg) scale(.8);transform:perspective(600px) rotateX(-180deg) scale(.8);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}80%{-webkit-transform:perspective(600px) rotateX(0) scale(1.8);transform:perspective(600px) rotateX(0) scale(1.8);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}95%,to{-webkit-transform:perspective(600px);transform:perspective(600px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}}.flipY{-webkit-animation-name:flipY;animation-name:flipY}@-webkit-keyframes flipY{40%{-webkit-transform:perspective(600px) rotateY(-180deg);transform:perspective(600px) rotateY(-180deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}80%{-webkit-transform:perspective(600px) rotateY(0);transform:perspective(600px) rotateY(0);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}@keyframes flipY{40%{-webkit-transform:perspective(600px) rotateY(-180deg);transform:perspective(600px) rotateY(-180deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}80%{-webkit-transform:perspective(600px) rotateY(0);transform:perspective(600px) rotateY(0);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}.flipYZoomIn{-webkit-animation-name:flipYZoomIn;animation-name:flipYZoomIn}@-webkit-keyframes flipYZoomIn{40%{-webkit-transform:perspective(600px) rotateY(-180deg) scale(1.8);transform:perspective(600px) rotateY(-180deg) scale(1.8);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}80%{-webkit-transform:perspective(600px) rotateY(0) scale(.8);transform:perspective(600px) rotateY(0) scale(.8);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}95%,to{-webkit-transform:perspective(600px);transform:perspective(600px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}}@keyframes flipYZoomIn{40%{-webkit-transform:perspective(600px) rotateY(-180deg) scale(1.8);transform:perspective(600px) rotateY(-180deg) scale(1.8);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}80%{-webkit-transform:perspective(600px) rotateY(0) scale(.8);transform:perspective(600px) rotateY(0) scale(.8);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}95%,to{-webkit-transform:perspective(600px);transform:perspective(600px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}}.flipYZoomOut{-webkit-animation-name:flipYZoomOut;animation-name:flipYZoomOut}@-webkit-keyframes flipYZoomOut{40%{-webkit-transform:perspective(600px) rotateY(-180deg) scale(.8);transform:perspective(600px) rotateY(-180deg) scale(.8);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}80%{-webkit-transform:perspective(600px) rotateY(0) scale(1.8);transform:perspective(600px) rotateY(0) scale(1.8);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}95%,to{-webkit-transform:perspective(600px);transform:perspective(600px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}}@keyframes flipYZoomOut{40%{-webkit-transform:perspective(600px) rotateY(-180deg) scale(.8);transform:perspective(600px) rotateY(-180deg) scale(.8);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}80%{-webkit-transform:perspective(600px) rotateY(0) scale(1.8);transform:perspective(600px) rotateY(0) scale(1.8);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}95%,to{-webkit-transform:perspective(600px);transform:perspective(600px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}}.skewLeft{-webkit-animation-name:skewLeft;animation-name:skewLeft}@-webkit-keyframes skewLeft{70%{-webkit-transform:skewX(30deg);transform:skewX(30deg)}}@keyframes skewLeft{70%{-webkit-transform:skewX(30deg);transform:skewX(30deg)}}.skewRight{-webkit-animation-name:skewRight;animation-name:skewRight}@-webkit-keyframes skewRight{70%{-webkit-transform:skewX(-30deg);transform:skewX(-30deg)}}@keyframes skewRight{70%{-webkit-transform:skewX(-30deg);transform:skewX(-30deg)}}.skewInLeft{-webkit-animation-name:skewInLeft;animation-name:skewInLeft}@-webkit-keyframes skewInLeft{from{-webkit-transform:translateX(-100%) skewX(-40deg);transform:translateX(-100%) skewX(-40deg)}70%{-webkit-transform:skewX(-30deg);transform:skewX(-30deg)}}@keyframes skewInLeft{from{-webkit-transform:translateX(-100%) skewX(-40deg);transform:translateX(-100%) skewX(-40deg)}70%{-webkit-transform:skewX(-30deg);transform:skewX(-30deg)}}.skewInRight{-webkit-animation-name:skewInRight;animation-name:skewInRight}@-webkit-keyframes skewInRight{from{-webkit-transform:translateX(100%) skewX(40deg);transform:translateX(100%) skewX(40deg)}70%{-webkit-transform:skewX(30deg);transform:skewX(30deg)}}@keyframes skewInRight{from{-webkit-transform:translateX(100%) skewX(40deg);transform:translateX(100%) skewX(40deg)}70%{-webkit-transform:skewX(30deg);transform:skewX(30deg)}}.skewOutLeft{-webkit-animation-name:skewOutLeft;animation-name:skewOutLeft}@-webkit-keyframes skewOutLeft{50%{-webkit-transform:skewX(40deg);transform:skewX(40deg)}to{-webkit-transform:translateX(-100%) skewX(30deg);transform:translateX(-100%) skewX(30deg)}}@keyframes skewOutLeft{50%{-webkit-transform:skewX(40deg);transform:skewX(40deg)}to{-webkit-transform:translateX(-100%) skewX(30deg);transform:translateX(-100%) skewX(30deg)}}.skewOutRight{-webkit-animation-name:skewOutRight;animation-name:skewOutRight}@-webkit-keyframes skewOutRight{50%{-webkit-transform:skewX(-40deg);transform:skewX(-40deg)}to{-webkit-transform:translateX(100%) skewX(-30deg);transform:translateX(100%) skewX(-30deg)}}@keyframes skewOutRight{50%{-webkit-transform:skewX(-40deg);transform:skewX(-40deg)}to{-webkit-transform:translateX(100%) skewX(-30deg);transform:translateX(100%) skewX(-30deg)}}.shockZoom{-webkit-animation-name:shockZoom;animation-name:shockZoom}@-webkit-keyframes shockZoom{from{-webkit-transform:matrix(5,0,0,5,0,0);transform:matrix(5,0,0,5,0,0)}35%{-webkit-transform:matrix(2,0,0,2,0,0);transform:matrix(2,0,0,2,0,0)}43%{-webkit-transform:matrix(1,0,0,1,0,0);transform:matrix(1,0,0,1,0,0)}}@keyframes shockZoom{from{-webkit-transform:matrix(5,0,0,5,0,0);transform:matrix(5,0,0,5,0,0)}35%{-webkit-transform:matrix(2,0,0,2,0,0);transform:matrix(2,0,0,2,0,0)}43%{-webkit-transform:matrix(1,0,0,1,0,0);transform:matrix(1,0,0,1,0,0)}}.shockInLeft{-webkit-animation-name:shockInLeft;animation-name:shockInLeft}@-webkit-keyframes shockInLeft{from{-webkit-transform:matrix(1,0,0,1,-800,0);transform:matrix(1,0,0,1,-800,0)}35%{-webkit-transform:matrix(1,0,0,1,50,0);transform:matrix(1,0,0,1,50,0)}43%{-webkit-transform:matrix(1,0,0,1,0,0);transform:matrix(1,0,0,1,0,0)}}@keyframes shockInLeft{from{-webkit-transform:matrix(1,0,0,1,-800,0);transform:matrix(1,0,0,1,-800,0)}35%{-webkit-transform:matrix(1,0,0,1,50,0);transform:matrix(1,0,0,1,50,0)}43%{-webkit-transform:matrix(1,0,0,1,0,0);transform:matrix(1,0,0,1,0,0)}}.shockInRight{-webkit-animation-name:shockInRight;animation-name:shockInRight}@-webkit-keyframes shockInRight{from{-webkit-transform:matrix(1,0,0,1,800,0);transform:matrix(1,0,0,1,800,0)}35%{-webkit-transform:matrix(1,0,0,1,-50,0);transform:matrix(1,0,0,1,-50,0)}43%{-webkit-transform:matrix(1,0,0,1,0,0);transform:matrix(1,0,0,1,0,0)}}@keyframes shockInRight{from{-webkit-transform:matrix(1,0,0,1,800,0);transform:matrix(1,0,0,1,800,0)}35%{-webkit-transform:matrix(1,0,0,1,-50,0);transform:matrix(1,0,0,1,-50,0)}43%{-webkit-transform:matrix(1,0,0,1,0,0);transform:matrix(1,0,0,1,0,0)}}.shockInTop{-webkit-animation-name:shockInTop;animation-name:shockInTop}@-webkit-keyframes shockInTop{from{-webkit-transform:matrix(1,0,0,1,0,-400);transform:matrix(1,0,0,1,0,-400)}35%{-webkit-transform:matrix(1,0,0,1,0,50);transform:matrix(1,0,0,1,0,50)}43%{-webkit-transform:matrix(1,0,0,1,0,0);transform:matrix(1,0,0,1,0,0)}}@keyframes shockInTop{from{-webkit-transform:matrix(1,0,0,1,0,-400);transform:matrix(1,0,0,1,0,-400)}35%{-webkit-transform:matrix(1,0,0,1,0,50);transform:matrix(1,0,0,1,0,50)}43%{-webkit-transform:matrix(1,0,0,1,0,0);transform:matrix(1,0,0,1,0,0)}}.shockInBottom{-webkit-animation-name:shockInBottom;animation-name:shockInBottom}@-webkit-keyframes shockInBottom{from{-webkit-transform:matrix(1,0,0,1,0,400);transform:matrix(1,0,0,1,0,400)}35%{-webkit-transform:matrix(1,0,0,1,0,-50);transform:matrix(1,0,0,1,0,-50)}43%{-webkit-transform:matrix(1,0,0,1,0,0);transform:matrix(1,0,0,1,0,0)}}@keyframes shockInBottom{from{-webkit-transform:matrix(1,0,0,1,0,400);transform:matrix(1,0,0,1,0,400)}35%{-webkit-transform:matrix(1,0,0,1,0,-50);transform:matrix(1,0,0,1,0,-50)}43%{-webkit-transform:matrix(1,0,0,1,0,0);transform:matrix(1,0,0,1,0,0)}}.pullReleaseIn{-webkit-animation-name:pullReleaseIn;animation-name:pullReleaseIn}@-webkit-keyframes pullReleaseIn{15%{-webkit-transform:scale(1.5);transform:scale(1.5)}}@keyframes pullReleaseIn{15%{-webkit-transform:scale(1.5);transform:scale(1.5)}}.pullReleaseOut{-webkit-animation-name:pullReleaseOut;animation-name:pullReleaseOut}@-webkit-keyframes pullReleaseOut{15%{-webkit-transform:scale(.5);transform:scale(.5)}}@keyframes pullReleaseOut{15%{-webkit-transform:scale(.5);transform:scale(.5)}}.swingInLeft{-webkit-animation-name:swingInLeft;animation-name:swingInLeft}@-webkit-keyframes swingInLeft{from{-webkit-transform:matrix(3,0,0,3,-800,0);transform:matrix(3,0,0,3,-800,0);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}50%{-webkit-transform:matrix(1.3,0,0,1.3,20,0);transform:matrix(1.3,0,0,1.3,20,0)}}@keyframes swingInLeft{from{-webkit-transform:matrix(3,0,0,3,-800,0);transform:matrix(3,0,0,3,-800,0);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}50%{-webkit-transform:matrix(1.3,0,0,1.3,20,0);transform:matrix(1.3,0,0,1.3,20,0)}}.swingInRight{-webkit-animation-name:swingInRight;animation-name:swingInRight}@-webkit-keyframes swingInRight{from{-webkit-transform:matrix(3,0,0,3,800,0);transform:matrix(3,0,0,3,800,0);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}50%{-webkit-transform:matrix(1.3,0,0,1.3,-20,0);transform:matrix(1.3,0,0,1.3,-20,0)}}@keyframes swingInRight{from{-webkit-transform:matrix(3,0,0,3,800,0);transform:matrix(3,0,0,3,800,0);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}50%{-webkit-transform:matrix(1.3,0,0,1.3,-20,0);transform:matrix(1.3,0,0,1.3,-20,0)}}.swingInTop{-webkit-animation-name:swingInTop;animation-name:swingInTop}@-webkit-keyframes swingInTop{from{-webkit-transform:matrix(3,0,0,3,0,-800);transform:matrix(3,0,0,3,0,-800);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}50%{-webkit-transform:matrix(1.3,0,0,1.3,0,20);transform:matrix(1.3,0,0,1.3,0,20)}}@keyframes swingInTop{from{-webkit-transform:matrix(3,0,0,3,0,-800);transform:matrix(3,0,0,3,0,-800);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}50%{-webkit-transform:matrix(1.3,0,0,1.3,0,20);transform:matrix(1.3,0,0,1.3,0,20)}}.swingInBottom{-webkit-animation-name:swingInBottom;animation-name:swingInBottom}@-webkit-keyframes swingInBottom{from{-webkit-transform:matrix(3,0,0,3,0,800);transform:matrix(3,0,0,3,0,800);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}50%{-webkit-transform:matrix(1.3,0,0,1.3,0,-20);transform:matrix(1.3,0,0,1.3,0,-20)}}@keyframes swingInBottom{from{-webkit-transform:matrix(3,0,0,3,0,800);transform:matrix(3,0,0,3,0,800);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}50%{-webkit-transform:matrix(1.3,0,0,1.3,0,-20);transform:matrix(1.3,0,0,1.3,0,-20)}}.elevateLeft{-webkit-animation-name:elevateLeft;animation-name:elevateLeft}@-webkit-keyframes elevateLeft{from{-webkit-transform:translateY(100%) rotate(-20deg);transform:translateY(100%) rotate(-20deg);-webkit-transform-origin:right;transform-origin:right}40%{-webkit-transform:rotate(20deg);transform:rotate(20deg);-webkit-transform-origin:right;transform-origin:right}65%{-webkit-transform:rotate(0);transform:rotate(0);-webkit-transform-origin:right;transform-origin:right}}@keyframes elevateLeft{from{-webkit-transform:translateY(100%) rotate(-20deg);transform:translateY(100%) rotate(-20deg);-webkit-transform-origin:right;transform-origin:right}40%{-webkit-transform:rotate(20deg);transform:rotate(20deg);-webkit-transform-origin:right;transform-origin:right}65%{-webkit-transform:rotate(0);transform:rotate(0);-webkit-transform-origin:right;transform-origin:right}}.elevateRight{-webkit-animation-name:elevateRight;animation-name:elevateRight}@-webkit-keyframes elevateRight{from{-webkit-transform:translateY(100%) rotate(20deg);transform:translateY(100%) rotate(20deg);-webkit-transform-origin:left;transform-origin:left}40%{-webkit-transform:rotate(-20deg);transform:rotate(-20deg);-webkit-transform-origin:left;transform-origin:left}65%{-webkit-transform:rotate(0);transform:rotate(0);-webkit-transform-origin:left;transform-origin:left}}@keyframes elevateRight{from{-webkit-transform:translateY(100%) rotate(20deg);transform:translateY(100%) rotate(20deg);-webkit-transform-origin:left;transform-origin:left}40%{-webkit-transform:rotate(-20deg);transform:rotate(-20deg);-webkit-transform-origin:left;transform-origin:left}65%{-webkit-transform:rotate(0);transform:rotate(0);-webkit-transform-origin:left;transform-origin:left}}.rollFromLeft{-webkit-animation-name:rollFromLeft;animation-name:rollFromLeft}@-webkit-keyframes rollFromLeft{from{-webkit-transform:translateX(-100%) perspective(600px) rotateY(180deg);transform:translateX(-100%) perspective(600px) rotateY(180deg)}}@keyframes rollFromLeft{from{-webkit-transform:translateX(-100%) perspective(600px) rotateY(180deg);transform:translateX(-100%) perspective(600px) rotateY(180deg)}}.rollFromRight{-webkit-animation-name:rollFromRight;animation-name:rollFromRight}@-webkit-keyframes rollFromRight{from{-webkit-transform:translateX(100%) perspective(600px) rotateY(-180deg);transform:translateX(100%) perspective(600px) rotateY(-180deg)}}@keyframes rollFromRight{from{-webkit-transform:translateX(100%) perspective(600px) rotateY(-180deg);transform:translateX(100%) perspective(600px) rotateY(-180deg)}}.rollFromTop{-webkit-animation-name:rollFromTop;animation-name:rollFromTop}@-webkit-keyframes rollFromTop{from{-webkit-transform:translateY(-100%) perspective(600px) rotateX(180deg);transform:translateY(-100%) perspective(600px) rotateX(180deg)}}@keyframes rollFromTop{from{-webkit-transform:translateY(-100%) perspective(600px) rotateX(180deg);transform:translateY(-100%) perspective(600px) rotateX(180deg)}}.rollFromBottom{-webkit-animation-name:rollFromBottom;animation-name:rollFromBottom}@-webkit-keyframes rollFromBottom{from{-webkit-transform:translateY(100%) perspective(600px) rotateX(-180deg);transform:translateY(100%) perspective(600px) rotateX(-180deg)}}@keyframes rollFromBottom{from{-webkit-transform:translateY(100%) perspective(600px) rotateX(-180deg);transform:translateY(100%) perspective(600px) rotateX(-180deg)}}.rollToLeft{-webkit-animation-name:rollToLeft;animation-name:rollToLeft}@-webkit-keyframes rollToLeft{to{-webkit-transform:translateX(-100%) perspective(600px) rotateY(180deg);transform:translateX(-100%) perspective(600px) rotateY(180deg)}}@keyframes rollToLeft{to{-webkit-transform:translateX(-100%) perspective(600px) rotateY(180deg);transform:translateX(-100%) perspective(600px) rotateY(180deg)}}.rollToRight{-webkit-animation-name:rollToRight;animation-name:rollToRight}@-webkit-keyframes rollToRight{to{-webkit-transform:translateX(100%) perspective(600px) rotateY(-180deg);transform:translateX(100%) perspective(600px) rotateY(-180deg)}}@keyframes rollToRight{to{-webkit-transform:translateX(100%) perspective(600px) rotateY(-180deg);transform:translateX(100%) perspective(600px) rotateY(-180deg)}}.rollToTop{-webkit-animation-name:rollToTop;animation-name:rollToTop}@-webkit-keyframes rollToTop{to{-webkit-transform:translateY(-100%) perspective(600px) rotateX(180deg);transform:translateY(-100%) perspective(600px) rotateX(180deg)}}@keyframes rollToTop{to{-webkit-transform:translateY(-100%) perspective(600px) rotateX(180deg);transform:translateY(-100%) perspective(600px) rotateX(180deg)}}.rollToBottom{-webkit-animation-name:rollToBottom;animation-name:rollToBottom}@-webkit-keyframes rollToBottom{to{-webkit-transform:translateY(100%) perspective(600px) rotateX(-180deg);transform:translateY(100%) perspective(600px) rotateX(-180deg)}}@keyframes rollToBottom{to{-webkit-transform:translateY(100%) perspective(600px) rotateX(-180deg);transform:translateY(100%) perspective(600px) rotateX(-180deg)}}.rotate{-webkit-animation-name:rotate;animation-name:rotate;-webkit-animation-timing-function:linear;animation-timing-function:linear}@-webkit-keyframes rotate{50%{-webkit-transform:rotate(-180deg);transform:rotate(-180deg)}to{-webkit-transform:rotate(0);transform:rotate(0)}}@keyframes rotate{50%{-webkit-transform:rotate(-180deg);transform:rotate(-180deg)}to{-webkit-transform:rotate(0);transform:rotate(0)}}.rotateX{-webkit-animation-name:rotateX;animation-name:rotateX}@-webkit-keyframes rotateX{to{-webkit-transform:perspective(600px) rotateX(90deg);transform:perspective(600px) rotateX(90deg)}}@keyframes rotateX{to{-webkit-transform:perspective(600px) rotateX(90deg);transform:perspective(600px) rotateX(90deg)}}.rotateXIn{-webkit-animation-name:rotateXIn;animation-name:rotateXIn}@-webkit-keyframes rotateXIn{from{-webkit-transform:perspective(600px) translate3d(0,-60px,-2000px) rotateX(75deg);transform:perspective(600px) translate3d(0,-60px,-2000px) rotateX(75deg);opacity:0}5%{-webkit-transform:perspective(600px) translate3d(0,-60px,-1500px) rotateX(75deg);transform:perspective(600px) translate3d(0,-60px,-1500px) rotateX(75deg)}}@keyframes rotateXIn{from{-webkit-transform:perspective(600px) translate3d(0,-60px,-2000px) rotateX(75deg);transform:perspective(600px) translate3d(0,-60px,-2000px) rotateX(75deg);opacity:0}5%{-webkit-transform:perspective(600px) translate3d(0,-60px,-1500px) rotateX(75deg);transform:perspective(600px) translate3d(0,-60px,-1500px) rotateX(75deg)}}.rotateXOut{-webkit-animation-name:rotateXOut;animation-name:rotateXOut}@-webkit-keyframes rotateXOut{95%{-webkit-transform:perspective(600px) translate3d(0,-60px,-1500px) rotateX(75deg);transform:perspective(600px) translate3d(0,-60px,-1500px) rotateX(75deg)}to{-webkit-transform:perspective(600px) translate3d(0,-60px,-2000px) rotateX(75deg);transform:perspective(600px) translate3d(0,-60px,-2000px) rotateX(75deg);opacity:0}}@keyframes rotateXOut{95%{-webkit-transform:perspective(600px) translate3d(0,-60px,-1500px) rotateX(75deg);transform:perspective(600px) translate3d(0,-60px,-1500px) rotateX(75deg)}to{-webkit-transform:perspective(600px) translate3d(0,-60px,-2000px) rotateX(75deg);transform:perspective(600px) translate3d(0,-60px,-2000px) rotateX(75deg);opacity:0}}.rotateY{-webkit-animation-name:rotateY;animation-name:rotateY}@-webkit-keyframes rotateY{to{-webkit-transform:perspective(600px) rotateY(90deg);transform:perspective(600px) rotateY(90deg)}}@keyframes rotateY{to{-webkit-transform:perspective(600px) rotateY(90deg);transform:perspective(600px) rotateY(90deg)}}.rotateYIn{-webkit-animation-name:rotateYIn;animation-name:rotateYIn}@-webkit-keyframes rotateYIn{from{-webkit-transform:perspective(600px) translate3d(0,-60px,-2000px) rotateY(75deg);transform:perspective(600px) translate3d(0,-60px,-2000px) rotateY(75deg);opacity:0}5%{-webkit-transform:perspective(600px) translate3d(0,-60px,-1500px) rotateY(75deg);transform:perspective(600px) translate3d(0,-60px,-1500px) rotateY(75deg)}}@keyframes rotateYIn{from{-webkit-transform:perspective(600px) translate3d(0,-60px,-2000px) rotateY(75deg);transform:perspective(600px) translate3d(0,-60px,-2000px) rotateY(75deg);opacity:0}5%{-webkit-transform:perspective(600px) translate3d(0,-60px,-1500px) rotateY(75deg);transform:perspective(600px) translate3d(0,-60px,-1500px) rotateY(75deg)}}.rotateYOut{-webkit-animation-name:rotateYOut;animation-name:rotateYOut}@-webkit-keyframes rotateYOut{95%{-webkit-transform:perspective(600px) translate3d(0,-60px,-1500px) rotateY(75deg);transform:perspective(600px) translate3d(0,-60px,-1500px) rotateY(75deg)}to{-webkit-transform:perspective(600px) translate3d(0,-60px,-2000px) rotateY(75deg);transform:perspective(600px) translate3d(0,-60px,-2000px) rotateY(75deg);opacity:0}}@keyframes rotateYOut{95%{-webkit-transform:perspective(600px) translate3d(0,-60px,-1500px) rotateY(75deg);transform:perspective(600px) translate3d(0,-60px,-1500px) rotateY(75deg)}to{-webkit-transform:perspective(600px) translate3d(0,-60px,-2000px) rotateY(75deg);transform:perspective(600px) translate3d(0,-60px,-2000px) rotateY(75deg);opacity:0}}.rotateInLeft{-webkit-animation-name:rotateInLeft;animation-name:rotateInLeft}@-webkit-keyframes rotateInLeft{from{-webkit-transform:translateX(-100%) rotate(0);transform:translateX(-100%) rotate(0)}to{-webkit-transform:translateX(0) rotate(360deg);transform:translateX(0) rotate(360deg)}}@keyframes rotateInLeft{from{-webkit-transform:translateX(-100%) rotate(0);transform:translateX(-100%) rotate(0)}to{-webkit-transform:translateX(0) rotate(360deg);transform:translateX(0) rotate(360deg)}}.rotateInRight{-webkit-animation-name:rotateInRight;animation-name:rotateInRight}@-webkit-keyframes rotateInRight{from{-webkit-transform:translateX(100%) rotate(0);transform:translateX(100%) rotate(0)}to{-webkit-transform:translateX(0) rotate(-360deg);transform:translateX(0) rotate(-360deg)}}@keyframes rotateInRight{from{-webkit-transform:translateX(100%) rotate(0);transform:translateX(100%) rotate(0)}to{-webkit-transform:translateX(0) rotate(-360deg);transform:translateX(0) rotate(-360deg)}}.rotateInTop{-webkit-animation-name:rotateInTop;animation-name:rotateInTop}@-webkit-keyframes rotateInTop{from{-webkit-transform:translateY(-400%) rotate(0);transform:translateY(-400%) rotate(0)}to{-webkit-transform:translateX(0) rotate(360deg);transform:translateX(0) rotate(360deg)}}@keyframes rotateInTop{from{-webkit-transform:translateY(-400%) rotate(0);transform:translateY(-400%) rotate(0)}to{-webkit-transform:translateX(0) rotate(360deg);transform:translateX(0) rotate(360deg)}}.rotateInBottom{-webkit-animation-name:rotateInBottom;animation-name:rotateInBottom}@-webkit-keyframes rotateInBottom{from{-webkit-transform:translateY(400%) rotate(0);transform:translateY(400%) rotate(0)}to{-webkit-transform:translateX(0) rotate(360deg);transform:translateX(0) rotate(360deg)}}@keyframes rotateInBottom{from{-webkit-transform:translateY(400%) rotate(0);transform:translateY(400%) rotate(0)}to{-webkit-transform:translateX(0) rotate(360deg);transform:translateX(0) rotate(360deg)}}.rotateOutLeft{-webkit-animation-name:rotateOutLeft;animation-name:rotateOutLeft}@-webkit-keyframes rotateOutLeft{from{-webkit-transform:translateX(0) rotate(360deg);transform:translateX(0) rotate(360deg)}to{-webkit-transform:translateX(-100%) rotate(0);transform:translateX(-100%) rotate(0)}}@keyframes rotateOutLeft{from{-webkit-transform:translateX(0) rotate(360deg);transform:translateX(0) rotate(360deg)}to{-webkit-transform:translateX(-100%) rotate(0);transform:translateX(-100%) rotate(0)}}.rotateOutRight{-webkit-animation-name:rotateOutRight;animation-name:rotateOutRight}@-webkit-keyframes rotateOutRight{from{-webkit-transform:translateX(0) rotate(-360deg);transform:translateX(0) rotate(-360deg)}to{-webkit-transform:translateX(100%) rotate(0);transform:translateX(100%) rotate(0)}}@keyframes rotateOutRight{from{-webkit-transform:translateX(0) rotate(-360deg);transform:translateX(0) rotate(-360deg)}to{-webkit-transform:translateX(100%) rotate(0);transform:translateX(100%) rotate(0)}}.rotateOutTop{-webkit-animation-name:rotateOutTop;animation-name:rotateOutTop}@-webkit-keyframes rotateOutTop{from{-webkit-transform:translateX(0) rotate(360deg);transform:translateX(0) rotate(360deg)}to{-webkit-transform:translateY(-400%) rotate(0);transform:translateY(-400%) rotate(0)}}@keyframes rotateOutTop{from{-webkit-transform:translateX(0) rotate(360deg);transform:translateX(0) rotate(360deg)}to{-webkit-transform:translateY(-400%) rotate(0);transform:translateY(-400%) rotate(0)}}.rotateOutBottom{-webkit-animation-name:rotateOutBottom;animation-name:rotateOutBottom}@-webkit-keyframes rotateOutBottom{from{-webkit-transform:translateX(0) rotate(360deg);transform:translateX(0) rotate(360deg)}to{-webkit-transform:translateY(400%) rotate(0);transform:translateY(400%) rotate(0)}}@keyframes rotateOutBottom{from{-webkit-transform:translateX(0) rotate(360deg);transform:translateX(0) rotate(360deg)}to{-webkit-transform:translateY(400%) rotate(0);transform:translateY(400%) rotate(0)}}.spinToLeft{-webkit-animation-name:spinToLeft;animation-name:spinToLeft}@-webkit-keyframes spinToLeft{from,to{-webkit-transform-origin:left bottom;transform-origin:left bottom}from{-webkit-transform:rotate(90deg);transform:rotate(90deg);opacity:0}}@keyframes spinToLeft{from,to{-webkit-transform-origin:left bottom;transform-origin:left bottom}from{-webkit-transform:rotate(90deg);transform:rotate(90deg);opacity:0}}.spinToRight{-webkit-animation-name:spinToRight;animation-name:spinToRight}@-webkit-keyframes spinToRight{from,to{-webkit-transform-origin:right bottom;transform-origin:right bottom}from{-webkit-transform:rotate(-90deg);transform:rotate(-90deg);opacity:0}}@keyframes spinToRight{from,to{-webkit-transform-origin:right bottom;transform-origin:right bottom}from{-webkit-transform:rotate(-90deg);transform:rotate(-90deg);opacity:0}}.spinToTop{-webkit-animation-name:spinToTop;animation-name:spinToTop}@-webkit-keyframes spinToTop{from,to{-webkit-transform-origin:left bottom;transform-origin:left bottom}from{-webkit-transform:rotate(-90deg);transform:rotate(-90deg);opacity:0}}@keyframes spinToTop{from,to{-webkit-transform-origin:left bottom;transform-origin:left bottom}from{-webkit-transform:rotate(-90deg);transform:rotate(-90deg);opacity:0}}.spinToBottom{-webkit-animation-name:spinToBottom;animation-name:spinToBottom}@-webkit-keyframes spinToBottom{from,to{-webkit-transform-origin:right bottom;transform-origin:right bottom}from{-webkit-transform:rotate(90deg);transform:rotate(90deg);opacity:0}}@keyframes spinToBottom{from,to{-webkit-transform-origin:right bottom;transform-origin:right bottom}from{-webkit-transform:rotate(90deg);transform:rotate(90deg);opacity:0}}.spinFromLeft{-webkit-animation-name:spinFromLeft;animation-name:spinFromLeft}@-webkit-keyframes spinFromLeft{from,to{-webkit-transform-origin:left bottom;transform-origin:left bottom}to{-webkit-transform:rotate(90deg);transform:rotate(90deg);opacity:0}}@keyframes spinFromLeft{from,to{-webkit-transform-origin:left bottom;transform-origin:left bottom}to{-webkit-transform:rotate(90deg);transform:rotate(90deg);opacity:0}}.spinFromRight{-webkit-animation-name:spinFromRight;animation-name:spinFromRight}@-webkit-keyframes spinFromRight{from,to{-webkit-transform-origin:right bottom;transform-origin:right bottom}to{-webkit-transform:rotate(-90deg);transform:rotate(-90deg);opacity:0}}@keyframes spinFromRight{from,to{-webkit-transform-origin:right bottom;transform-origin:right bottom}to{-webkit-transform:rotate(-90deg);transform:rotate(-90deg);opacity:0}}.spinFromTop{-webkit-animation-name:spinFromTop;animation-name:spinFromTop}@-webkit-keyframes spinFromTop{from,to{-webkit-transform-origin:left bottom;transform-origin:left bottom}to{-webkit-transform:rotate(-90deg);transform:rotate(-90deg);opacity:0}}@keyframes spinFromTop{from,to{-webkit-transform-origin:left bottom;transform-origin:left bottom}to{-webkit-transform:rotate(-90deg);transform:rotate(-90deg);opacity:0}}.spinFromBottom{-webkit-animation-name:spinFromBottom;animation-name:spinFromBottom}@-webkit-keyframes spinFromBottom{from,to{-webkit-transform-origin:right bottom;transform-origin:right bottom}to{-webkit-transform:rotate(90deg);transform:rotate(90deg);opacity:0}}@keyframes spinFromBottom{from,to{-webkit-transform-origin:right bottom;transform-origin:right bottom}to{-webkit-transform:rotate(90deg);transform:rotate(90deg);opacity:0}}.blurIn{-webkit-animation-name:blurIn;animation-name:blurIn}@-webkit-keyframes blurIn{to{text-shadow:0 0 10px rgba(167,81,203,.6),0 0 30px rgba(167,81,203,.4),0 0 50px rgba(167,81,203,.3),0 0 180px rgba(167,81,203,.3);color:transparent}}@keyframes blurIn{to{text-shadow:0 0 10px rgba(167,81,203,.6),0 0 30px rgba(167,81,203,.4),0 0 50px rgba(167,81,203,.3),0 0 180px rgba(167,81,203,.3);color:transparent}}.blurInLeft{-webkit-animation-name:blurInLeft;animation-name:blurInLeft}@-webkit-keyframes blurInLeft{from{-webkit-transform:translateX(100%);transform:translateX(100%);text-shadow:none}to{text-shadow:0 0 10px rgba(167,81,203,.6),0 0 30px rgba(167,81,203,.4),0 0 50px rgba(167,81,203,.3),0 0 180px rgba(167,81,203,.3);color:transparent}}@keyframes blurInLeft{from{-webkit-transform:translateX(100%);transform:translateX(100%);text-shadow:none}to{text-shadow:0 0 10px rgba(167,81,203,.6),0 0 30px rgba(167,81,203,.4),0 0 50px rgba(167,81,203,.3),0 0 180px rgba(167,81,203,.3);color:transparent}}.blurInRight{-webkit-animation-name:blurInRight;animation-name:blurInRight}@-webkit-keyframes blurInRight{from{-webkit-transform:translateX(-100%);transform:translateX(-100%);text-shadow:none}to{text-shadow:0 0 10px rgba(167,81,203,.6),0 0 30px rgba(167,81,203,.4),0 0 50px rgba(167,81,203,.3),0 0 180px rgba(167,81,203,.3);color:transparent}}@keyframes blurInRight{from{-webkit-transform:translateX(-100%);transform:translateX(-100%);text-shadow:none}to{text-shadow:0 0 10px rgba(167,81,203,.6),0 0 30px rgba(167,81,203,.4),0 0 50px rgba(167,81,203,.3),0 0 180px rgba(167,81,203,.3);color:transparent}}.blurInTop{-webkit-animation-name:blurInTop;animation-name:blurInTop}@-webkit-keyframes blurInTop{from{-webkit-transform:translateY(100%);transform:translateY(100%);text-shadow:none}to{text-shadow:0 0 10px rgba(167,81,203,.6),0 0 30px rgba(167,81,203,.4),0 0 50px rgba(167,81,203,.3),0 0 180px rgba(167,81,203,.3);color:transparent}}@keyframes blurInTop{from{-webkit-transform:translateY(100%);transform:translateY(100%);text-shadow:none}to{text-shadow:0 0 10px rgba(167,81,203,.6),0 0 30px rgba(167,81,203,.4),0 0 50px rgba(167,81,203,.3),0 0 180px rgba(167,81,203,.3);color:transparent}}.blurInBottom{-webkit-animation-name:blurInBottom;animation-name:blurInBottom}@-webkit-keyframes blurInBottom{from{-webkit-transform:translateY(-100%);transform:translateY(-100%);text-shadow:none}to{text-shadow:0 0 10px rgba(167,81,203,.6),0 0 30px rgba(167,81,203,.4),0 0 50px rgba(167,81,203,.3),0 0 180px rgba(167,81,203,.3);color:transparent}}@keyframes blurInBottom{from{-webkit-transform:translateY(-100%);transform:translateY(-100%);text-shadow:none}to{text-shadow:0 0 10px rgba(167,81,203,.6),0 0 30px rgba(167,81,203,.4),0 0 50px rgba(167,81,203,.3),0 0 180px rgba(167,81,203,.3);color:transparent}}.blurOut{-webkit-animation-name:blurOut;animation-name:blurOut}@-webkit-keyframes blurOut{from{text-shadow:0 0 10px rgba(167,81,203,.6),0 0 30px rgba(167,81,203,.4),0 0 50px rgba(167,81,203,.3),0 0 180px rgba(167,81,203,.3);color:transparent}}@keyframes blurOut{from{text-shadow:0 0 10px rgba(167,81,203,.6),0 0 30px rgba(167,81,203,.4),0 0 50px rgba(167,81,203,.3),0 0 180px rgba(167,81,203,.3);color:transparent}}.blurOutLeft{-webkit-animation-name:blurOutLeft;animation-name:blurOutLeft}@-webkit-keyframes blurOutLeft{from{text-shadow:0 0 10px rgba(167,81,203,.6),0 0 30px rgba(167,81,203,.4),0 0 50px rgba(167,81,203,.3),0 0 180px rgba(167,81,203,.3);color:transparent}to{-webkit-transform:translateX(100%);transform:translateX(100%);text-shadow:none}}@keyframes blurOutLeft{from{text-shadow:0 0 10px rgba(167,81,203,.6),0 0 30px rgba(167,81,203,.4),0 0 50px rgba(167,81,203,.3),0 0 180px rgba(167,81,203,.3);color:transparent}to{-webkit-transform:translateX(100%);transform:translateX(100%);text-shadow:none}}.blurOutRight{-webkit-animation-name:blurOutRight;animation-name:blurOutRight}@-webkit-keyframes blurOutRight{from{text-shadow:0 0 10px rgba(167,81,203,.6),0 0 30px rgba(167,81,203,.4),0 0 50px rgba(167,81,203,.3),0 0 180px rgba(167,81,203,.3);color:transparent}to{-webkit-transform:translateX(-100%);transform:translateX(-100%);text-shadow:none}}@keyframes blurOutRight{from{text-shadow:0 0 10px rgba(167,81,203,.6),0 0 30px rgba(167,81,203,.4),0 0 50px rgba(167,81,203,.3),0 0 180px rgba(167,81,203,.3);color:transparent}to{-webkit-transform:translateX(-100%);transform:translateX(-100%);text-shadow:none}}.blurOutTop{-webkit-animation-name:blurOutTop;animation-name:blurOutTop}@-webkit-keyframes blurOutTop{from{text-shadow:0 0 10px rgba(167,81,203,.6),0 0 30px rgba(167,81,203,.4),0 0 50px rgba(167,81,203,.3),0 0 180px rgba(167,81,203,.3);color:transparent}to{-webkit-transform:translateY(100%);transform:translateY(100%);text-shadow:none}}@keyframes blurOutTop{from{text-shadow:0 0 10px rgba(167,81,203,.6),0 0 30px rgba(167,81,203,.4),0 0 50px rgba(167,81,203,.3),0 0 180px rgba(167,81,203,.3);color:transparent}to{-webkit-transform:translateY(100%);transform:translateY(100%);text-shadow:none}}.blurOutBottom{-webkit-animation-name:blurOutBottom;animation-name:blurOutBottom}@-webkit-keyframes blurOutBottom{from{text-shadow:0 0 10px rgba(167,81,203,.6),0 0 30px rgba(167,81,203,.4),0 0 50px rgba(167,81,203,.3),0 0 180px rgba(167,81,203,.3);color:transparent}to{-webkit-transform:translateY(-100%);transform:translateY(-100%);text-shadow:none}}@keyframes blurOutBottom{from{text-shadow:0 0 10px rgba(167,81,203,.6),0 0 30px rgba(167,81,203,.4),0 0 50px rgba(167,81,203,.3),0 0 180px rgba(167,81,203,.3);color:transparent}to{-webkit-transform:translateY(-100%);transform:translateY(-100%);text-shadow:none}}.bounceFromTop{-webkit-animation-name:bounceFromTop;animation-name:bounceFromTop}@-webkit-keyframes bounceFromTop{0%,100%,25%,55%,85%{-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}41%,44%{-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;-webkit-transform:translate3d(0,-80px,0) scale3d(1,1.2,1);transform:translate3d(0,-80px,0) scale3d(1,1.2,1)}70%{-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}90%{-webkit-transform:translate3d(0,-4px,0);transform:translate3d(0,-4px,0)}}@keyframes bounceFromTop{0%,100%,25%,55%,85%{-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}41%,44%{-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;-webkit-transform:translate3d(0,-80px,0) scale3d(1,1.2,1);transform:translate3d(0,-80px,0) scale3d(1,1.2,1)}70%{-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}90%{-webkit-transform:translate3d(0,-4px,0);transform:translate3d(0,-4px,0)}}.bounceFromDown{-webkit-animation-name:bounceFromDown;animation-name:bounceFromDown}@-webkit-keyframes bounceFromDown{0%,100%,25%,55%,85%{-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}41%,44%{-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;-webkit-transform:translate3d(0,80px,0) scale3d(1,1.2,1);transform:translate3d(0,80px,0) scale3d(1,1.2,1)}70%{-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;-webkit-transform:translate3d(0,20px,0);transform:translate3d(0,20px,0)}90%{-webkit-transform:translate3d(0,4px,0);transform:translate3d(0,4px,0)}}@keyframes bounceFromDown{0%,100%,25%,55%,85%{-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}41%,44%{-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;-webkit-transform:translate3d(0,80px,0) scale3d(1,1.2,1);transform:translate3d(0,80px,0) scale3d(1,1.2,1)}70%{-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;-webkit-transform:translate3d(0,20px,0);transform:translate3d(0,20px,0)}90%{-webkit-transform:translate3d(0,4px,0);transform:translate3d(0,4px,0)}}.bounceX{-webkit-animation-name:bounceX;animation-name:bounceX}@-webkit-keyframes bounceX{0%,100%,25%,55%,85%{-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}41%,44%{-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;-webkit-transform:scale3d(1.8,1,1);transform:scale3d(1.8,1,1)}70%{-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;-webkit-transform:scale3d(1.5,1,1);transform:scale3d(1.5,1,1)}90%{-webkit-transform:scale3d(1.1,1,1);transform:scale3d(1.1,1,1)}}@keyframes bounceX{0%,100%,25%,55%,85%{-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}41%,44%{-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;-webkit-transform:scale3d(1.8,1,1);transform:scale3d(1.8,1,1)}70%{-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;-webkit-transform:scale3d(1.5,1,1);transform:scale3d(1.5,1,1)}90%{-webkit-transform:scale3d(1.1,1,1);transform:scale3d(1.1,1,1)}}.bounceY{-webkit-animation-name:bounceY;animation-name:bounceY}@-webkit-keyframes bounceY{0%,100%,25%,55%,85%{-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}41%,44%{-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;-webkit-transform:scale3d(1,2,1);transform:scale3d(1,2,1)}70%{-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;-webkit-transform:scale3d(1,1.5,1);transform:scale3d(1,1.5,1)}90%{-webkit-transform:scale3d(1,1.1,1);transform:scale3d(1,1.1,1)}}@keyframes bounceY{0%,100%,25%,55%,85%{-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}41%,44%{-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;-webkit-transform:scale3d(1,2,1);transform:scale3d(1,2,1)}70%{-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;-webkit-transform:scale3d(1,1.5,1);transform:scale3d(1,1.5,1)}90%{-webkit-transform:scale3d(1,1.1,1);transform:scale3d(1,1.1,1)}}.bounceZoomIn{-webkit-animation-name:bounceZoomIn;animation-name:bounceZoomIn}@-webkit-keyframes bounceZoomIn{0%,100%,25%,55%,85%{-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out;-webkit-transform:scale(1);transform:scale(1)}41%,44%{-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;-webkit-transform:scale(1.5);transform:scale(1.5)}70%{-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;-webkit-transform:scale(1.3);transform:scale(1.3)}90%{-webkit-transform:scale(1.1);transform:scale(1.1)}}@keyframes bounceZoomIn{0%,100%,25%,55%,85%{-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out;-webkit-transform:scale(1);transform:scale(1)}41%,44%{-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;-webkit-transform:scale(1.5);transform:scale(1.5)}70%{-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;-webkit-transform:scale(1.3);transform:scale(1.3)}90%{-webkit-transform:scale(1.1);transform:scale(1.1)}}.bounceZoomOut{-webkit-animation-name:bounceZoomOut;animation-name:bounceZoomOut}@-webkit-keyframes bounceZoomOut{0%,100%,25%,55%,85%{-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out;-webkit-transform:scale(1);transform:scale(1)}41%,44%{-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;-webkit-transform:scale(.3);transform:scale(.3)}70%{-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;-webkit-transform:scale(.5);transform:scale(.5)}90%{-webkit-transform:scale(.9);transform:scale(.9)}}@keyframes bounceZoomOut{0%,100%,25%,55%,85%{-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out;-webkit-transform:scale(1);transform:scale(1)}41%,44%{-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;-webkit-transform:scale(.3);transform:scale(.3)}70%{-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;-webkit-transform:scale(.5);transform:scale(.5)}90%{-webkit-transform:scale(.9);transform:scale(.9)}}.bounceInTop{-webkit-animation-name:bounceInTop;animation-name:bounceInTop}@-webkit-keyframes bounceInTop{0%{-webkit-transform:translate3d(0,-300%,0);transform:translate3d(0,-300%,0)}58%{-webkit-transform:translate3d(0,27px,0);transform:translate3d(0,27px,0)}73%{-webkit-transform:translate3d(0,-12px,0);transform:translate3d(0,-12px,0)}88%{-webkit-transform:translate3d(0,7px,0);transform:translate3d(0,7px,0)}}@keyframes bounceInTop{0%{-webkit-transform:translate3d(0,-300%,0);transform:translate3d(0,-300%,0)}58%{-webkit-transform:translate3d(0,27px,0);transform:translate3d(0,27px,0)}73%{-webkit-transform:translate3d(0,-12px,0);transform:translate3d(0,-12px,0)}88%{-webkit-transform:translate3d(0,7px,0);transform:translate3d(0,7px,0)}}.bounceInBottom{-webkit-animation-name:bounceInBottom;animation-name:bounceInBottom}@-webkit-keyframes bounceInBottom{0%{-webkit-transform:translate3d(0,300%,0);transform:translate3d(0,300%,0)}58%{-webkit-transform:translate3d(0,-27px,0);transform:translate3d(0,-27px,0)}73%{-webkit-transform:translate3d(0,12px,0);transform:translate3d(0,12px,0)}88%{-webkit-transform:translate3d(0,-8px,0);transform:translate3d(0,-8px,0)}}@keyframes bounceInBottom{0%{-webkit-transform:translate3d(0,300%,0);transform:translate3d(0,300%,0)}58%{-webkit-transform:translate3d(0,-27px,0);transform:translate3d(0,-27px,0)}73%{-webkit-transform:translate3d(0,12px,0);transform:translate3d(0,12px,0)}88%{-webkit-transform:translate3d(0,-8px,0);transform:translate3d(0,-8px,0)}}.bounceInLeft{-webkit-animation-name:bounceInLeft;animation-name:bounceInLeft}@-webkit-keyframes bounceInLeft{0%{-webkit-transform:translate3d(-300%,0,0);transform:translate3d(-300%,0,0)}58%{-webkit-transform:translate3d(27px,0,0);transform:translate3d(27px,0,0)}73%{-webkit-transform:translate3d(-12px,0,0);transform:translate3d(-12px,0,0)}88%{-webkit-transform:translate3d(8px,0,0);transform:translate3d(8px,0,0)}}@keyframes bounceInLeft{0%{-webkit-transform:translate3d(-300%,0,0);transform:translate3d(-300%,0,0)}58%{-webkit-transform:translate3d(27px,0,0);transform:translate3d(27px,0,0)}73%{-webkit-transform:translate3d(-12px,0,0);transform:translate3d(-12px,0,0)}88%{-webkit-transform:translate3d(8px,0,0);transform:translate3d(8px,0,0)}}.bounceInRight{-webkit-animation-name:bounceInRight;animation-name:bounceInRight}@-webkit-keyframes bounceInRight{0%{-webkit-transform:translate3d(300%,0,0);transform:translate3d(300%,0,0)}58%{-webkit-transform:translate3d(-27px,0,0);transform:translate3d(-27px,0,0)}73%{-webkit-transform:translate3d(12px,0,0);transform:translate3d(12px,0,0)}88%{-webkit-transform:translate3d(-8px,0,0);transform:translate3d(-8px,0,0)}}@keyframes bounceInRight{0%{-webkit-transform:translate3d(300%,0,0);transform:translate3d(300%,0,0)}58%{-webkit-transform:translate3d(-27px,0,0);transform:translate3d(-27px,0,0)}73%{-webkit-transform:translate3d(12px,0,0);transform:translate3d(12px,0,0)}88%{-webkit-transform:translate3d(-8px,0,0);transform:translate3d(-8px,0,0)}}.bounceOutTop{-webkit-animation-name:bounceOutTop;animation-name:bounceOutTop}@-webkit-keyframes bounceOutTop{18%{-webkit-transform:translate3d(0,27px,0);transform:translate3d(0,27px,0)}33%{-webkit-transform:translate3d(0,-12px,0);transform:translate3d(0,-12px,0)}48%{-webkit-transform:translate3d(0,8px,0);transform:translate3d(0,8px,0)}100%{-webkit-transform:translate3d(0,-300%,0);transform:translate3d(0,-300%,0)}}@keyframes bounceOutTop{18%{-webkit-transform:translate3d(0,27px,0);transform:translate3d(0,27px,0)}33%{-webkit-transform:translate3d(0,-12px,0);transform:translate3d(0,-12px,0)}48%{-webkit-transform:translate3d(0,8px,0);transform:translate3d(0,8px,0)}100%{-webkit-transform:translate3d(0,-300%,0);transform:translate3d(0,-300%,0)}}.bounceOutBottom{-webkit-animation-name:bounceOutBottom;animation-name:bounceOutBottom}@-webkit-keyframes bounceOutBottom{18%{-webkit-transform:translate3d(0,-27px,0);transform:translate3d(0,-27px,0)}33%{-webkit-transform:translate3d(0,12px,0);transform:translate3d(0,12px,0)}48%{-webkit-transform:translate3d(0,-8px,0);transform:translate3d(0,-8px,0)}100%{-webkit-transform:translate3d(0,300%,0);transform:translate3d(0,300%,0)}}@keyframes bounceOutBottom{18%{-webkit-transform:translate3d(0,-27px,0);transform:translate3d(0,-27px,0)}33%{-webkit-transform:translate3d(0,12px,0);transform:translate3d(0,12px,0)}48%{-webkit-transform:translate3d(0,-8px,0);transform:translate3d(0,-8px,0)}100%{-webkit-transform:translate3d(0,300%,0);transform:translate3d(0,300%,0)}}.bounceOutLeft{-webkit-animation-name:bounceOutLeft;animation-name:bounceOutLeft}@-webkit-keyframes bounceOutLeft{18%{-webkit-transform:translate3d(27px,0,0);transform:translate3d(27px,0,0)}33%{-webkit-transform:translate3d(-12px,0,0);transform:translate3d(-12px,0,0)}48%{-webkit-transform:translate3d(8px,0,0);transform:translate3d(8px,0,0)}100%{-webkit-transform:translate3d(-300%,0,0);transform:translate3d(-300%,0,0)}}@keyframes bounceOutLeft{18%{-webkit-transform:translate3d(27px,0,0);transform:translate3d(27px,0,0)}33%{-webkit-transform:translate3d(-12px,0,0);transform:translate3d(-12px,0,0)}48%{-webkit-transform:translate3d(8px,0,0);transform:translate3d(8px,0,0)}100%{-webkit-transform:translate3d(-300%,0,0);transform:translate3d(-300%,0,0)}}.bounceOutRight{-webkit-animation-name:bounceOutRight;animation-name:bounceOutRight}@-webkit-keyframes bounceOutRight{18%{-webkit-transform:translate3d(-27px,0,0);transform:translate3d(-27px,0,0)}33%{-webkit-transform:translate3d(12px,0,0);transform:translate3d(12px,0,0)}48%{-webkit-transform:translate3d(-8px,0,0);transform:translate3d(-8px,0,0)}100%{-webkit-transform:translate3d(300%,0,0);transform:translate3d(300%,0,0)}}@keyframes bounceOutRight{18%{-webkit-transform:translate3d(-27px,0,0);transform:translate3d(-27px,0,0)}33%{-webkit-transform:translate3d(12px,0,0);transform:translate3d(12px,0,0)}48%{-webkit-transform:translate3d(-8px,0,0);transform:translate3d(-8px,0,0)}100%{-webkit-transform:translate3d(300%,0,0);transform:translate3d(300%,0,0)}}.perspectiveToTop{-webkit-animation-name:perspectiveToTop;animation-name:perspectiveToTop;-webkit-transform:perspective(500px);transform:perspective(500px);-webkit-transform-style:preserve-3d;transform-style:preserve-3d}@-webkit-keyframes perspectiveToTop{50%{opacity:1}to{-webkit-transform:perspective(500px) rotateX(90deg) translateY(-50px) translateZ(50px);transform:perspective(500px) rotateX(90deg) translateY(-50px) translateZ(50px);opacity:0}}@keyframes perspectiveToTop{50%{opacity:1}to{-webkit-transform:perspective(500px) rotateX(90deg) translateY(-50px) translateZ(50px);transform:perspective(500px) rotateX(90deg) translateY(-50px) translateZ(50px);opacity:0}}.perspectiveToBottom{-webkit-animation-name:perspectiveToBottom;animation-name:perspectiveToBottom;-webkit-transform:perspective(500px);transform:perspective(500px);-webkit-transform-style:preserve-3d;transform-style:preserve-3d}@-webkit-keyframes perspectiveToBottom{50%{opacity:1}to{-webkit-transform:perspective(500px) rotateX(90deg) translateY(50px) translateZ(-50px);transform:perspective(500px) rotateX(90deg) translateY(50px) translateZ(-50px);opacity:0}}@keyframes perspectiveToBottom{50%{opacity:1}to{-webkit-transform:perspective(500px) rotateX(90deg) translateY(50px) translateZ(-50px);transform:perspective(500px) rotateX(90deg) translateY(50px) translateZ(-50px);opacity:0}}.zoomIn{-webkit-animation-name:zoomIn;animation-name:zoomIn}@-webkit-keyframes zoomIn{from{-webkit-transform:scale(10);transform:scale(10);opacity:0}}@keyframes zoomIn{from{-webkit-transform:scale(10);transform:scale(10);opacity:0}}.zoomInLeft{-webkit-animation-name:zoomInLeft;animation-name:zoomInLeft}@-webkit-keyframes zoomInLeft{from{-webkit-transform:scale(10) translateX(-50%);transform:scale(10) translateX(-50%);opacity:0}}@keyframes zoomInLeft{from{-webkit-transform:scale(10) translateX(-50%);transform:scale(10) translateX(-50%);opacity:0}}.zoomInRight{-webkit-animation-name:zoomInRight;animation-name:zoomInRight}@-webkit-keyframes zoomInRight{from{-webkit-transform:scale(10) translateX(50%);transform:scale(10) translateX(50%);opacity:0}}@keyframes zoomInRight{from{-webkit-transform:scale(10) translateX(50%);transform:scale(10) translateX(50%);opacity:0}}.zoomInTop{-webkit-animation-name:zoomInTop;animation-name:zoomInTop}@-webkit-keyframes zoomInTop{from{-webkit-transform:scale(10) translateY(-50%);transform:scale(10) translateY(-50%);opacity:0}}@keyframes zoomInTop{from{-webkit-transform:scale(10) translateY(-50%);transform:scale(10) translateY(-50%);opacity:0}}.zoomInBottom{-webkit-animation-name:zoomInBottom;animation-name:zoomInBottom}@-webkit-keyframes zoomInBottom{from{-webkit-transform:scale(10) translateY(50%);transform:scale(10) translateY(50%);opacity:0}}@keyframes zoomInBottom{from{-webkit-transform:scale(10) translateY(50%);transform:scale(10) translateY(50%);opacity:0}}.zoomOut{-webkit-animation-name:zoomOut;animation-name:zoomOut}@-webkit-keyframes zoomOut{to{-webkit-transform:scale(10);transform:scale(10);opacity:0}}@keyframes zoomOut{to{-webkit-transform:scale(10);transform:scale(10);opacity:0}}.zoomOutLeft{-webkit-animation-name:zoomOutLeft;animation-name:zoomOutLeft}@-webkit-keyframes zoomOutLeft{to{-webkit-transform:scale(10) translateX(-50%);transform:scale(10) translateX(-50%);opacity:0}}@keyframes zoomOutLeft{to{-webkit-transform:scale(10) translateX(-50%);transform:scale(10) translateX(-50%);opacity:0}}.zoomOutRight{-webkit-animation-name:zoomOutRight;animation-name:zoomOutRight}@-webkit-keyframes zoomOutRight{to{-webkit-transform:scale(10) translateX(50%);transform:scale(10) translateX(50%);opacity:0}}@keyframes zoomOutRight{to{-webkit-transform:scale(10) translateX(50%);transform:scale(10) translateX(50%);opacity:0}}.zoomOutTop{-webkit-animation-name:zoomOutTop;animation-name:zoomOutTop}@-webkit-keyframes zoomOutTop{to{-webkit-transform:scale(10) translateY(-50%);transform:scale(10) translateY(-50%);opacity:0}}@keyframes zoomOutTop{to{-webkit-transform:scale(10) translateY(-50%);transform:scale(10) translateY(-50%);opacity:0}}.zoomOutBottom{-webkit-animation-name:zoomOutBottom;animation-name:zoomOutBottom}@-webkit-keyframes zoomOutBottom{to{-webkit-transform:scale(10) translateY(50%);transform:scale(10) translateY(50%);opacity:0}}@keyframes zoomOutBottom{to{-webkit-transform:scale(10) translateY(50%);transform:scale(10) translateY(50%);opacity:0}}.danceTop{-webkit-animation-name:danceTop;animation-name:danceTop;-webkit-transform-origin:top;transform-origin:top}@-webkit-keyframes danceTop{16%{-webkit-transform:skew(-14deg);transform:skew(-14deg)}33%{-webkit-transform:skew(12deg);transform:skew(12deg)}49%{-webkit-transform:skew(-8deg);transform:skew(-8deg)}66%{-webkit-transform:skew(6deg);transform:skew(6deg)}83%{-webkit-transform:skew(-4deg);transform:skew(-4deg)}}@keyframes danceTop{16%{-webkit-transform:skew(-14deg);transform:skew(-14deg)}33%{-webkit-transform:skew(12deg);transform:skew(12deg)}49%{-webkit-transform:skew(-8deg);transform:skew(-8deg)}66%{-webkit-transform:skew(6deg);transform:skew(6deg)}83%{-webkit-transform:skew(-4deg);transform:skew(-4deg)}}.danceMiddle{-webkit-animation-name:danceMiddle;animation-name:danceMiddle}@-webkit-keyframes danceMiddle{16%{-webkit-transform:skew(-14deg);transform:skew(-14deg)}33%{-webkit-transform:skew(12deg);transform:skew(12deg)}49%{-webkit-transform:skew(-8deg);transform:skew(-8deg)}66%{-webkit-transform:skew(6deg);transform:skew(6deg)}83%{-webkit-transform:skew(-4deg);transform:skew(-4deg)}}@keyframes danceMiddle{16%{-webkit-transform:skew(-14deg);transform:skew(-14deg)}33%{-webkit-transform:skew(12deg);transform:skew(12deg)}49%{-webkit-transform:skew(-8deg);transform:skew(-8deg)}66%{-webkit-transform:skew(6deg);transform:skew(6deg)}83%{-webkit-transform:skew(-4deg);transform:skew(-4deg)}}.danceBottom{-webkit-animation-name:danceBottom;animation-name:danceBottom;-webkit-transform-origin:bottom;transform-origin:bottom}@-webkit-keyframes danceBottom{16%{-webkit-transform:skew(-14deg);transform:skew(-14deg)}33%{-webkit-transform:skew(12deg);transform:skew(12deg)}49%{-webkit-transform:skew(-8deg);transform:skew(-8deg)}66%{-webkit-transform:skew(6deg);transform:skew(6deg)}83%{-webkit-transform:skew(-4deg);transform:skew(-4deg)}}@keyframes danceBottom{16%{-webkit-transform:skew(-14deg);transform:skew(-14deg)}33%{-webkit-transform:skew(12deg);transform:skew(12deg)}49%{-webkit-transform:skew(-8deg);transform:skew(-8deg)}66%{-webkit-transform:skew(6deg);transform:skew(6deg)}83%{-webkit-transform:skew(-4deg);transform:skew(-4deg)}} \ No newline at end of file