.animated {
animation-fill-mode: both
}

@keyframes boomerang {
10% {
z-index: 1;
transform: rotate(-20deg)
}

35% {
z-index: 1;
transform: translate(220%,-55%) scale(.5) rotate(-200deg)
}

74% {
z-index: -1
}

75% {
transform: translate(-200%,55%) scale(.9) rotate(-860deg)
}

80% {
z-index: 1
}

90% {
z-index: 1;
transform: translate(0,0) rotate(-10deg)
}
}

.boomerang {
animation-name: boomerang;
animation-duration: 3s
}

@keyframes swivelChair {
from {
transform: perspective(400px) rotate3d(0,1,0,90deg);
animation-timing-function: ease-in;
opacity: 1
}

40% {
transform: perspective(400px) rotate3d(0,1,0,-20deg);
animation-timing-function: ease-in
}

60% {
transform: perspective(400px) rotate3d(0,1,0,10deg);
opacity: 1
}

80% {
transform: perspective(400px) rotate3d(0,1,0,-5deg)
}

to {
transform: perspective(400px)
}
}

.airplanePropeller, .gettinInYoFace {
animation-timing-function: ease-in-out
}

.swivelChair {
animation-name: swivelChair;
animation-duration: 2s
}

@keyframes gettinInYoFace {
from {
opacity: 1;
transform: perspective(400px) scale(1)
}

to {
opacity: 1;
transform: perspective(400px) scale(100)
}
}

.gettinInYoFace {
animation-name: gettinInYoFace;
animation-duration: 3s
}

@keyframes airplanePropeller {
from {
transform-origin: center;
transform: rotate(-20000deg);
opacity: 1
}

to {
transform-origin: center;
transform: none;
opacity: 1
}
}

.airplanePropeller {
animation-name: airplanePropeller;
animation-duration: 5s
}

@-webkit-keyframes pulsate {
20%,40%,60%,80%,from {
opacity: 1
}

10%,30%,50%,70%,90% {
opacity: 0
}
}

.pulsate {
animation-name: pulsate;
animation-duration: 5s
}

@keyframes candleInTheWind {
0% {
opacity: 0
}

12.5% {
opacity: .25;
transform: skewX(-10deg)
}

25% {
opacity: 0
}

37.5% {
opacity: 0;
transform: skewX(-10deg)
}

50% {
opacity: .75
}

62.5% {
opacity: 0
}

75% {
opacity: 1;
transform: skewX(-5deg)
}

87.5% {
opacity: .5
}

100% {
opacity: 1
}
}

.candleInTheWind {
opacity: 0;
animation-name: candleInTheWind;
animation-duration: .7s;
animation-fill-mode: forwards
}

@keyframes highlighter {
0% {
background-color: rgba(0,255,255,128)
}

100% {
background-color: rgba(127,219,255,0)
}
}

@keyframes highlighter-text {
0% {
color: #0074d9
}

100% {
color: inherit
}
}

.highlighter {
animation-name: highlighter;
animation-duration: 2s;
animation-fill-mode: forwards
}

.highlight-text {
animation-name: highlighter-text;
animation-duration: 2s
}

@keyframes lawnMower {
0% {
opacity: 1
}

to {
opacity: 1;
transform: translate3d(0,0,0) rotateY(12225deg)
}
}

.lawnMower {
animation-duration: 5s;
animation-name: lawnMower;
animation-timing-function: ease-in-out
}

.bungee, .nope {
animation-duration: 2s;
animation-timing-function: ease-in-out
}

@keyframes bungee {
0%,to {
opacity: 1
}

25%,50% {
opacity: 1;
transform: scale3d(.1,.1,.1)
}
}

.bungee {
animation-name: bungee
}

@keyframes nope {
0% {
transform: translateX(0)
}

6.5% {
transform: translateX(-7px) rotateY(-10deg)
}

18.5% {
transform: translateX(6px) rotateY(8deg)
}

31.5% {
transform: translateX(-4px) rotateY(-6deg)
}

43.5% {
transform: translateX(3px) rotateY(4deg)
}

50% {
transform: translateX(0)
}
}

.nope {
animation-name: nope
}

@keyframes heartBeat {
from {
transform: scale(1)
}

50% {
transform: scale(1.2)
}

to {
transform: scale(1.1)
}
}

.heartBeat {
animation: heartBeat .66s alternate;
animation-iteration-count: 8
}

.plummit, .sleepyEyes {
animation-duration: 5s
}

@keyframes sleepyEyes {
0% {
transform: perspective(400px)
}

5% {
transform: perspective(400px) rotateX(-20deg);
opacity: .5
}

15% {
transform: perspective(400px);
opacity: 1
}

35% {
transform: perspective(400px) rotateX(-20deg);
opacity: .75
}

45% {
transform: perspective(400px) rotateX(-2deg);
opacity: 1
}

to {
transform: perspective(400px) rotateX(-90deg);
opacity: 0
}
}

.sleepyEyes {
animation-name: sleepyEyes;
backface-visibility: visible !important
}

@keyframes plummit {
from {
opacity: 1;
transform: scale(10)
}

to {
opacity: 1;
transform: scale(0)
}
}

.plummit {
animation-timing-function: ease-in-out;
animation-name: plummit
}

@keyframes dropItLikeItsHot {
from {
opacity: 1;
transform: none
}

to {
opacity: 1;
transform: translate3d(0,1000px,0)
}
}

.dropItLikeItsHot {
animation-name: dropItLikeItsHot;
animation-duration: .5s
}

@keyframes gettinLifted {
from {
opacity: 1;
transform: translate3d(0,500px,0)
}

to {
opacity: 1;
transform: none
}
}

.gettinLifted {
animation-name: gettinLifted;
animation-duration: 3s;
animation-timing-function: ease-in
}

.chameleon, .glaucoma {
animation-duration: 5s
}

@keyframes glaucoma {
from {
opacity: 1;
text-shadow: 0 0 75px #000;
color: transparent
}

to {
opacity: 1;
text-shadow: 0;
color: transparent
}
}

.glaucoma {
animation-name: glaucoma;
animation-timing-function: ease-out
}

@keyframes chameleon {
0% {
color: red
}

14.2999% {
color: orange
}

28.5999% {
color: #ff0
}

42.8998% {
color: green
}

57.1996% {
color: #00f
}

71.4995% {
color: indigo
}

85.7994% {
color: violet
}

100% {
color: red
}
}

.chameleon {
animation-name: chameleon
}

@keyframes backdrop {
0% {
background-color: red;
color: #fff
}

14.2999% {
background-color: orange;
color: #000
}

28.5999% {
background-color: #ff0;
color: #000
}

42.8998% {
background-color: green;
color: #fff
}

57.1996% {
background-color: #00f;
color: #fff
}

71.4995% {
background-color: indigo;
color: #fff
}

85.7994% {
background-color: violet;
color: #fff
}

100% {
background-color: red;
color: #fff
}
}

.backdrop {
animation-name: backdrop;
animation-duration: 10s
}