<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="cssanimation leSnake sequence"> Example </div>
/**
* cssanimation.css
* Current Version: 1.0.3
* 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, .cssanimation span {
animation-duration: 1s;
animation-fill-mode: both;
}
.cssanimation span { display: inline-block }
.infinite { animation-iteration-count: infinite !important }
/*************************************************************
Striking
**************************************************************/
.hu__hu__ { animation: hu__hu__ infinite 2s ease-in-out }
@keyframes hu__hu__ {
50% { transform: translateY(30px) }
}
.leSnake span { animation: leSnake 1.5s ease-in-out; animation-iteration-count: infinite }
@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: infinite; }
@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 infinite }
@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: infinite }
@keyframes leScaleX {
50% { transform: scaleX(0.4) }
}
.leSkateY span { animation-name: leSkateY; animation-iteration-count: infinite }
@keyframes leSkateY {
50% { transform: scaleY(0.4) }
}
.leSkateXY span { animation-name: leSkateXY; animation-iteration-count: infinite; 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: infinite }
@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: 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%, 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: 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
**************************************************************/
.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 }
}
.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(-800px) }
}
.moveFromRight { animation-name: moveFromRight }
@keyframes moveFromRight {
from { transform: translateX(800px) }
}
.moveFromTop { animation-name: moveFromTop }
@keyframes moveFromTop {
from { transform: translateY(-800px) }
}
.moveFromBottom { animation-name: moveFromBottom }
@keyframes moveFromBottom {
from { transform: translateY(800px) }
}
/*************************************************************
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: infinite; 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%) }
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%);
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(-100%) skewX(-40deg)
}
70% { transform: skewX(-30deg) }
}
.skewInRight { animation-name: skewInRight }
@keyframes skewInRight {
from {
opacity: 0;
transform: translateX(100%) 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(100%);
filter: blur(20px);
opacity: 0;
}
}
.blurInRight { animation-name: blurInRight }
@keyframes blurInRight {
from {
transform: translateX(-100%);
filter: blur(20px);
opacity: 0;
}
}
.blurInTop { animation-name: blurInTop }
@keyframes blurInTop {
from {
transform: translateY(100%);
filter: blur(20px);
opacity: 0;
}
}
.blurInBottom { animation-name: blurInBottom }
@keyframes blurInBottom {
from {
transform: translateY(-100%);
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) }
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%, 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) }
}
}
/**
* letteranimation.js
* Current Version: 1.0.3
* 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
**/
function animateSequence(){for(var n=document.getElementsByClassName("sequence"),a=0;a<n.length;a++){var e=n[a],t=e.innerHTML;t=t.trim();var i="",m=100;for(l=0;l<t.length;l++)" "!=t[l]?(i+='<span style="animation-delay:'+m+"ms; -moz-animation-delay:"+m+"ms; -webkit-animation-delay:"+m+'ms; ">'+t[l]+"</span>",m+=150):i+=t[l];e.innerHTML=i}}function animateRandom(){for(var n=document.getElementsByClassName("random"),a=0;a<n.length;a++){var e=n[a],t=e.innerHTML;t=t.trim();var i=70,m=new Array,o=new Array;for(j=0;j<t.length;j++){for(;;){var r=getRandomInt(0,t.length-1);if(-1==m.indexOf(r))break}m[j]=r}for(l=0;l<m.length;l++){var s="",d=m[l];" "!=t[d]?(s='<span style="animation-delay:'+i+"ms; -moz-animation-delay:"+i+"ms; -webkit-animation-delay:"+i+'ms; ">'+t[d]+"</span>",o[d]=s):o[d]=t[d],i+=80}o=o.join(""),e.innerHTML=o}}function getRandomInt(n,a){return Math.floor(Math.random()*(a-n+1))+n}window.onload=function(){animateSequence(),animateRandom()};
