/*：源代码唯一下载链接: http://www.bootstrapmb.com/item/2316(此说明不在下载的源码里，只用在演示页面里)*//** * cssanimation.css * Current Version: 1.0.2 * https://www.cssanimatio.io * Created and maintained by: Pavel * Find me at: https://www.linkedin.com/in/yesiamrocks/ * Email: hello@cssanimation.io * Github: https://github.com/yesiamrocks/cssanimation.io * Title: A CSS Animation Library for Developers and Ninjas * Copyright (c) 2017 Pavel * License: cssanimation.io is licensed under the MIT license **/.cssanimation {    animation-duration: 0.9s;    animation-fill-mode: both;} .cssanimation span {    animation-duration: 0.3s;    animation-fill-mode: both;}.cssanimation span { display: inline-block }.infinite { animation-iteration-count: infinite !important }/*************************************************************Striking**************************************************************/.hu__hu__ { animation: hu__hu__ 2s ease-in-out; animation-iteration-count: 1 }@keyframes hu__hu__ {    50% { transform: translateY(30px) }}.leSnake span { animation: leSnake 1.5s ease-in-out; animation-iteration-count: 1 }@keyframes leSnake {    from, to { transform: translateY(0px) }    50% { transform: translateY(30px) }}.lePeek span { animation-name: lePeek }@keyframes lePeek {    25% {  transform: rotateX(30deg) translateY(10px) rotate(-13deg); }    50% { transform: translateY(-22px) rotate(3deg) scale(1.1);  }}.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)    }}.leRainDrop span { animation-name: leRainDrop; animation-iteration-count: 1; }@keyframes leRainDrop {    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) }}.leWaterWave span { animation: leWaterWave .2s linear 1 }@keyframes leWaterWave {    50% { transform: skewY(1deg) skewX(-1deg) scale(1.06) }}.lightning { animation-name: lightning }@keyframes lightning {    from, 50%, to { opacity: 1 }    25%, 75% { opacity: 0 }}.leJoltZoom span { animation-name: leJoltZoom }@keyframes leJoltZoom {    10% { font-size: 140% }    40% { font-size: 80% }    100% { font-size: 100% }}.typing {    width: 473px;    overflow: hidden;    white-space: nowrap;    border-right: 2px solid #7E2EA0;    animation: typing 2s steps(12, end), cursor .2s steps(12, 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 }}.leMagnify span { animation-name: leMagnify }@keyframes leMagnify {    50% {        transform: scale(1.8);        letter-spacing: 26px    }}.leBeat span { animation-name: leBeat; }@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%);    }}/*************************************************************Moving Back**************************************************************/.leMovingBackFromRight span { animation-name: leMovingBackFromRight; transform-origin: bottom }@keyframes leMovingBackFromRight {    40% { transform: rotate(45deg) }    100% {        transform: rotate(0deg);        animation-timing-function: cubic-bezier(0,.9,.7,1.45)    }}.leMovingBackFromLeft span { animation-name: leMovingBackFromLeft; transform-origin: bottom }@keyframes leMovingBackFromLeft {    40% { transform: rotate(-45deg) }    100% {        transform: rotate(0deg);        animation-timing-function: cubic-bezier(0,.9,.7,1.45)    }}/*************************************************************Kick out**************************************************************/.leKickOutBehind span { animation-name: leKickOutFront; transform-origin: top }@keyframes leKickOutFront {    40% { transform: rotate(45deg) }    100% {        transform: rotate(0deg);        animation-timing-function: cubic-bezier(0,.9,.7,1.45)    }}.leKickOutFront span { animation-name: leKickOutBehind; transform-origin: top }@keyframes leKickOutBehind {    40% { transform: rotate(-45deg) }    100% {        transform: rotate(0deg);        animation-timing-function: cubic-bezier(0,.9,.7,1.45)    }}/************************************************************Letter Skate*************************************************************/.leSkateX span { animation-name: leScaleX; animation-iteration-count: 1 }@keyframes leScaleX {    50% { transform: scaleX(0.4) }}.leSkateY span { animation-name: leSkateY; animation-iteration-count: 1 }@keyframes leSkateY {    50% { transform: scaleY(0.4) }}.leSkateXY span { animation-name: leSkateXY; animation-iteration-count: 1; animation-duration: 1.5s; }@keyframes leSkateXY {    25% { transform: scale3d(1, 0.4, 0) }    50% { transform: scale3d(0.4, 0.4, 1) }    75% { transform: scale3d(0.4, 1, 1) }}/************************************************************Letter Scale*************************************************************/.leScaleXIn span { animation-name: leScaleXIn }@keyframes leScaleXIn {    from {        transform: perspective(400px) rotateX(90deg);        opacity: 0;    }    50% { opacity: 1 }}.leScaleXOut span { animation-name: leScaleXOut }@keyframes leScaleXOut {    to {        transform: perspective(400px) rotateX(90deg);        opacity: 0;    }    from { opacity: 1 }}.leScaleYIn span { animation-name: leScaleYIn }@keyframes leScaleYIn {    from {        transform: perspective(400px) rotateY(90deg);        opacity: 0;    }    50% { opacity: 1 }}.leScaleYOut span { animation-name: leScaleYOut }@keyframes leScaleYOut {    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**************************************************************/.leAboundTop span { animation-name: leAboundTop }@keyframes leAboundTop {    50% {        transform: translateY(-100px);        animation-timing-function: ease-in;    }}.leAboundBottom span { animation-name: leAboundBottom }@keyframes leAboundBottom {    50% {        transform: translateY(100px);        animation-timing-function: ease-in;    }}.leAboundLeft span { animation-name: leAboundLeft }@keyframes leAboundLeft {    50% {        transform: translateX(-100px);        animation-timing-function: ease-in    }}.leAboundRight span { animation-name: leAboundRight }@keyframes leAboundRight {    50% {        transform: translateX(100px);        animation-timing-function: ease-in    }}/*************************************************************Letter Fly In**************************************************************/.leFlyInTop span { animation-name: leFlyInTop }@keyframes leFlyInTop {    0% {        transform: translate(0px, -80px);        opacity: 0    }    50% {        transform: translate(10px, 50px);        animation-timing-function: ease-in-out    }}.leFlyInLeft span { animation-name: leFlyInLeft; animation-timing-function: ease-in-out }@keyframes leFlyInLeft {    0% {        transform: translate(-40px, 0px);        opacity: 0;    }    50% { transform: translate(40px, 0px) }}.leFlyInRight span { animation-name: leFlyInRight; animation-timing-function: ease-in-out }@keyframes leFlyInRight {    0% {        transform: translate(40px, 0px);        opacity: 0;    }    50% { transform: translate(-40px, 0px) }}.leFlyInBottom span { animation-name: leFlyInBottom }@keyframes leFlyInBottom {    0% {        transform: translate(0px, 80px);        opacity: 0    }    50% {        transform: translate(10px, -50px);        animation-timing-function: ease-in-out    }}/*************************************************************Letter Fly Out**************************************************************/.leFlyOutTop span { animation-name: leFlyOutTop }@keyframes leFlyOutTop {    50% { transform: translate(0px, 50px) }    to {        transform: translate(0px, -100px);        opacity: 0;    }}.leFlyOutLeft span { animation-name: leFlyOutLeft; animation-timing-function: ease-in-out }@keyframes leFlyOutLeft {    50% { transform: translate(40px, 0px) }    to {        transform: translate(-100px, 0px);        opacity: 0;    }}.leFlyOutRight span { animation-name: leFlyOutRight; animation-timing-function: ease-in-out }@keyframes leFlyOutRight {    50% { transform: translate(-40px, 0px) }    to {        transform: translate(100px, 0px);        opacity: 0;    }}.leFlyOutBottom span { animation-name: leFlyOutBottom }@keyframes leFlyOutBottom {    50% { transform: translate(0px, -40px) }    to {        transform: translate(0px, 100px);        opacity: 0;    }}/*************************************************************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**************************************************************/.leRencontre span { animation: leRencontre .4s; animation-iteration-count: 1 }@keyframes leRencontre {    0%, 33%, 100% {        transform-origin: bottom;        animation-timing-function: cubic-bezier(.17,.67,.79,1.83)    }    33% { transform: translateY(-2px) rotate(-3deg) }    66% { transform: translateY(2px) rotate(3deg) }}.lePulseShake span { animation-name: lePulseShake; animation-iteration-count: 1 }@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: 1 }@keyframes leHorizontalShake {    3%, 12%, 21%, 30%, 39%, 48%, 57%, 65%, 74%, 3%, 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: 1 }@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: 1 }@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: 1 }@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: 1 }@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: 1 }@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 2 }@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**************************************************************/.leFlipInTop span { animation-name: leFlipInTop }@keyframes leFlipInTop {    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) }}.leFlipOutTop span { animation-name: leFlipOutTop }@keyframes leFlipOutTop {    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) }}.leFlipInBottom span { animation-name: leFlipInBottom }@keyframes leFlipInBottom {    from {        transform: perspective(600px);        opacity: 0    }    30% {        transform: perspective(600px) rotateX(180deg);        transform-origin: bottom;        animation-timing-function: ease-out;    }    to { transform: perspective(600px) }}.leFlipOutBottom span { animation-name: leFlipOutBottom }@keyframes leFlipOutBottom {    to {        transform: perspective(600px);        opacity: 0    }    70% {        transform: perspective(600px) rotateX(180deg);        transform-origin: bottom;        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 Rotate In skate**************************************************************/.leRotateSkateInRight span { animation-name: leRotateSkateInRight }@keyframes leRotateSkateInRight {    from {        transform: scaleX(0.2) translateX(100px);        opacity: 0;    }}.leRotateSkateInLeft span { animation-name: leRotateSkateInLeft }@keyframes leRotateSkateInLeft {    from {        transform: scaleX(0.2) translateX(-100px);        opacity: 0;    }}.leRotateSkateInTop span { animation-name: leRotateSkateInTop }@keyframes leRotateSkateInTop {    from {        transform: scaleY(0.2) translateY(-100px);        opacity: 0;    }}.leRotateSkateInBottom span { animation-name: leRotateSkateInBottom }@keyframes leRotateSkateInBottom {    from {        transform: scaleY(0.2) translateY(100px);        opacity: 0;    }}/*************************************************************Letter Rotate Out skate**************************************************************/.leRotateSkateOutRight span { animation-name: leRotateSkateOutRight }@keyframes leRotateSkateOutRight {    to {        transform: scaleX(0.2) translateX(100px);        opacity: 0;    }}.leRotateSkateOutLeft span { animation-name: leRotateSkateOutLeft }@keyframes leRotateSkateOutLeft {    to {        transform: scaleX(0.2) translateX(-100px);        opacity: 0;    }}.leRotateSkateOutTop span { animation-name: leRotateSkateOutTop }@keyframes leRotateSkateOutTop {    to {        transform: scaleY(0.2) translateY(-100px);        opacity: 0;    }}.leRotateSkateOutBottom span { animation-name: leRotateSkateOutBottom }@keyframes leRotateSkateOutBottom {    to {        transform: scaleY(0.2) translateY(100px);        opacity: 0;    }}/*************************************************************Letter Rotation**************************************************************/.leRotateXZoomIn span { animation-name: leRotateXZoomIn }@keyframes leRotateXZoomIn {    from {        transform: perspective(600px) translate3d(0, -60px, -2000px) rotateX(75deg);        opacity: 0    }    5% { transform: perspective(600px) translate3d(0, -60px, -1500px) rotateX(75deg) }}.leRotateXZoomOut span { animation-name: leRotateXZoomOut }@keyframes leRotateXZoomOut {    95% { transform: perspective(600px) translate3d(0, -60px, -1500px) rotateX(75deg) }    to {        transform: perspective(600px) translate3d(0, -60px, -2000px) rotateX(75deg);        opacity: 0    }}.leRotateYZoomIn span { animation-name: leRotateYZoomIn }@keyframes leRotateYZoomIn {    from {        transform: perspective(600px) translate3d(0, -60px, -2000px) rotateY(75deg);        opacity: 0    }    5% { transform: perspective(600px) translate3d(0, -60px, -1500px) rotateY(75deg) }}.leRotateYZoomOut span { animation-name: leRotateYZoomOut }@keyframes leRotateYZoomOut {    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**************************************************************/.leBlurIn span { animation-name: leBlurIn }@keyframes leBlurIn {    from {        transform: scaleX(0.2);        filter: blur(20px);        opacity: 0;    }}.leBlurInRight span { animation-name: leBlurInRight }@keyframes leBlurInRight {    from {        transform: scaleX(0.2) translateX(100px);        filter: blur(20px);        opacity: 0;    }}.leBlurInLeft span { animation-name: leBlurInLeft }@keyframes leBlurInLeft {    from {        transform: scaleX(0.2) translateX(-100px);        filter: blur(20px);        opacity: 0;    }}.leBlurInTop span { animation-name: leBlurInTop }@keyframes leBlurInTop {    from {        transform: scaleY(0.2) translateY(-100px);        filter: blur(20px);        opacity: 0;    }}.leBlurInBottom span { animation-name: leBlurInBottom }@keyframes leBlurInBottom {    from {        transform: scaleY(0.2) translateY(100px);        filter: blur(20px);        opacity: 0;    }}/*************************************************************Letter Blur Out**************************************************************/.leBlurOut span { animation-name: leBlurOut }@keyframes leBlurOut {    to {        transform: scaleX(0.2);        filter: blur(20px);        opacity: 0;    }}.leBlurOutRight span { animation-name: leBlurOutRight }@keyframes leBlurOutRight {    to {        transform: scaleX(0.2) translateX(100px);        filter: blur(20px);        opacity: 0;    }}.leBlurOutLeft span { animation-name: leBlurOutLeft }@keyframes leBlurOutLeft {    to {        transform: scaleX(0.2) translateX(-100px);        filter: blur(20px);        opacity: 0;    }}.leBlurOutTop span { animation-name: leBlurOutTop }@keyframes leBlurOutTop {    to {        transform: scaleY(0.2) translateY(-100px);        filter: blur(20px);        opacity: 0;    }}.leBlurOutBottom span { animation-name: leBlurOutBottom }@keyframes leBlurOutBottom {    to {        transform: scaleY(0.2) translateY(100px);        filter: blur(20px);        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 }}/*************************************************************One After One Fade in**************************************************************/.oaoFadeIn span:nth-child(even) { animation-name: leoaoFadeInTop; animation-duration: .7s; animation-timing-function: ease-out; }@keyframes leoaoFadeInTop {    from {        transform: translateY(-100px);        opacity: 0;    }}.oaoFadeIn span:nth-child(odd) { animation-name: leoaoFadeInBottom; animation-duration: .7s; animation-timing-function: ease-out;  }@keyframes leoaoFadeInBottom {    from {        transform: translateY(100px);        opacity: 0;    }}.oaoFadeOut span:nth-child(even) { animation-name: leoaoFadeOutop; animation-duration: .7s; animation-timing-function: ease-in; }@keyframes leoaoFadeOutop {    to {        transform: translateY(-100px);        opacity: 0;    }}.oaoFadeOut span:nth-child(odd) { animation-name: leoaoFadeOutBottom; animation-duration: .7s; animation-timing-function: ease-in;  }@keyframes leoaoFadeOutBottom {    to {        transform: translateY(100%);        opacity: 0;    }}.oaoFlyIn span:nth-child(even) { animation-name: leoaoFlyInTop }@keyframes leoaoFlyInTop {    0% {        transform: translateY(80px);        opacity: 0    }    50% {        transform: translateY(-50px);        animation-timing-function: ease-out    }}.oaoFlyIn span:nth-child(odd) { animation-name: leoaoFlyInBottom }@keyframes leoaoFlyInBottom {    0% {        transform: translateY(-80px);        opacity: 0    }    50% {        transform: translateY(50px);        animation-timing-function: ease-out    }}.oaoFlyOut span:nth-child(even) { animation-name: leoaoFlyOutTop }@keyframes leoaoFlyOutTop {    30% {        transform: translateY(80px);        animation-timing-function: ease-out    }    80% {        transform: translateY(-50px);        animation-timing-function: ease-out    }    to { opacity: 0 }}.oaoFlyOut span:nth-child(odd) { animation-name: leoaoFlyOutBottom }@keyframes leoaoFlyOutBottom {    30% {        transform: translateY(-80px);        animation-timing-function: ease-out    }    80% {        transform: translateY(50px);        animation-timing-function: ease-out    }    to { opacity: 0 }}.oaoRotateIn span:nth-child(even) { animation-name: oaoRotateInTop }@keyframes oaoRotateInTop {    from {        transform: translateY(-100px) rotate(360deg);        opacity: 0;    }}.oaoRotateIn span:nth-child(odd) { animation-name: oaoRotateInBottom }@keyframes oaoRotateInBottom {    from {        transform: translateY(100px) rotate(360deg);        opacity: 0;    }}.oaoRotateOut span:nth-child(even) { animation-name: oaoRotateOutTop }@keyframes oaoRotateOutTop {    to {        transform: translateY(-100px) rotate(360deg);        opacity: 0;    }}.oaoRotateOut span:nth-child(odd) { animation-name: oaoRotateOutBottom }@keyframes oaoRotateOutBottom {    to {        transform: translateY(100px) rotate(360deg);        opacity: 0;    }}.oaoRotateXIn span:nth-child(even) { animation-name: oaoRotateXInTop }@keyframes oaoRotateXInTop {    from {        transform: translateY(-100px) rotateX(360deg);        opacity: 0;    }}.oaoRotateXIn span:nth-child(odd) { animation-name: oaoRotateXInBottom }@keyframes oaoRotateXInBottom {    from {        transform: translateY(100px) rotateX(360deg);        opacity: 0;    }}.oaoRotateXOut span:nth-child(even) { animation-name: oaoRotateXOutTop }@keyframes oaoRotateXOutTop {    to {        transform: translateY(-100px) rotateX(360deg);        opacity: 0;    }}.oaoRotateXOut span:nth-child(odd) { animation-name: oaoRotateXOutBottom }@keyframes oaoRotateXOutBottom {    to {        transform: translateY(100px) rotateX(360deg);        opacity: 0;    }}.oaoRotateYIn span:nth-child(even) { animation-name: oaoRotateYInTop }@keyframes oaoRotateYInTop {    from {        transform: translateY(-100px) rotateY(360deg);        opacity: 0;    }}.oaoRotateYIn span:nth-child(odd) { animation-name: oaoRotateYInBottom }@keyframes oaoRotateYInBottom {    from {        transform: translateY(100px) rotateY(360deg);        opacity: 0;    }}.oaoRotateYOut span:nth-child(even) { animation-name: oaoRotateYOutTop }@keyframes oaoRotateYOutTop {    to {        transform: translateY(-100px) rotateY(360deg);        opacity: 0;    }}.oaoRotateYOut span:nth-child(odd) { animation-name: oaoRotateYOutBottom }@keyframes oaoRotateYOutBottom {    to {        transform: translateY(100px) rotateY(360deg);        opacity: 0;    }}/*************************************************************Fade in**************************************************************/.fadeIn { animation-name: fadeIn }@keyframes fadeIn {    from { opacity: 0 }    to { opacity: 1 }}.cssanimation.fadeInLeft { animation-name: bfadeInLeft }@keyframes bfadeInLeft {    from {        opacity: 0;        transform: translateX(-150px);    }    to { opacity: 1 }}.cssanimation.fadeInRight { animation-name: bfadeInRight }@keyframes bfadeInRight {    from {        opacity: 0;        transform: translateX(150px);    }    to { opacity: 1 }}.cssanimation.fadeInTop { animation-name: bfadeInTop }@keyframes bfadeInTop {    from {        opacity: 0;        transform: translateY(-50px);    }    to { opacity: 1 }}.cssanimation.fadeInBottom { animation-name: bfadeInBottom }@keyframes bfadeInBottom {    from {        opacity: 0;        transform: translateY(50px);    }    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(-300px) }}.moveFromRight { animation-name: moveFromRight }@keyframes moveFromRight {    from { transform: translateX(300px) }}.moveFromTop { animation-name: moveFromTop }@keyframes moveFromTop {    from { transform: translateY(-300px) }}.moveFromBottom { animation-name: moveFromBottom }@keyframes moveFromBottom {    from { transform: translateY(300px) }}/*************************************************************Move To**************************************************************/.moveToLeft { animation-name: moveToLeft }@keyframes moveToLeft {    to { transform: translateX(-800px) }}.moveToRight { animation-name: moveToRight }@keyframes moveToRight {    to { transform: translateX(800px) }}.moveToTop { animation-name: moveToTop }@keyframes moveToTop {    to { transform: translateY(-800px) }}.moveToBottom { animation-name: moveToBottom }@keyframes moveToBottom {    to { transform: translateY(800px) }}/*************************************************************Door**************************************************************/.doorCloseFromLeft { animation-name: doorCloseFromLeft }@keyframes doorCloseFromLeft {    from {        transform: perspective(400px) rotateY(90deg);        transform-origin: left;        opacity: 0;    }    50%, to {        transform: perspective(400px) rotateY(0deg);        transform-origin: left;        opacity: 1;    }}.doorOpenFromRight { animation-name: doorOpenFromRight }@keyframes doorOpenFromRight {    from {        transform: perspective(400px) rotateY(0deg);        transform-origin: left;        opacity: 1;    }    50%, to {        transform: perspective(400px) rotateY(90deg);        transform-origin: left;        opacity: 0;    }}.doorCloseFromRight { animation-name: doorCloseFromRight }@keyframes doorCloseFromRight {    from {        transform: perspective(400px) rotateY(-90deg);        transform-origin: right;        opacity: 0;    }    50%, to {        transform: perspective(400px) rotateY(0deg);        transform-origin: right;        opacity: 1;    }}.doorOpenFromLeft { animation-name: doorOpenFromLeft }@keyframes doorOpenFromLeft {    from {        transform: perspective(400px) rotateY(0deg);        transform-origin: right;        opacity: 1;    }    50%, to {        transform: perspective(400px) rotateY(-90deg);        transform-origin: right;        opacity: 0;    }}/*************************************************************Heartbeat**************************************************************/.heartbeatSlow { animation-name: heartbeatSlow; animation-iteration-count: 3; animation-duration: .5s }@keyframes heartbeatSlow {    35%, 65% { transform: scale(1.2) }}.heartbeatFast { animation-name: heartbeatFast; animation-iteration-count: infinite }@keyframes heartbeatFast {    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;        opacity: 1;    }    to {        transform: translateY(300px) rotate(70deg);        transform-origin: left;        opacity: 0;    }}.hangAndDropRight { animation-name: hangAndDropRight }@keyframes hangAndDropRight {    from { transform-origin: right }    50% {        transform: rotate(-100deg);        transform-origin: right;    }    60% {        transform: rotate(-90deg);        transform-origin: right;        opacity: 1;    }    to {        transform: translateY(300px) rotate(-70deg);        transform-origin: right;        opacity: 0    }}/*************************************************************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%); opacity: 0; }    30% { transform: translateX(100px); opacity: 1; }}.pushReleaseFromRight { animation-name: pushReleaseFromRight }@keyframes pushReleaseFromRight {    from { transform: translateX(100%); opacity: 0; }    30% { transform: translateX(-100px); opacity: 1; }}.pushReleaseFromTop { animation-name: pushReleaseFromTop }@keyframes pushReleaseFromTop {    from { transform: translateY(-100%); opacity: 0; }    30% { transform: translateY(100px); opacity: 1; }}.pushReleaseFromBottom { animation-name: pushReleaseFromBottom }@keyframes pushReleaseFromBottom {    from { transform: translateY(100%); opacity: 0; }    30% { transform: translateY(-100px); opacity: 1; }}/*************************************************************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%);        opacity: 0;    }}.pushReleaseToRight { animation-name: pushReleaseToRight }@keyframes pushReleaseToRight {    30% { transform: translateX(-100px) }    to {        transform: translateX(100%);        opacity: 0;    }}.pushReleaseToTop { animation-name: pushReleaseToTop }@keyframes pushReleaseToTop {    30% { transform: translateY(100px) }    to {        transform: translateY(-100%);        opacity: 0;    }}.pushReleaseToBottom { animation-name: pushReleaseToBottom }@keyframes pushReleaseToBottom {    30% { transform: translateY(-100px) }    to {        transform: translateY(100%);        opacity: 0;    }}/*************************************************************Flip X**************************************************************/.flipX { animation-name: flipX }@keyframes flipX {    from {        transform: perspective(600px) rotateX(-180deg);        opacity: 0;    }    to { transform: perspective(600px) rotateX(-360deg) }}.flipXZoomIn { animation-name: flipXZoomIn }@keyframes flipXZoomIn {    from {      transform: perspective(600px) rotateX(0deg) scale(1);      animation-timing-function: ease-out;    }    40% {      transform: perspective(600px) rotateX(-180deg) scale(1.8);      animation-timing-function: ease-out;    }    80% {      transform: perspective(600px) rotateX(-360deg) scale(.7);      animation-timing-function: ease-in;    }    to  { transform: scale(1) }}.flipXZoomOut { animation-name: flipXZoomOut }@keyframes flipXZoomOut {    from {      transform: perspective(600px) rotateX(0deg) scale(1);      animation-timing-function: ease-out;    }    40% {      transform: perspective(600px) rotateX(180deg) scale(1.8);      animation-timing-function: ease-out;    }    80% {      transform: perspective(600px) rotateX(360deg) scale(.7);      animation-timing-function: ease-in;    }    to  { transform: scale(1) }}/*************************************************************Flip Y**************************************************************/.flipY { animation-name: flipY }@keyframes flipY {    from {        transform: perspective(600px) rotateY(180deg);        opacity: 0;    }    to { transform: perspective(600px) rotateY(360deg) }}.flipYZoomIn { animation-name: flipYZoomIn }@keyframes flipYZoomIn {    from {      transform: perspective(600px) rotateY(0deg) scale(1);      animation-timing-function: ease-out;    }    40% {      transform: perspective(600px) rotateY(180deg) scale(1.6);      animation-timing-function: ease-out;    }    80% {      transform: perspective(600px) rotateY(360deg) scale(.7);      animation-timing-function: ease-in;    }    to  { transform: scale(1) }}.flipYZoomOut { animation-name: flipYZoomOut }@keyframes flipYZoomOut {    from {      transform: perspective(600px) rotateY(0deg) scale(1);      animation-timing-function: ease-out;    }    40% {      transform: perspective(600px) rotateY(180deg) scale(.6);      animation-timing-function: ease-out;    }    80% {      transform: perspective(600px) rotateY(360deg) scale(1.8);      animation-timing-function: ease-in;    }    to  { transform: scale(1) }}/*************************************************************Skew**************************************************************/.skewLeft { animation-name: skewLeft }@keyframes skewLeft {    70% { transform: skewX(40deg) }}.skewRight { animation-name: skewRight }@keyframes skewRight {    70% { transform: skewX(-40deg) }}.skewInLeft { animation-name: skewInLeft }@keyframes skewInLeft {    from {        opacity: 0;        transform: translateX(-250px) skewX(-40deg)    }    70% { transform: skewX(-30deg) }}.skewInRight { animation-name: skewInRight }@keyframes skewInRight {    from {        opacity: 0;        transform: translateX(250px) skewX(40deg)    }    70% { transform: skewX(30deg) }}.skewOutLeft { animation-name: skewOutLeft }@keyframes skewOutLeft {    20% { transform: skewX(40deg) }    to {        transform: translateX(-100%) skewX(40deg);        opacity: 0    }}.skewOutRight { animation-name: skewOutRight }@keyframes skewOutRight {    20% { transform: skewX(-40deg) }    to {        transform: translateX(100%) skewX(-40deg);        opacity: 0    }}/*************************************************************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**************************************************************/.pullRelease { animation-name: pullRelease }@keyframes pullRelease {    15% { transform: scale(1.8) }}.pushRelease { animation-name: pushRelease }@keyframes pushRelease {    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    }    to {        transform: translateX(0) perspective(600px) rotateY(0deg);        opacity: 1    }}.rollFromRight { animation-name: rollFromRight }@keyframes rollFromRight {    from {        transform: translateX(100%) perspective(600px) rotateY(-180deg);        opacity: 0    }    to {        transform: translateX(0) perspective(600px) rotateY(0deg);        opacity: 1    }}.rollFromTop { animation-name: rollFromTop }@keyframes rollFromTop {    from {        transform: translateY(-100%) perspective(600px) rotateY(180deg);        opacity: 0    }    to {        transform: translateY(0) perspective(600px) rotateY(0deg);        opacity: 1    }}.rollFromBottom { animation-name: rollFromBottom }@keyframes rollFromBottom {    from {        transform: translateY(100%) perspective(600px) rotateY(-180deg);        opacity: 0    }    to {        transform: translateY(0) perspective(600px) rotateY(0deg);        opacity: 1    }}/*************************************************************Roll To**************************************************************/.rollToLeft { animation-name: rollToLeft }@keyframes rollToLeft {    from {        transform: translateX(0) perspective(600px) rotateY(0deg);        opacity: 1    }    to {        transform: translateX(-100%) perspective(600px) rotateY(180deg);        opacity: 0    }}.rollToRight { animation-name: rollToRight }@keyframes rollToRight {    from {        transform: translateX(0) perspective(600px) rotateY(0deg);        opacity: 1    }    to {        transform: translateX(100%) perspective(600px) rotateY(-180deg);        opacity: 0    }}.rollToTop { animation-name: rollToTop }@keyframes rollToTop {    from {        transform: translateY(0) perspective(600px) rotateX(0deg);        opacity: 1    }    to {        transform: translateY(-100%) perspective(600px) rotateX(180deg);        opacity: 0    }}.rollToBottom { animation-name: rollToBottom }@keyframes rollToBottom {    to {        transform: translateY(0) perspective(600px) rotateX(0deg);        opacity: 1    }    to {        transform: translateY(100%) perspective(600px) rotateX(-180deg);        opacity: 0    }}/*************************************************************Rotation**************************************************************/.rotate { animation-name: rotate; animation-timing-function: ease-in-out }@keyframes rotate {    from { transform: rotate(0deg) }    to { transform: rotate(360deg) }}.rotateX { animation-name: rotateX }@keyframes rotateX {    from { transform: perspective(600px) rotateX(0deg) }    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 {    from { transform: perspective(600px) rotateY(0deg) }    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 {        opacity: 0;        transform: translateX(-100%) rotate(0deg)    }    to { transform: translateX(0px) rotate(360deg) }}.rotateInRight { animation-name: rotateInRight }@keyframes rotateInRight {    from {        opacity: 0;        transform: translateX(100%) rotate(0deg)    }    to { transform: translateX(0px) rotate(-360deg) }}.rotateInTop { animation-name: rotateInTop }@keyframes rotateInTop {    from {        opacity: 0;        transform: translateY(-400%) rotate(0deg)    }    to { transform: translateX(0px) rotate(360deg) }}.rotateInBottom { animation-name: rotateInBottom }@keyframes rotateInBottom {    from {        opacity: 0;        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(-800px) rotate(0deg);        opacity: 0    }}.rotateOutRight { animation-name: rotateOutRight }@keyframes rotateOutRight {    from { transform: translateX(0px) rotate(-360deg) }    to {        transform: translateX(800px) rotate(0deg);        opacity: 0    }}.rotateOutTop { animation-name: rotateOutTop }@keyframes rotateOutTop {    from { transform: translateX(0px) rotate(360deg) }    to {        transform: translateY(-800px) rotate(0deg);        opacity: 0    }}.rotateOutBottom { animation-name: rotateOutBottom }@keyframes rotateOutBottom {    from { transform: translateX(0px) rotate(360deg) }    to {        transform: translateY(800px) rotate(0deg);        opacity: 0    }}/*************************************************************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 {    from {        filter: blur(20px);        opacity: 0;    }}.blurInLeft { animation-name: blurInLeft }@keyframes blurInLeft {    from {        transform: translateX(250px);        filter: blur(20px);        opacity: 0;    }}.blurInRight { animation-name: blurInRight }@keyframes blurInRight {    from {        transform: translateX(-250px);        filter: blur(20px);        opacity: 0;    }}.blurInTop { animation-name: blurInTop }@keyframes blurInTop {    from {        transform: translateY(250px);        filter: blur(20px);        opacity: 0;    }}.blurInBottom { animation-name: blurInBottom }@keyframes blurInBottom {    from {        transform: translateY(-250px);        filter: blur(20px);        opacity: 0;    }}/*************************************************************Blur Out**************************************************************/.blurOut { animation-name: blurOut }@keyframes blurOut {    85%, to { filter: blur(20px) }    to { opacity: 0 }}.blurOutLeft { animation-name: blurOutLeft }@keyframes blurOutLeft {    85%, to {        filter: blur(20px);        transform: translateX(100%);    }    to { opacity: 0 }}.blurOutRight { animation-name: blurOutRight }@keyframes blurOutRight {    85%, to {        filter: blur(20px);        transform: translateX(-100%);    }    to { opacity: 0 }}.blurOutTop { animation-name: blurOutTop }@keyframes blurOutTop {    85%, to {        filter: blur(20px);        transform: translateY(100%);    }    to { opacity: 0 }}.blurOutBottom { animation-name: blurOutBottom }@keyframes blurOutBottom {    85%, to {        filter: blur(20px);        transform: translateY(-100%);    }    to { opacity: 0 }}/*************************************************************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.6, 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);opacity: 0; }    58% { transform: translate3d(0, 27px, 0);opacity: 1; }    73% { transform: translate3d(0, -12px, 0) }    88% { transform: translate3d(0, 7px, 0) }}.bounceInBottom { animation-name: bounceInBottom }@keyframes bounceInBottom {    0% { transform: translate3d(0, 300%, 0);opacity: 0; }    58% { transform: translate3d(0, -27px, 0);opacity: 1; }    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%, 33%, 48% { opacity: 1}    18% { transform: translate3d(0, 27px, 0) }    33% { transform: translate3d(0, -12px, 0) }    48% { transform: translate3d(0, 8px, 0) }    100% {        opacity: 0;        transform: translate3d(0, -300%, 0)    }}.bounceOutBottom { animation-name: bounceOutBottom }@keyframes bounceOutBottom {    18%, 33%, 48% { opacity: 1}    18% { transform: translate3d(0, -27px, 0) }    33% { transform: translate3d(0, 12px, 0) }    48% { transform: translate3d(0, -8px, 0) }    100% {        opacity: 0;        transform: translate3d(0, 300%, 0)    }}.bounceOutLeft { animation-name: bounceOutLeft }@keyframes bounceOutLeft {    18%, 33%, 48% { opacity: 1}    18% { transform: translate3d(27px, 0, 0) }    33% { transform: translate3d(-12px, 0, 0) }    48% { transform: translate3d(8px, 0, 0) }    100% {        opacity: 0;        transform: translate3d(-300%, 0, 0)    }}.bounceOutRight { animation-name: bounceOutRight }@keyframes bounceOutRight {    18%, 33%, 48% { opacity: 1}    18% { transform: translate3d(-27px, 0, 0) }    33% { transform: translate3d(12px, 0, 0) }    48% { transform: translate3d(-8px, 0, 0) }    100% {        opacity: 0;        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) }}/*：源代码唯一下载链接: http://www.bootstrapmb.com/item/2316(此说明不在下载的源码里，只用在演示页面里)*/