Last active
November 28, 2017 03:10
-
-
Save BrandonKlotz/29d504b52cbb77bc1775ea32e8bd84bc to your computer and use it in GitHub Desktop.
SVG Calder Animation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?xml version="1.0" encoding="utf-8"?> | |
<!-- Generator: Adobe Illustrator 20.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> | |
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> | |
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" | |
viewBox="0 0 400 400" xml:space="preserve"> | |
<defs> | |
<style type="text/css"> | |
.st0{ | |
fill:none; | |
stroke:tomato; | |
stroke-width:1; | |
stroke-miterlimit:10; | |
} | |
svg:hover .st0 { | |
animation-name: dash; | |
animation-play-state: running; | |
animation-iteration-count: infinite; | |
animation-timing-function: linear; | |
stroke-dasharray: 600; | |
stroke-dashoffset: 0; | |
-webkit-animation: dash 2.5s ease-in-out forwards; | |
-o-animation: dash 2.5s ease-in-out forwards; | |
-moz-animation: dash 2.5s ease-in-out forwards; | |
animation: dash 2.5s ease-in-out forwards; | |
} | |
@-webkit-keyframes dash { | |
from { | |
stroke-dashoffset: 600; | |
} | |
to { | |
stroke-dashoffset: 0; | |
} | |
@charset "UTF-8"; | |
/*! | |
* animate.css -http://daneden.me/animate | |
* Version - 3.5.1 | |
* Licensed under the MIT license - http://opensource.org/licenses/MIT | |
* | |
* Copyright (c) 2016 Daniel Eden | |
*/ | |
.animated { | |
-webkit-animation-duration: 1s; | |
animation-duration: 1s; | |
-webkit-animation-fill-mode: both; | |
animation-fill-mode: both; | |
} | |
.animated.infinite { | |
-webkit-animation-iteration-count: infinite; | |
animation-iteration-count: infinite; | |
} | |
.animated.hinge { | |
-webkit-animation-duration: 2s; | |
animation-duration: 2s; | |
} | |
.animated.flipOutX, | |
.animated.flipOutY, | |
.animated.bounceIn, | |
.animated.bounceOut { | |
-webkit-animation-duration: .75s; | |
animation-duration: .75s; | |
} | |
@-webkit-keyframes bounce { | |
from, 20%, 53%, 80%, to { | |
-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); | |
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); | |
-webkit-transform: translate3d(0,0,0); | |
transform: translate3d(0,0,0); | |
} | |
40%, 43% { | |
-webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); | |
animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); | |
-webkit-transform: translate3d(0, -30px, 0); | |
transform: translate3d(0, -30px, 0); | |
} | |
70% { | |
-webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); | |
animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); | |
-webkit-transform: translate3d(0, -15px, 0); | |
transform: translate3d(0, -15px, 0); | |
} | |
90% { | |
-webkit-transform: translate3d(0,-4px,0); | |
transform: translate3d(0,-4px,0); | |
} | |
} | |
@keyframes bounce { | |
from, 20%, 53%, 80%, to { | |
-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); | |
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); | |
-webkit-transform: translate3d(0,0,0); | |
transform: translate3d(0,0,0); | |
} | |
40%, 43% { | |
-webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); | |
animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); | |
-webkit-transform: translate3d(0, -30px, 0); | |
transform: translate3d(0, -30px, 0); | |
} | |
70% { | |
-webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); | |
animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); | |
-webkit-transform: translate3d(0, -15px, 0); | |
transform: translate3d(0, -15px, 0); | |
} | |
90% { | |
-webkit-transform: translate3d(0,-4px,0); | |
transform: translate3d(0,-4px,0); | |
} | |
} | |
.bounce { | |
-webkit-animation-name: bounce; | |
animation-name: bounce; | |
-webkit-transform-origin: center bottom; | |
transform-origin: center bottom; | |
} | |
@-webkit-keyframes flash { | |
from, 50%, to { | |
opacity: 1; | |
} | |
25%, 75% { | |
opacity: 0; | |
} | |
} | |
@keyframes flash { | |
from, 50%, to { | |
opacity: 1; | |
} | |
25%, 75% { | |
opacity: 0; | |
} | |
} | |
.flash { | |
-webkit-animation-name: flash; | |
animation-name: flash; | |
} | |
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ | |
@-webkit-keyframes pulse { | |
from { | |
-webkit-transform: scale3d(1, 1, 1); | |
transform: scale3d(1, 1, 1); | |
} | |
50% { | |
-webkit-transform: scale3d(1.05, 1.05, 1.05); | |
transform: scale3d(1.05, 1.05, 1.05); | |
} | |
to { | |
-webkit-transform: scale3d(1, 1, 1); | |
transform: scale3d(1, 1, 1); | |
} | |
} | |
@keyframes pulse { | |
from { | |
-webkit-transform: scale3d(1, 1, 1); | |
transform: scale3d(1, 1, 1); | |
} | |
50% { | |
-webkit-transform: scale3d(1.05, 1.05, 1.05); | |
transform: scale3d(1.05, 1.05, 1.05); | |
} | |
to { | |
-webkit-transform: scale3d(1, 1, 1); | |
transform: scale3d(1, 1, 1); | |
} | |
} | |
.pulse { | |
-webkit-animation-name: pulse; | |
animation-name: pulse; | |
} | |
@-webkit-keyframes rubberBand { | |
from { | |
-webkit-transform: scale3d(1, 1, 1); | |
transform: scale3d(1, 1, 1); | |
} | |
30% { | |
-webkit-transform: scale3d(1.25, 0.75, 1); | |
transform: scale3d(1.25, 0.75, 1); | |
} | |
40% { | |
-webkit-transform: scale3d(0.75, 1.25, 1); | |
transform: scale3d(0.75, 1.25, 1); | |
} | |
50% { | |
-webkit-transform: scale3d(1.15, 0.85, 1); | |
transform: scale3d(1.15, 0.85, 1); | |
} | |
65% { | |
-webkit-transform: scale3d(.95, 1.05, 1); | |
transform: scale3d(.95, 1.05, 1); | |
} | |
75% { | |
-webkit-transform: scale3d(1.05, .95, 1); | |
transform: scale3d(1.05, .95, 1); | |
} | |
to { | |
-webkit-transform: scale3d(1, 1, 1); | |
transform: scale3d(1, 1, 1); | |
} | |
} | |
@keyframes rubberBand { | |
from { | |
-webkit-transform: scale3d(1, 1, 1); | |
transform: scale3d(1, 1, 1); | |
} | |
30% { | |
-webkit-transform: scale3d(1.25, 0.75, 1); | |
transform: scale3d(1.25, 0.75, 1); | |
} | |
40% { | |
-webkit-transform: scale3d(0.75, 1.25, 1); | |
transform: scale3d(0.75, 1.25, 1); | |
} | |
50% { | |
-webkit-transform: scale3d(1.15, 0.85, 1); | |
transform: scale3d(1.15, 0.85, 1); | |
} | |
65% { | |
-webkit-transform: scale3d(.95, 1.05, 1); | |
transform: scale3d(.95, 1.05, 1); | |
} | |
75% { | |
-webkit-transform: scale3d(1.05, .95, 1); | |
transform: scale3d(1.05, .95, 1); | |
} | |
to { | |
-webkit-transform: scale3d(1, 1, 1); | |
transform: scale3d(1, 1, 1); | |
} | |
} | |
.rubberBand { | |
-webkit-animation-name: rubberBand; | |
animation-name: rubberBand; | |
} | |
@-webkit-keyframes shake { | |
from, to { | |
-webkit-transform: translate3d(0, 0, 0); | |
transform: translate3d(0, 0, 0); | |
} | |
10%, 30%, 50%, 70%, 90% { | |
-webkit-transform: translate3d(-10px, 0, 0); | |
transform: translate3d(-10px, 0, 0); | |
} | |
20%, 40%, 60%, 80% { | |
-webkit-transform: translate3d(10px, 0, 0); | |
transform: translate3d(10px, 0, 0); | |
} | |
} | |
@keyframes shake { | |
from, to { | |
-webkit-transform: translate3d(0, 0, 0); | |
transform: translate3d(0, 0, 0); | |
} | |
10%, 30%, 50%, 70%, 90% { | |
-webkit-transform: translate3d(-10px, 0, 0); | |
transform: translate3d(-10px, 0, 0); | |
} | |
20%, 40%, 60%, 80% { | |
-webkit-transform: translate3d(10px, 0, 0); | |
transform: translate3d(10px, 0, 0); | |
} | |
} | |
.shake { | |
-webkit-animation-name: shake; | |
animation-name: shake; | |
} | |
@-webkit-keyframes headShake { | |
0% { | |
-webkit-transform: translateX(0); | |
transform: translateX(0); | |
} | |
6.5% { | |
-webkit-transform: translateX(-6px) rotateY(-9deg); | |
transform: translateX(-6px) rotateY(-9deg); | |
} | |
18.5% { | |
-webkit-transform: translateX(5px) rotateY(7deg); | |
transform: translateX(5px) rotateY(7deg); | |
} | |
31.5% { | |
-webkit-transform: translateX(-3px) rotateY(-5deg); | |
transform: translateX(-3px) rotateY(-5deg); | |
} | |
43.5% { | |
-webkit-transform: translateX(2px) rotateY(3deg); | |
transform: translateX(2px) rotateY(3deg); | |
} | |
50% { | |
-webkit-transform: translateX(0); | |
transform: translateX(0); | |
} | |
} | |
@keyframes headShake { | |
0% { | |
-webkit-transform: translateX(0); | |
transform: translateX(0); | |
} | |
6.5% { | |
-webkit-transform: translateX(-6px) rotateY(-9deg); | |
transform: translateX(-6px) rotateY(-9deg); | |
} | |
18.5% { | |
-webkit-transform: translateX(5px) rotateY(7deg); | |
transform: translateX(5px) rotateY(7deg); | |
} | |
31.5% { | |
-webkit-transform: translateX(-3px) rotateY(-5deg); | |
transform: translateX(-3px) rotateY(-5deg); | |
} | |
43.5% { | |
-webkit-transform: translateX(2px) rotateY(3deg); | |
transform: translateX(2px) rotateY(3deg); | |
} | |
50% { | |
-webkit-transform: translateX(0); | |
transform: translateX(0); | |
} | |
} | |
.headShake { | |
-webkit-animation-timing-function: ease-in-out; | |
animation-timing-function: ease-in-out; | |
-webkit-animation-name: headShake; | |
animation-name: headShake; | |
} | |
@-webkit-keyframes swing { | |
20% { | |
-webkit-transform: rotate3d(0, 0, 1, 15deg); | |
transform: rotate3d(0, 0, 1, 15deg); | |
} | |
40% { | |
-webkit-transform: rotate3d(0, 0, 1, -10deg); | |
transform: rotate3d(0, 0, 1, -10deg); | |
} | |
60% { | |
-webkit-transform: rotate3d(0, 0, 1, 5deg); | |
transform: rotate3d(0, 0, 1, 5deg); | |
} | |
80% { | |
-webkit-transform: rotate3d(0, 0, 1, -5deg); | |
transform: rotate3d(0, 0, 1, -5deg); | |
} | |
to { | |
-webkit-transform: rotate3d(0, 0, 1, 0deg); | |
transform: rotate3d(0, 0, 1, 0deg); | |
} | |
} | |
@keyframes swing { | |
20% { | |
-webkit-transform: rotate3d(0, 0, 1, 15deg); | |
transform: rotate3d(0, 0, 1, 15deg); | |
} | |
40% { | |
-webkit-transform: rotate3d(0, 0, 1, -10deg); | |
transform: rotate3d(0, 0, 1, -10deg); | |
} | |
60% { | |
-webkit-transform: rotate3d(0, 0, 1, 5deg); | |
transform: rotate3d(0, 0, 1, 5deg); | |
} | |
80% { | |
-webkit-transform: rotate3d(0, 0, 1, -5deg); | |
transform: rotate3d(0, 0, 1, -5deg); | |
} | |
to { | |
-webkit-transform: rotate3d(0, 0, 1, 0deg); | |
transform: rotate3d(0, 0, 1, 0deg); | |
} | |
} | |
.swing { | |
-webkit-transform-origin: top center; | |
transform-origin: top center; | |
-webkit-animation-name: swing; | |
animation-name: swing; | |
} | |
@-webkit-keyframes tada { | |
from { | |
-webkit-transform: scale3d(1, 1, 1); | |
transform: scale3d(1, 1, 1); | |
} | |
10%, 20% { | |
-webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); | |
transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); | |
} | |
30%, 50%, 70%, 90% { | |
-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); | |
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); | |
} | |
40%, 60%, 80% { | |
-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); | |
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); | |
} | |
to { | |
-webkit-transform: scale3d(1, 1, 1); | |
transform: scale3d(1, 1, 1); | |
} | |
} | |
@keyframes tada { | |
from { | |
-webkit-transform: scale3d(1, 1, 1); | |
transform: scale3d(1, 1, 1); | |
} | |
10%, 20% { | |
-webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); | |
transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); | |
} | |
30%, 50%, 70%, 90% { | |
-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); | |
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); | |
} | |
40%, 60%, 80% { | |
-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); | |
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); | |
} | |
to { | |
-webkit-transform: scale3d(1, 1, 1); | |
transform: scale3d(1, 1, 1); | |
} | |
} | |
.tada { | |
-webkit-animation-name: tada; | |
animation-name: tada; | |
} | |
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ | |
@-webkit-keyframes wobble { | |
from { | |
-webkit-transform: none; | |
transform: none; | |
} | |
15% { | |
-webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); | |
transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); | |
} | |
30% { | |
-webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); | |
transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); | |
} | |
45% { | |
-webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); | |
transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); | |
} | |
60% { | |
-webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); | |
transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); | |
} | |
75% { | |
-webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); | |
transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); | |
} | |
to { | |
-webkit-transform: none; | |
transform: none; | |
} | |
} | |
@keyframes wobble { | |
from { | |
-webkit-transform: none; | |
transform: none; | |
} | |
15% { | |
-webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); | |
transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); | |
} | |
30% { | |
-webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); | |
transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); | |
} | |
45% { | |
-webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); | |
transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); | |
} | |
60% { | |
-webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); | |
transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); | |
} | |
75% { | |
-webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); | |
transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); | |
} | |
to { | |
-webkit-transform: none; | |
transform: none; | |
} | |
} | |
.wobble { | |
-webkit-animation-name: wobble; | |
animation-name: wobble; | |
} | |
@-webkit-keyframes jello { | |
from, 11.1%, to { | |
-webkit-transform: none; | |
transform: none; | |
} | |
22.2% { | |
-webkit-transform: skewX(-12.5deg) skewY(-12.5deg); | |
transform: skewX(-12.5deg) skewY(-12.5deg); | |
} | |
33.3% { | |
-webkit-transform: skewX(6.25deg) skewY(6.25deg); | |
transform: skewX(6.25deg) skewY(6.25deg); | |
} | |
44.4% { | |
-webkit-transform: skewX(-3.125deg) skewY(-3.125deg); | |
transform: skewX(-3.125deg) skewY(-3.125deg); | |
} | |
55.5% { | |
-webkit-transform: skewX(1.5625deg) skewY(1.5625deg); | |
transform: skewX(1.5625deg) skewY(1.5625deg); | |
} | |
66.6% { | |
-webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg); | |
transform: skewX(-0.78125deg) skewY(-0.78125deg); | |
} | |
77.7% { | |
-webkit-transform: skewX(0.390625deg) skewY(0.390625deg); | |
transform: skewX(0.390625deg) skewY(0.390625deg); | |
} | |
88.8% { | |
-webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg); | |
transform: skewX(-0.1953125deg) skewY(-0.1953125deg); | |
} | |
} | |
@keyframes jello { | |
from, 11.1%, to { | |
-webkit-transform: none; | |
transform: none; | |
} | |
22.2% { | |
-webkit-transform: skewX(-12.5deg) skewY(-12.5deg); | |
transform: skewX(-12.5deg) skewY(-12.5deg); | |
} | |
33.3% { | |
-webkit-transform: skewX(6.25deg) skewY(6.25deg); | |
transform: skewX(6.25deg) skewY(6.25deg); | |
} | |
44.4% { | |
-webkit-transform: skewX(-3.125deg) skewY(-3.125deg); | |
transform: skewX(-3.125deg) skewY(-3.125deg); | |
} | |
55.5% { | |
-webkit-transform: skewX(1.5625deg) skewY(1.5625deg); | |
transform: skewX(1.5625deg) skewY(1.5625deg); | |
} | |
66.6% { | |
-webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg); | |
transform: skewX(-0.78125deg) skewY(-0.78125deg); | |
} | |
77.7% { | |
-webkit-transform: skewX(0.390625deg) skewY(0.390625deg); | |
transform: skewX(0.390625deg) skewY(0.390625deg); | |
} | |
88.8% { | |
-webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg); | |
transform: skewX(-0.1953125deg) skewY(-0.1953125deg); | |
} | |
} | |
.jello { | |
-webkit-animation-name: jello; | |
animation-name: jello; | |
-webkit-transform-origin: center; | |
transform-origin: center; | |
} | |
@-webkit-keyframes bounceIn { | |
from, 20%, 40%, 60%, 80%, to { | |
-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); | |
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); | |
} | |
0% { | |
opacity: 0; | |
-webkit-transform: scale3d(.3, .3, .3); | |
transform: scale3d(.3, .3, .3); | |
} | |
20% { | |
-webkit-transform: scale3d(1.1, 1.1, 1.1); | |
transform: scale3d(1.1, 1.1, 1.1); | |
} | |
40% { | |
-webkit-transform: scale3d(.9, .9, .9); | |
transform: scale3d(.9, .9, .9); | |
} | |
60% { | |
opacity: 1; | |
-webkit-transform: scale3d(1.03, 1.03, 1.03); | |
transform: scale3d(1.03, 1.03, 1.03); | |
} | |
80% { | |
-webkit-transform: scale3d(.97, .97, .97); | |
transform: scale3d(.97, .97, .97); | |
} | |
to { | |
opacity: 1; | |
-webkit-transform: scale3d(1, 1, 1); | |
transform: scale3d(1, 1, 1); | |
} | |
} | |
@keyframes bounceIn { | |
from, 20%, 40%, 60%, 80%, to { | |
-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); | |
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); | |
} | |
0% { | |
opacity: 0; | |
-webkit-transform: scale3d(.3, .3, .3); | |
transform: scale3d(.3, .3, .3); | |
} | |
20% { | |
-webkit-transform: scale3d(1.1, 1.1, 1.1); | |
transform: scale3d(1.1, 1.1, 1.1); | |
} | |
40% { | |
-webkit-transform: scale3d(.9, .9, .9); | |
transform: scale3d(.9, .9, .9); | |
} | |
60% { | |
opacity: 1; | |
-webkit-transform: scale3d(1.03, 1.03, 1.03); | |
transform: scale3d(1.03, 1.03, 1.03); | |
} | |
80% { | |
-webkit-transform: scale3d(.97, .97, .97); | |
transform: scale3d(.97, .97, .97); | |
} | |
to { | |
opacity: 1; | |
-webkit-transform: scale3d(1, 1, 1); | |
transform: scale3d(1, 1, 1); | |
} | |
} | |
.bounceIn { | |
-webkit-animation-name: bounceIn; | |
animation-name: bounceIn; | |
} | |
@-webkit-keyframes bounceInDown { | |
from, 60%, 75%, 90%, to { | |
-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); | |
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); | |
} | |
0% { | |
opacity: 0; | |
-webkit-transform: translate3d(0, -3000px, 0); | |
transform: translate3d(0, -3000px, 0); | |
} | |
60% { | |
opacity: 1; | |
-webkit-transform: translate3d(0, 25px, 0); | |
transform: translate3d(0, 25px, 0); | |
} | |
75% { | |
-webkit-transform: translate3d(0, -10px, 0); | |
transform: translate3d(0, -10px, 0); | |
} | |
90% { | |
-webkit-transform: translate3d(0, 5px, 0); | |
transform: translate3d(0, 5px, 0); | |
} | |
to { | |
-webkit-transform: none; | |
transform: none; | |
} | |
} | |
@keyframes bounceInDown { | |
from, 60%, 75%, 90%, to { | |
-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); | |
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); | |
} | |
0% { | |
opacity: 0; | |
-webkit-transform: translate3d(0, -3000px, 0); | |
transform: translate3d(0, -3000px, 0); | |
} | |
60% { | |
opacity: 1; | |
-webkit-transform: translate3d(0, 25px, 0); | |
transform: translate3d(0, 25px, 0); | |
} | |
75% { | |
-webkit-transform: translate3d(0, -10px, 0); | |
transform: translate3d(0, -10px, 0); | |
} | |
90% { | |
-webkit-transform: translate3d(0, 5px, 0); | |
transform: translate3d(0, 5px, 0); | |
} | |
to { | |
-webkit-transform: none; | |
transform: none; | |
} | |
} | |
.bounceInDown { | |
-webkit-animation-name: bounceInDown; | |
animation-name: bounceInDown; | |
} | |
@-webkit-keyframes bounceInLeft { | |
from, 60%, 75%, 90%, to { | |
-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); | |
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); | |
} | |
0% { | |
opacity: 0; | |
-webkit-transform: translate3d(-3000px, 0, 0); | |
transform: translate3d(-3000px, 0, 0); | |
} | |
60% { | |
opacity: 1; | |
-webkit-transform: translate3d(25px, 0, 0); | |
transform: translate3d(25px, 0, 0); | |
} | |
75% { | |
-webkit-transform: translate3d(-10px, 0, 0); | |
transform: translate3d(-10px, 0, 0); | |
} | |
90% { | |
-webkit-transform: translate3d(5px, 0, 0); | |
transform: translate3d(5px, 0, 0); | |
} | |
to { | |
-webkit-transform: none; | |
transform: none; | |
} | |
} | |
@keyframes bounceInLeft { | |
from, 60%, 75%, 90%, to { | |
-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); | |
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); | |
} | |
0% { | |
opacity: 0; | |
-webkit-transform: translate3d(-3000px, 0, 0); | |
transform: translate3d(-3000px, 0, 0); | |
} | |
60% { | |
opacity: 1; | |
-webkit-transform: translate3d(25px, 0, 0); | |
transform: translate3d(25px, 0, 0); | |
} | |
75% { | |
-webkit-transform: translate3d(-10px, 0, 0); | |
transform: translate3d(-10px, 0, 0); | |
} | |
90% { | |
-webkit-transform: translate3d(5px, 0, 0); | |
transform: translate3d(5px, 0, 0); | |
} | |
to { | |
-webkit-transform: none; | |
transform: none; | |
} | |
} | |
.bounceInLeft { | |
-webkit-animation-name: bounceInLeft; | |
animation-name: bounceInLeft; | |
} | |
@-webkit-keyframes bounceInRight { | |
from, 60%, 75%, 90%, to { | |
-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); | |
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); | |
} | |
from { | |
opacity: 0; | |
-webkit-transform: translate3d(3000px, 0, 0); | |
transform: translate3d(3000px, 0, 0); | |
} | |
60% { | |
opacity: 1; | |
-webkit-transform: translate3d(-25px, 0, 0); | |
transform: translate3d(-25px, 0, 0); | |
} | |
75% { | |
-webkit-transform: translate3d(10px, 0, 0); | |
transform: translate3d(10px, 0, 0); | |
} | |
90% { | |
-webkit-transform: translate3d(-5px, 0, 0); | |
transform: translate3d(-5px, 0, 0); | |
} | |
to { | |
-webkit-transform: none; | |
transform: none; | |
} | |
} | |
@keyframes bounceInRight { | |
from, 60%, 75%, 90%, to { | |
-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); | |
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); | |
} | |
from { | |
opacity: 0; | |
-webkit-transform: translate3d(3000px, 0, 0); | |
transform: translate3d(3000px, 0, 0); | |
} | |
60% { | |
opacity: 1; | |
-webkit-transform: translate3d(-25px, 0, 0); | |
transform: translate3d(-25px, 0, 0); | |
} | |
75% { | |
-webkit-transform: translate3d(10px, 0, 0); | |
transform: translate3d(10px, 0, 0); | |
} | |
90% { | |
-webkit-transform: translate3d(-5px, 0, 0); | |
transform: translate3d(-5px, 0, 0); | |
} | |
to { | |
-webkit-transform: none; | |
transform: none; | |
} | |
} | |
.bounceInRight { | |
-webkit-animation-name: bounceInRight; | |
animation-name: bounceInRight; | |
} | |
@-webkit-keyframes bounceInUp { | |
from, 60%, 75%, 90%, to { | |
-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); | |
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); | |
} | |
from { | |
opacity: 0; | |
-webkit-transform: translate3d(0, 3000px, 0); | |
transform: translate3d(0, 3000px, 0); | |
} | |
60% { | |
opacity: 1; | |
-webkit-transform: translate3d(0, -20px, 0); | |
transform: translate3d(0, -20px, 0); | |
} | |
75% { | |
-webkit-transform: translate3d(0, 10px, 0); | |
transform: translate3d(0, 10px, 0); | |
} | |
90% { | |
-webkit-transform: translate3d(0, -5px, 0); | |
transform: translate3d(0, -5px, 0); | |
} | |
to { | |
-webkit-transform: translate3d(0, 0, 0); | |
transform: translate3d(0, 0, 0); | |
} | |
} | |
@keyframes bounceInUp { | |
from, 60%, 75%, 90%, to { | |
-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); | |
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); | |
} | |
from { | |
opacity: 0; | |
-webkit-transform: translate3d(0, 3000px, 0); | |
transform: translate3d(0, 3000px, 0); | |
} | |
60% { | |
opacity: 1; | |
-webkit-transform: translate3d(0, -20px, 0); | |
transform: translate3d(0, -20px, 0); | |
} | |
75% { | |
-webkit-transform: translate3d(0, 10px, 0); | |
transform: translate3d(0, 10px, 0); | |
} | |
90% { | |
-webkit-transform: translate3d(0, -5px, 0); | |
transform: translate3d(0, -5px, 0); | |
} | |
to { | |
-webkit-transform: translate3d(0, 0, 0); | |
transform: translate3d(0, 0, 0); | |
} | |
} | |
.bounceInUp { | |
-webkit-animation-name: bounceInUp; | |
animation-name: bounceInUp; | |
} | |
@-webkit-keyframes bounceOut { | |
20% { | |
-webkit-transform: scale3d(.9, .9, .9); | |
transform: scale3d(.9, .9, .9); | |
} | |
50%, 55% { | |
opacity: 1; | |
-webkit-transform: scale3d(1.1, 1.1, 1.1); | |
transform: scale3d(1.1, 1.1, 1.1); | |
} | |
to { | |
opacity: 0; | |
-webkit-transform: scale3d(.3, .3, .3); | |
transform: scale3d(.3, .3, .3); | |
} | |
} | |
@keyframes bounceOut { | |
20% { | |
-webkit-transform: scale3d(.9, .9, .9); | |
transform: scale3d(.9, .9, .9); | |
} | |
50%, 55% { | |
opacity: 1; | |
-webkit-transform: scale3d(1.1, 1.1, 1.1); | |
transform: scale3d(1.1, 1.1, 1.1); | |
} | |
to { | |
opacity: 0; | |
-webkit-transform: scale3d(.3, .3, .3); | |
transform: scale3d(.3, .3, .3); | |
} | |
} | |
.bounceOut { | |
-webkit-animation-name: bounceOut; | |
animation-name: bounceOut; | |
} | |
@-webkit-keyframes bounceOutDown { | |
20% { | |
-webkit-transform: translate3d(0, 10px, 0); | |
transform: translate3d(0, 10px, 0); | |
} | |
40%, 45% { | |
opacity: 1; | |
-webkit-transform: translate3d(0, -20px, 0); | |
transform: translate3d(0, -20px, 0); | |
} | |
to { | |
opacity: 0; | |
-webkit-transform: translate3d(0, 2000px, 0); | |
transform: translate3d(0, 2000px, 0); | |
} | |
} | |
@keyframes bounceOutDown { | |
20% { | |
-webkit-transform: translate3d(0, 10px, 0); | |
transform: translate3d(0, 10px, 0); | |
} | |
40%, 45% { | |
opacity: 1; | |
-webkit-transform: translate3d(0, -20px, 0); | |
transform: translate3d(0, -20px, 0); | |
} | |
to { | |
opacity: 0; | |
-webkit-transform: translate3d(0, 2000px, 0); | |
transform: translate3d(0, 2000px, 0); | |
} | |
} | |
.bounceOutDown { | |
-webkit-animation-name: bounceOutDown; | |
animation-name: bounceOutDown; | |
} | |
@-webkit-keyframes bounceOutLeft { | |
20% { | |
opacity: 1; | |
-webkit-transform: translate3d(20px, 0, 0); | |
transform: translate3d(20px, 0, 0); | |
} | |
to { | |
opacity: 0; | |
-webkit-transform: translate3d(-2000px, 0, 0); | |
transform: translate3d(-2000px, 0, 0); | |
} | |
} | |
@keyframes bounceOutLeft { | |
20% { | |
opacity: 1; | |
-webkit-transform: translate3d(20px, 0, 0); | |
transform: translate3d(20px, 0, 0); | |
} | |
to { | |
opacity: 0; | |
-webkit-transform: translate3d(-2000px, 0, 0); | |
transform: translate3d(-2000px, 0, 0); | |
} | |
} | |
.bounceOutLeft { | |
-webkit-animation-name: bounceOutLeft; | |
animation-name: bounceOutLeft; | |
} | |
@-webkit-keyframes bounceOutRight { | |
20% { | |
opacity: 1; | |
-webkit-transform: translate3d(-20px, 0, 0); | |
transform: translate3d(-20px, 0, 0); | |
} | |
to { | |
opacity: 0; | |
-webkit-transform: translate3d(2000px, 0, 0); | |
transform: translate3d(2000px, 0, 0); | |
} | |
} | |
@keyframes bounceOutRight { | |
20% { | |
opacity: 1; | |
-webkit-transform: translate3d(-20px, 0, 0); | |
transform: translate3d(-20px, 0, 0); | |
} | |
to { | |
opacity: 0; | |
-webkit-transform: translate3d(2000px, 0, 0); | |
transform: translate3d(2000px, 0, 0); | |
} | |
} | |
.bounceOutRight { | |
-webkit-animation-name: bounceOutRight; | |
animation-name: bounceOutRight; | |
} | |
@-webkit-keyframes bounceOutUp { | |
20% { | |
-webkit-transform: translate3d(0, -10px, 0); | |
transform: translate3d(0, -10px, 0); | |
} | |
40%, 45% { | |
opacity: 1; | |
-webkit-transform: translate3d(0, 20px, 0); | |
transform: translate3d(0, 20px, 0); | |
} | |
to { | |
opacity: 0; | |
-webkit-transform: translate3d(0, -2000px, 0); | |
transform: translate3d(0, -2000px, 0); | |
} | |
} | |
@keyframes bounceOutUp { | |
20% { | |
-webkit-transform: translate3d(0, -10px, 0); | |
transform: translate3d(0, -10px, 0); | |
} | |
40%, 45% { | |
opacity: 1; | |
-webkit-transform: translate3d(0, 20px, 0); | |
transform: translate3d(0, 20px, 0); | |
} | |
to { | |
opacity: 0; | |
-webkit-transform: translate3d(0, -2000px, 0); | |
transform: translate3d(0, -2000px, 0); | |
} | |
} | |
.bounceOutUp { | |
-webkit-animation-name: bounceOutUp; | |
animation-name: bounceOutUp; | |
} | |
@-webkit-keyframes fadeIn { | |
from { | |
opacity: 0; | |
} | |
to { | |
opacity: 1; | |
} | |
} | |
@keyframes fadeIn { | |
from { | |
opacity: 0; | |
} | |
to { | |
opacity: 1; | |
} | |
} | |
.fadeIn { | |
-webkit-animation-name: fadeIn; | |
animation-name: fadeIn; | |
} | |
@-webkit-keyframes fadeInDown { | |
from { | |
opacity: 0; | |
-webkit-transform: translate3d(0, -100%, 0); | |
transform: translate3d(0, -100%, 0); | |
} | |
to { | |
opacity: 1; | |
-webkit-transform: none; | |
transform: none; | |
} | |
} | |
@keyframes fadeInDown { | |
from { | |
opacity: 0; | |
-webkit-transform: translate3d(0, -100%, 0); | |
transform: translate3d(0, -100%, 0); | |
} | |
to { | |
opacity: 1; | |
-webkit-transform: none; | |
transform: none; | |
} | |
} | |
.fadeInDown { | |
-webkit-animation-name: fadeInDown; | |
animation-name: fadeInDown; | |
} | |
@-webkit-keyframes fadeInDownBig { | |
from { | |
opacity: 0; | |
-webkit-transform: translate3d(0, -2000px, 0); | |
transform: translate3d(0, -2000px, 0); | |
} | |
to { | |
opacity: 1; | |
-webkit-transform: none; | |
transform: none; | |
} | |
} | |
@keyframes fadeInDownBig { | |
from { | |
opacity: 0; | |
-webkit-transform: translate3d(0, -2000px, 0); | |
transform: translate3d(0, -2000px, 0); | |
} | |
to { | |
opacity: 1; | |
-webkit-transform: none; | |
transform: none; | |
} | |
} | |
.fadeInDownBig { | |
-webkit-animation-name: fadeInDownBig; | |
animation-name: fadeInDownBig; | |
} | |
@-webkit-keyframes fadeInLeft { | |
from { | |
opacity: 0; | |
-webkit-transform: translate3d(-100%, 0, 0); | |
transform: translate3d(-100%, 0, 0); | |
} | |
to { | |
opacity: 1; | |
-webkit-transform: none; | |
transform: none; | |
} | |
} | |
@keyframes fadeInLeft { | |
from { | |
opacity: 0; | |
-webkit-transform: translate3d(-100%, 0, 0); | |
transform: translate3d(-100%, 0, 0); | |
} | |
to { | |
opacity: 1; | |
-webkit-transform: none; | |
transform: none; | |
} | |
} | |
.fadeInLeft { | |
-webkit-animation-name: fadeInLeft; | |
animation-name: fadeInLeft; | |
} | |
@-webkit-keyframes fadeInLeftBig { | |
from { | |
opacity: 0; | |
-webkit-transform: translate3d(-2000px, 0, 0); | |
transform: translate3d(-2000px, 0, 0); | |
} | |
to { | |
opacity: 1; | |
-webkit-transform: none; | |
transform: none; | |
} | |
} | |
@keyframes fadeInLeftBig { | |
from { | |
opacity: 0; | |
-webkit-transform: translate3d(-2000px, 0, 0); | |
transform: translate3d(-2000px, 0, 0); | |
} | |
to { | |
opacity: 1; | |
-webkit-transform: none; | |
transform: none; | |
} | |
} | |
.fadeInLeftBig { | |
-webkit-animation-name: fadeInLeftBig; | |
animation-name: fadeInLeftBig; | |
} | |
@-webkit-keyframes fadeInRight { | |
from { | |
opacity: 0; | |
-webkit-transform: translate3d(100%, 0, 0); | |
transform: translate3d(100%, 0, 0); | |
} | |
to { | |
opacity: 1; | |
-webkit-transform: none; | |
transform: none; | |
} | |
} | |
@keyframes fadeInRight { | |
from { | |
opacity: 0; | |
-webkit-transform: translate3d(100%, 0, 0); | |
transform: translate3d(100%, 0, 0); | |
} | |
to { | |
opacity: 1; | |
-webkit-transform: none; | |
transform: none; | |
} | |
} | |
.fadeInRight { | |
-webkit-animation-name: fadeInRight; | |
animation-name: fadeInRight; | |
} | |
@-webkit-keyframes fadeInRightBig { | |
from { | |
opacity: 0; | |
-webkit-transform: translate3d(2000px, 0, 0); | |
transform: translate3d(2000px, 0, 0); | |
} | |
to { | |
opacity: 1; | |
-webkit-transform: none; | |
transform: none; | |
} | |
} | |
@keyframes fadeInRightBig { | |
from { | |
opacity: 0; | |
-webkit-transform: translate3d(2000px, 0, 0); | |
transform: translate3d(2000px, 0, 0); | |
} | |
to { | |
opacity: 1; | |
-webkit-transform: none; | |
transform: none; | |
} | |
} | |
.fadeInRightBig { | |
-webkit-animation-name: fadeInRightBig; | |
animation-name: fadeInRightBig; | |
} | |
@-webkit-keyframes fadeInUp { | |
from { | |
opacity: 0; | |
-webkit-transform: translate3d(0, 100%, 0); | |
transform: translate3d(0, 100%, 0); | |
} | |
to { | |
opacity: 1; | |
-webkit-transform: none; | |
transform: none; | |
} | |
} | |
@keyframes fadeInUp { | |
from { | |
opacity: 0; | |
-webkit-transform: translate3d(0, 100%, 0); | |
transform: translate3d(0, 100%, 0); | |
} | |
to { | |
opacity: 1; | |
-webkit-transform: none; | |
transform: none; | |
} | |
} | |
.fadeInUp { | |
-webkit-animation-name: fadeInUp; | |
animation-name: fadeInUp; | |
} | |
@-webkit-keyframes fadeInUpBig { | |
from { | |
opacity: 0; | |
-webkit-transform: translate3d(0, 2000px, 0); | |
transform: translate3d(0, 2000px, 0); | |
} | |
to { | |
opacity: 1; | |
-webkit-transform: none; | |
transform: none; | |
} | |
} | |
@keyframes fadeInUpBig { | |
from { | |
opacity: 0; | |
-webkit-transform: translate3d(0, 2000px, 0); | |
transform: translate3d(0, 2000px, 0); | |
} | |
to { | |
opacity: 1; | |
-webkit-transform: none; | |
transform: none; | |
} | |
} | |
.fadeInUpBig { | |
-webkit-animation-name: fadeInUpBig; | |
animation-name: fadeInUpBig; | |
} | |
@-webkit-keyframes fadeOut { | |
from { | |
opacity: 1; | |
} | |
to { | |
opacity: 0; | |
} | |
} | |
@keyframes fadeOut { | |
from { | |
opacity: 1; | |
} | |
to { | |
opacity: 0; | |
} | |
} | |
.fadeOut { | |
-webkit-animation-name: fadeOut; | |
animation-name: fadeOut; | |
} | |
@-webkit-keyframes fadeOutDown { | |
from { | |
opacity: 1; | |
} | |
to { | |
opacity: 0; | |
-webkit-transform: translate3d(0, 100%, 0); | |
transform: translate3d(0, 100%, 0); | |
} | |
} | |
@keyframes fadeOutDown { | |
from { | |
opacity: 1; | |
} | |
to { | |
opacity: 0; | |
-webkit-transform: translate3d(0, 100%, 0); | |
transform: translate3d(0, 100%, 0); | |
} | |
} | |
.fadeOutDown { | |
-webkit-animation-name: fadeOutDown; | |
animation-name: fadeOutDown; | |
} | |
@-webkit-keyframes fadeOutDownBig { | |
from { | |
opacity: 1; | |
} | |
to { | |
opacity: 0; | |
-webkit-transform: translate3d(0, 2000px, 0); | |
transform: translate3d(0, 2000px, 0); | |
} | |
} | |
@keyframes fadeOutDownBig { | |
from { | |
opacity: 1; | |
} | |
to { | |
opacity: 0; | |
-webkit-transform: translate3d(0, 2000px, 0); | |
transform: translate3d(0, 2000px, 0); | |
} | |
} | |
.fadeOutDownBig { | |
-webkit-animation-name: fadeOutDownBig; | |
animation-name: fadeOutDownBig; | |
} | |
@-webkit-keyframes fadeOutLeft { | |
from { | |
opacity: 1; | |
} | |
to { | |
opacity: 0; | |
-webkit-transform: translate3d(-100%, 0, 0); | |
transform: translate3d(-100%, 0, 0); | |
} | |
} | |
@keyframes fadeOutLeft { | |
from { | |
opacity: 1; | |
} | |
to { | |
opacity: 0; | |
-webkit-transform: translate3d(-100%, 0, 0); | |
transform: translate3d(-100%, 0, 0); | |
} | |
} | |
.fadeOutLeft { | |
-webkit-animation-name: fadeOutLeft; | |
animation-name: fadeOutLeft; | |
} | |
@-webkit-keyframes fadeOutLeftBig { | |
from { | |
opacity: 1; | |
} | |
to { | |
opacity: 0; | |
-webkit-transform: translate3d(-2000px, 0, 0); | |
transform: translate3d(-2000px, 0, 0); | |
} | |
} | |
@keyframes fadeOutLeftBig { | |
from { | |
opacity: 1; | |
} | |
to { | |
opacity: 0; | |
-webkit-transform: translate3d(-2000px, 0, 0); | |
transform: translate3d(-2000px, 0, 0); | |
} | |
} | |
.fadeOutLeftBig { | |
-webkit-animation-name: fadeOutLeftBig; | |
animation-name: fadeOutLeftBig; | |
} | |
@-webkit-keyframes fadeOutRight { | |
from { | |
opacity: 1; | |
} | |
to { | |
opacity: 0; | |
-webkit-transform: translate3d(100%, 0, 0); | |
transform: translate3d(100%, 0, 0); | |
} | |
} | |
@keyframes fadeOutRight { | |
from { | |
opacity: 1; | |
} | |
to { | |
opacity: 0; | |
-webkit-transform: translate3d(100%, 0, 0); | |
transform: translate3d(100%, 0, 0); | |
} | |
} | |
.fadeOutRight { | |
-webkit-animation-name: fadeOutRight; | |
animation-name: fadeOutRight; | |
} | |
@-webkit-keyframes fadeOutRightBig { | |
from { | |
opacity: 1; | |
} | |
to { | |
opacity: 0; | |
-webkit-transform: translate3d(2000px, 0, 0); | |
transform: translate3d(2000px, 0, 0); | |
} | |
} | |
@keyframes fadeOutRightBig { | |
from { | |
opacity: 1; | |
} | |
to { | |
opacity: 0; | |
-webkit-transform: translate3d(2000px, 0, 0); | |
transform: translate3d(2000px, 0, 0); | |
} | |
} | |
.fadeOutRightBig { | |
-webkit-animation-name: fadeOutRightBig; | |
animation-name: fadeOutRightBig; | |
} | |
@-webkit-keyframes fadeOutUp { | |
from { | |
opacity: 1; | |
} | |
to { | |
opacity: 0; | |
-webkit-transform: translate3d(0, -100%, 0); | |
transform: translate3d(0, -100%, 0); | |
} | |
} | |
@keyframes fadeOutUp { | |
from { | |
opacity: 1; | |
} | |
to { | |
opacity: 0; | |
-webkit-transform: translate3d(0, -100%, 0); | |
transform: translate3d(0, -100%, 0); | |
} | |
} | |
.fadeOutUp { | |
-webkit-animation-name: fadeOutUp; | |
animation-name: fadeOutUp; | |
} | |
@-webkit-keyframes fadeOutUpBig { | |
from { | |
opacity: 1; | |
} | |
to { | |
opacity: 0; | |
-webkit-transform: translate3d(0, -2000px, 0); | |
transform: translate3d(0, -2000px, 0); | |
} | |
} | |
@keyframes fadeOutUpBig { | |
from { | |
opacity: 1; | |
} | |
to { | |
opacity: 0; | |
-webkit-transform: translate3d(0, -2000px, 0); | |
transform: translate3d(0, -2000px, 0); | |
} | |
} | |
.fadeOutUpBig { | |
-webkit-animation-name: fadeOutUpBig; | |
animation-name: fadeOutUpBig; | |
} | |
@-webkit-keyframes flip { | |
from { | |
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg); | |
transform: perspective(400px) rotate3d(0, 1, 0, -360deg); | |
-webkit-animation-timing-function: ease-out; | |
animation-timing-function: ease-out; | |
} | |
40% { | |
-webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); | |
transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); | |
-webkit-animation-timing-function: ease-out; | |
animation-timing-function: ease-out; | |
} | |
50% { | |
-webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); | |
transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); | |
-webkit-animation-timing-function: ease-in; | |
animation-timing-function: ease-in; | |
} | |
80% { | |
-webkit-transform: perspective(400px) scale3d(.95, .95, .95); | |
transform: perspective(400px) scale3d(.95, .95, .95); | |
-webkit-animation-timing-function: ease-in; | |
animation-timing-function: ease-in; | |
} | |
to { | |
-webkit-transform: perspective(400px); | |
transform: perspective(400px); | |
-webkit-animation-timing-function: ease-in; | |
animation-timing-function: ease-in; | |
} | |
} | |
@keyframes flip { | |
from { | |
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg); | |
transform: perspective(400px) rotate3d(0, 1, 0, -360deg); | |
-webkit-animation-timing-function: ease-out; | |
animation-timing-function: ease-out; | |
} | |
40% { | |
-webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); | |
transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); | |
-webkit-animation-timing-function: ease-out; | |
animation-timing-function: ease-out; | |
} | |
50% { | |
-webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); | |
transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); | |
-webkit-animation-timing-function: ease-in; | |
animation-timing-function: ease-in; | |
} | |
80% { | |
-webkit-transform: perspective(400px) scale3d(.95, .95, .95); | |
transform: perspective(400px) scale3d(.95, .95, .95); | |
-webkit-animation-timing-function: ease-in; | |
animation-timing-function: ease-in; | |
} | |
to { | |
-webkit-transform: perspective(400px); | |
transform: perspective(400px); | |
-webkit-animation-timing-function: ease-in; | |
animation-timing-function: ease-in; | |
} | |
} | |
.animated.flip { | |
-webkit-backface-visibility: visible; | |
backface-visibility: visible; | |
-webkit-animation-name: flip; | |
animation-name: flip; | |
} | |
@-webkit-keyframes flipInX { | |
from { | |
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); | |
transform: perspective(400px) rotate3d(1, 0, 0, 90deg); | |
-webkit-animation-timing-function: ease-in; | |
animation-timing-function: ease-in; | |
opacity: 0; | |
} | |
40% { | |
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); | |
transform: perspective(400px) rotate3d(1, 0, 0, -20deg); | |
-webkit-animation-timing-function: ease-in; | |
animation-timing-function: ease-in; | |
} | |
60% { | |
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); | |
transform: perspective(400px) rotate3d(1, 0, 0, 10deg); | |
opacity: 1; | |
} | |
80% { | |
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); | |
transform: perspective(400px) rotate3d(1, 0, 0, -5deg); | |
} | |
to { | |
-webkit-transform: perspective(400px); | |
transform: perspective(400px); | |
} | |
} | |
@keyframes flipInX { | |
from { | |
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); | |
transform: perspective(400px) rotate3d(1, 0, 0, 90deg); | |
-webkit-animation-timing-function: ease-in; | |
animation-timing-function: ease-in; | |
opacity: 0; | |
} | |
40% { | |
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); | |
transform: perspective(400px) rotate3d(1, 0, 0, -20deg); | |
-webkit-animation-timing-function: ease-in; | |
animation-timing-function: ease-in; | |
} | |
60% { | |
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); | |
transform: perspective(400px) rotate3d(1, 0, 0, 10deg); | |
opacity: 1; | |
} | |
80% { | |
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); | |
transform: perspective(400px) rotate3d(1, 0, 0, -5deg); | |
} | |
to { | |
-webkit-transform: perspective(400px); | |
transform: perspective(400px); | |
} | |
} | |
.flipInX { | |
-webkit-backface-visibility: visible !important; | |
backface-visibility: visible !important; | |
-webkit-animation-name: flipInX; | |
animation-name: flipInX; | |
} | |
@-webkit-keyframes flipInY { | |
from { | |
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); | |
transform: perspective(400px) rotate3d(0, 1, 0, 90deg); | |
-webkit-animation-timing-function: ease-in; | |
animation-timing-function: ease-in; | |
opacity: 0; | |
} | |
40% { | |
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); | |
transform: perspective(400px) rotate3d(0, 1, 0, -20deg); | |
-webkit-animation-timing-function: ease-in; | |
animation-timing-function: ease-in; | |
} | |
60% { | |
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg); | |
transform: perspective(400px) rotate3d(0, 1, 0, 10deg); | |
opacity: 1; | |
} | |
80% { | |
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg); | |
transform: perspective(400px) rotate3d(0, 1, 0, -5deg); | |
} | |
to { | |
-webkit-transform: perspective(400px); | |
transform: perspective(400px); | |
} | |
} | |
@keyframes flipInY { | |
from { | |
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); | |
transform: perspective(400px) rotate3d(0, 1, 0, 90deg); | |
-webkit-animation-timing-function: ease-in; | |
animation-timing-function: ease-in; | |
opacity: 0; | |
} | |
40% { | |
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); | |
transform: perspective(400px) rotate3d(0, 1, 0, -20deg); | |
-webkit-animation-timing-function: ease-in; | |
animation-timing-function: ease-in; | |
} | |
60% { | |
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg); | |
transform: perspective(400px) rotate3d(0, 1, 0, 10deg); | |
opacity: 1; | |
} | |
80% { | |
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg); | |
transform: perspective(400px) rotate3d(0, 1, 0, -5deg); | |
} | |
to { | |
-webkit-transform: perspective(400px); | |
transform: perspective(400px); | |
} | |
} | |
.flipInY { | |
-webkit-backface-visibility: visible !important; | |
backface-visibility: visible !important; | |
-webkit-animation-name: flipInY; | |
animation-name: flipInY; | |
} | |
@-webkit-keyframes flipOutX { | |
from { | |
-webkit-transform: perspective(400px); | |
transform: perspective(400px); | |
} | |
30% { | |
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); | |
transform: perspective(400px) rotate3d(1, 0, 0, -20deg); | |
opacity: 1; | |
} | |
to { | |
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); | |
transform: perspective(400px) rotate3d(1, 0, 0, 90deg); | |
opacity: 0; | |
} | |
} | |
@keyframes flipOutX { | |
from { | |
-webkit-transform: perspective(400px); | |
transform: perspective(400px); | |
} | |
30% { | |
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); | |
transform: perspective(400px) rotate3d(1, 0, 0, -20deg); | |
opacity: 1; | |
} | |
to { | |
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); | |
transform: perspective(400px) rotate3d(1, 0, 0, 90deg); | |
opacity: 0; | |
} | |
} | |
.flipOutX { | |
-webkit-animation-name: flipOutX; | |
animation-name: flipOutX; | |
-webkit-backface-visibility: visible !important; | |
backface-visibility: visible !important; | |
} | |
@-webkit-keyframes flipOutY { | |
from { | |
-webkit-transform: perspective(400px); | |
transform: perspective(400px); | |
} | |
30% { | |
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg); | |
transform: perspective(400px) rotate3d(0, 1, 0, -15deg); | |
opacity: 1; | |
} | |
to { | |
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); | |
transform: perspective(400px) rotate3d(0, 1, 0, 90deg); | |
opacity: 0; | |
} | |
} | |
@keyframes flipOutY { | |
from { | |
-webkit-transform: perspective(400px); | |
transform: perspective(400px); | |
} | |
30% { | |
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg); | |
transform: perspective(400px) rotate3d(0, 1, 0, -15deg); | |
opacity: 1; | |
} | |
to { | |
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); | |
transform: perspective(400px) rotate3d(0, 1, 0, 90deg); | |
opacity: 0; | |
} | |
} | |
.flipOutY { | |
-webkit-backface-visibility: visible !important; | |
backface-visibility: visible !important; | |
-webkit-animation-name: flipOutY; | |
animation-name: flipOutY; | |
} | |
@-webkit-keyframes lightSpeedIn { | |
from { | |
-webkit-transform: translate3d(100%, 0, 0) skewX(-30deg); | |
transform: translate3d(100%, 0, 0) skewX(-30deg); | |
opacity: 0; | |
} | |
60% { | |
-webkit-transform: skewX(20deg); | |
transform: skewX(20deg); | |
opacity: 1; | |
} | |
80% { | |
-webkit-transform: skewX(-5deg); | |
transform: skewX(-5deg); | |
opacity: 1; | |
} | |
to { | |
-webkit-transform: none; | |
transform: none; | |
opacity: 1; | |
} | |
} | |
@keyframes lightSpeedIn { | |
from { | |
-webkit-transform: translate3d(100%, 0, 0) skewX(-30deg); | |
transform: translate3d(100%, 0, 0) skewX(-30deg); | |
opacity: 0; | |
} | |
60% { | |
-webkit-transform: skewX(20deg); | |
transform: skewX(20deg); | |
opacity: 1; | |
} | |
80% { | |
-webkit-transform: skewX(-5deg); | |
transform: skewX(-5deg); | |
opacity: 1; | |
} | |
to { | |
-webkit-transform: none; | |
transform: none; | |
opacity: 1; | |
} | |
} | |
.lightSpeedIn { | |
-webkit-animation-name: lightSpeedIn; | |
animation-name: lightSpeedIn; | |
-webkit-animation-timing-function: ease-out; | |
animation-timing-function: ease-out; | |
} | |
@-webkit-keyframes lightSpeedOut { | |
from { | |
opacity: 1; | |
} | |
to { | |
-webkit-transform: translate3d(100%, 0, 0) skewX(30deg); | |
transform: translate3d(100%, 0, 0) skewX(30deg); | |
opacity: 0; | |
} | |
} | |
@keyframes lightSpeedOut { | |
from { | |
opacity: 1; | |
} | |
to { | |
-webkit-transform: translate3d(100%, 0, 0) skewX(30deg); | |
transform: translate3d(100%, 0, 0) skewX(30deg); | |
opacity: 0; | |
} | |
} | |
.lightSpeedOut { | |
-webkit-animation-name: lightSpeedOut; | |
animation-name: lightSpeedOut; | |
-webkit-animation-timing-function: ease-in; | |
animation-timing-function: ease-in; | |
} | |
@-webkit-keyframes rotateIn { | |
from { | |
-webkit-transform-origin: center; | |
transform-origin: center; | |
-webkit-transform: rotate3d(0, 0, 1, -200deg); | |
transform: rotate3d(0, 0, 1, -200deg); | |
opacity: 0; | |
} | |
to { | |
-webkit-transform-origin: center; | |
transform-origin: center; | |
-webkit-transform: none; | |
transform: none; | |
opacity: 1; | |
} | |
} | |
@keyframes rotateIn { | |
from { | |
-webkit-transform-origin: center; | |
transform-origin: center; | |
-webkit-transform: rotate3d(0, 0, 1, -200deg); | |
transform: rotate3d(0, 0, 1, -200deg); | |
opacity: 0; | |
} | |
to { | |
-webkit-transform-origin: center; | |
transform-origin: center; | |
-webkit-transform: none; | |
transform: none; | |
opacity: 1; | |
} | |
} | |
.rotateIn { | |
-webkit-animation-name: rotateIn; | |
animation-name: rotateIn; | |
} | |
@-webkit-keyframes rotateInDownLeft { | |
from { | |
-webkit-transform-origin: left bottom; | |
transform-origin: left bottom; | |
-webkit-transform: rotate3d(0, 0, 1, -45deg); | |
transform: rotate3d(0, 0, 1, -45deg); | |
opacity: 0; | |
} | |
to { | |
-webkit-transform-origin: left bottom; | |
transform-origin: left bottom; | |
-webkit-transform: none; | |
transform: none; | |
opacity: 1; | |
} | |
} | |
@keyframes rotateInDownLeft { | |
from { | |
-webkit-transform-origin: left bottom; | |
transform-origin: left bottom; | |
-webkit-transform: rotate3d(0, 0, 1, -45deg); | |
transform: rotate3d(0, 0, 1, -45deg); | |
opacity: 0; | |
} | |
to { | |
-webkit-transform-origin: left bottom; | |
transform-origin: left bottom; | |
-webkit-transform: none; | |
transform: none; | |
opacity: 1; | |
} | |
} | |
.rotateInDownLeft { | |
-webkit-animation-name: rotateInDownLeft; | |
animation-name: rotateInDownLeft; | |
} | |
@-webkit-keyframes rotateInDownRight { | |
from { | |
-webkit-transform-origin: right bottom; | |
transform-origin: right bottom; | |
-webkit-transform: rotate3d(0, 0, 1, 45deg); | |
transform: rotate3d(0, 0, 1, 45deg); | |
opacity: 0; | |
} | |
to { | |
-webkit-transform-origin: right bottom; | |
transform-origin: right bottom; | |
-webkit-transform: none; | |
transform: none; | |
opacity: 1; | |
} | |
} | |
@keyframes rotateInDownRight { | |
from { | |
-webkit-transform-origin: right bottom; | |
transform-origin: right bottom; | |
-webkit-transform: rotate3d(0, 0, 1, 45deg); | |
transform: rotate3d(0, 0, 1, 45deg); | |
opacity: 0; | |
} | |
to { | |
-webkit-transform-origin: right bottom; | |
transform-origin: right bottom; | |
-webkit-transform: none; | |
transform: none; | |
opacity: 1; | |
} | |
} | |
.rotateInDownRight { | |
-webkit-animation-name: rotateInDownRight; | |
animation-name: rotateInDownRight; | |
} | |
@-webkit-keyframes rotateInUpLeft { | |
from { | |
-webkit-transform-origin: left bottom; | |
transform-origin: left bottom; | |
-webkit-transform: rotate3d(0, 0, 1, 45deg); | |
transform: rotate3d(0, 0, 1, 45deg); | |
opacity: 0; | |
} | |
to { | |
-webkit-transform-origin: left bottom; | |
transform-origin: left bottom; | |
-webkit-transform: none; | |
transform: none; | |
opacity: 1; | |
} | |
} | |
@keyframes rotateInUpLeft { | |
from { | |
-webkit-transform-origin: left bottom; | |
transform-origin: left bottom; | |
-webkit-transform: rotate3d(0, 0, 1, 45deg); | |
transform: rotate3d(0, 0, 1, 45deg); | |
opacity: 0; | |
} | |
to { | |
-webkit-transform-origin: left bottom; | |
transform-origin: left bottom; | |
-webkit-transform: none; | |
transform: none; | |
opacity: 1; | |
} | |
} | |
.rotateInUpLeft { | |
-webkit-animation-name: rotateInUpLeft; | |
animation-name: rotateInUpLeft; | |
} | |
@-webkit-keyframes rotateInUpRight { | |
from { | |
-webkit-transform-origin: right bottom; | |
transform-origin: right bottom; | |
-webkit-transform: rotate3d(0, 0, 1, -90deg); | |
transform: rotate3d(0, 0, 1, -90deg); | |
opacity: 0; | |
} | |
to { | |
-webkit-transform-origin: right bottom; | |
transform-origin: right bottom; | |
-webkit-transform: none; | |
transform: none; | |
opacity: 1; | |
} | |
} | |
@keyframes rotateInUpRight { | |
from { | |
-webkit-transform-origin: right bottom; | |
transform-origin: right bottom; | |
-webkit-transform: rotate3d(0, 0, 1, -90deg); | |
transform: rotate3d(0, 0, 1, -90deg); | |
opacity: 0; | |
} | |
to { | |
-webkit-transform-origin: right bottom; | |
transform-origin: right bottom; | |
-webkit-transform: none; | |
transform: none; | |
opacity: 1; | |
} | |
} | |
.rotateInUpRight { | |
-webkit-animation-name: rotateInUpRight; | |
animation-name: rotateInUpRight; | |
} | |
@-webkit-keyframes rotateOut { | |
from { | |
-webkit-transform-origin: center; | |
transform-origin: center; | |
opacity: 1; | |
} | |
to { | |
-webkit-transform-origin: center; | |
transform-origin: center; | |
-webkit-transform: rotate3d(0, 0, 1, 200deg); | |
transform: rotate3d(0, 0, 1, 200deg); | |
opacity: 0; | |
} | |
} | |
@keyframes rotateOut { | |
from { | |
-webkit-transform-origin: center; | |
transform-origin: center; | |
opacity: 1; | |
} | |
to { | |
-webkit-transform-origin: center; | |
transform-origin: center; | |
-webkit-transform: rotate3d(0, 0, 1, 200deg); | |
transform: rotate3d(0, 0, 1, 200deg); | |
opacity: 0; | |
} | |
} | |
.rotateOut { | |
-webkit-animation-name: rotateOut; | |
animation-name: rotateOut; | |
} | |
@-webkit-keyframes rotateOutDownLeft { | |
from { | |
-webkit-transform-origin: left bottom; | |
transform-origin: left bottom; | |
opacity: 1; | |
} | |
to { | |
-webkit-transform-origin: left bottom; | |
transform-origin: left bottom; | |
-webkit-transform: rotate3d(0, 0, 1, 45deg); | |
transform: rotate3d(0, 0, 1, 45deg); | |
opacity: 0; | |
} | |
} | |
@keyframes rotateOutDownLeft { | |
from { | |
-webkit-transform-origin: left bottom; | |
transform-origin: left bottom; | |
opacity: 1; | |
} | |
to { | |
-webkit-transform-origin: left bottom; | |
transform-origin: left bottom; | |
-webkit-transform: rotate3d(0, 0, 1, 45deg); | |
transform: rotate3d(0, 0, 1, 45deg); | |
opacity: 0; | |
} | |
} | |
.rotateOutDownLeft { | |
-webkit-animation-name: rotateOutDownLeft; | |
animation-name: rotateOutDownLeft; | |
} | |
@-webkit-keyframes rotateOutDownRight { | |
from { | |
-webkit-transform-origin: right bottom; | |
transform-origin: right bottom; | |
opacity: 1; | |
} | |
to { | |
-webkit-transform-origin: right bottom; | |
transform-origin: right bottom; | |
-webkit-transform: rotate3d(0, 0, 1, -45deg); | |
transform: rotate3d(0, 0, 1, -45deg); | |
opacity: 0; | |
} | |
} | |
@keyframes rotateOutDownRight { | |
from { | |
-webkit-transform-origin: right bottom; | |
transform-origin: right bottom; | |
opacity: 1; | |
} | |
to { | |
-webkit-transform-origin: right bottom; | |
transform-origin: right bottom; | |
-webkit-transform: rotate3d(0, 0, 1, -45deg); | |
transform: rotate3d(0, 0, 1, -45deg); | |
opacity: 0; | |
} | |
} | |
.rotateOutDownRight { | |
-webkit-animation-name: rotateOutDownRight; | |
animation-name: rotateOutDownRight; | |
} | |
@-webkit-keyframes rotateOutUpLeft { | |
from { | |
-webkit-transform-origin: left bottom; | |
transform-origin: left bottom; | |
opacity: 1; | |
} | |
to { | |
-webkit-transform-origin: left bottom; | |
transform-origin: left bottom; | |
-webkit-transform: rotate3d(0, 0, 1, -45deg); | |
transform: rotate3d(0, 0, 1, -45deg); | |
opacity: 0; | |
} | |
} | |
@keyframes rotateOutUpLeft { | |
from { | |
-webkit-transform-origin: left bottom; | |
transform-origin: left bottom; | |
opacity: 1; | |
} | |
to { | |
-webkit-transform-origin: left bottom; | |
transform-origin: left bottom; | |
-webkit-transform: rotate3d(0, 0, 1, -45deg); | |
transform: rotate3d(0, 0, 1, -45deg); | |
opacity: 0; | |
} | |
} | |
.rotateOutUpLeft { | |
-webkit-animation-name: rotateOutUpLeft; | |
animation-name: rotateOutUpLeft; | |
} | |
@-webkit-keyframes rotateOutUpRight { | |
from { | |
-webkit-transform-origin: right bottom; | |
transform-origin: right bottom; | |
opacity: 1; | |
} | |
to { | |
-webkit-transform-origin: right bottom; | |
transform-origin: right bottom; | |
-webkit-transform: rotate3d(0, 0, 1, 90deg); | |
transform: rotate3d(0, 0, 1, 90deg); | |
opacity: 0; | |
} | |
} | |
@keyframes rotateOutUpRight { | |
from { | |
-webkit-transform-origin: right bottom; | |
transform-origin: right bottom; | |
opacity: 1; | |
} | |
to { | |
-webkit-transform-origin: right bottom; | |
transform-origin: right bottom; | |
-webkit-transform: rotate3d(0, 0, 1, 90deg); | |
transform: rotate3d(0, 0, 1, 90deg); | |
opacity: 0; | |
} | |
} | |
.rotateOutUpRight { | |
-webkit-animation-name: rotateOutUpRight; | |
animation-name: rotateOutUpRight; | |
} | |
@-webkit-keyframes hinge { | |
0% { | |
-webkit-transform-origin: top left; | |
transform-origin: top left; | |
-webkit-animation-timing-function: ease-in-out; | |
animation-timing-function: ease-in-out; | |
} | |
20%, 60% { | |
-webkit-transform: rotate3d(0, 0, 1, 80deg); | |
transform: rotate3d(0, 0, 1, 80deg); | |
-webkit-transform-origin: top left; | |
transform-origin: top left; | |
-webkit-animation-timing-function: ease-in-out; | |
animation-timing-function: ease-in-out; | |
} | |
40%, 80% { | |
-webkit-transform: rotate3d(0, 0, 1, 60deg); | |
transform: rotate3d(0, 0, 1, 60deg); | |
-webkit-transform-origin: top left; | |
transform-origin: top left; | |
-webkit-animation-timing-function: ease-in-out; | |
animation-timing-function: ease-in-out; | |
opacity: 1; | |
} | |
to { | |
-webkit-transform: translate3d(0, 700px, 0); | |
transform: translate3d(0, 700px, 0); | |
opacity: 0; | |
} | |
} | |
@keyframes hinge { | |
0% { | |
-webkit-transform-origin: top left; | |
transform-origin: top left; | |
-webkit-animation-timing-function: ease-in-out; | |
animation-timing-function: ease-in-out; | |
} | |
20%, 60% { | |
-webkit-transform: rotate3d(0, 0, 1, 80deg); | |
transform: rotate3d(0, 0, 1, 80deg); | |
-webkit-transform-origin: top left; | |
transform-origin: top left; | |
-webkit-animation-timing-function: ease-in-out; | |
animation-timing-function: ease-in-out; | |
} | |
40%, 80% { | |
-webkit-transform: rotate3d(0, 0, 1, 60deg); | |
transform: rotate3d(0, 0, 1, 60deg); | |
-webkit-transform-origin: top left; | |
transform-origin: top left; | |
-webkit-animation-timing-function: ease-in-out; | |
animation-timing-function: ease-in-out; | |
opacity: 1; | |
} | |
to { | |
-webkit-transform: translate3d(0, 700px, 0); | |
transform: translate3d(0, 700px, 0); | |
opacity: 0; | |
} | |
} | |
.hinge { | |
-webkit-animation-name: hinge; | |
animation-name: hinge; | |
} | |
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ | |
@-webkit-keyframes rollIn { | |
from { | |
opacity: 0; | |
-webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); | |
transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); | |
} | |
to { | |
opacity: 1; | |
-webkit-transform: none; | |
transform: none; | |
} | |
} | |
@keyframes rollIn { | |
from { | |
opacity: 0; | |
-webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); | |
transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); | |
} | |
to { | |
opacity: 1; | |
-webkit-transform: none; | |
transform: none; | |
} | |
} | |
.rollIn { | |
-webkit-animation-name: rollIn; | |
animation-name: rollIn; | |
} | |
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ | |
@-webkit-keyframes rollOut { | |
from { | |
opacity: 1; | |
} | |
to { | |
opacity: 0; | |
-webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); | |
transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); | |
} | |
} | |
@keyframes rollOut { | |
from { | |
opacity: 1; | |
} | |
to { | |
opacity: 0; | |
-webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); | |
transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); | |
} | |
} | |
.rollOut { | |
-webkit-animation-name: rollOut; | |
animation-name: rollOut; | |
} | |
@-webkit-keyframes zoomIn { | |
from { | |
opacity: 0; | |
-webkit-transform: scale3d(.3, .3, .3); | |
transform: scale3d(.3, .3, .3); | |
} | |
50% { | |
opacity: 1; | |
} | |
} | |
@keyframes zoomIn { | |
from { | |
opacity: 0; | |
-webkit-transform: scale3d(.3, .3, .3); | |
transform: scale3d(.3, .3, .3); | |
} | |
50% { | |
opacity: 1; | |
} | |
} | |
.zoomIn { | |
-webkit-animation-name: zoomIn; | |
animation-name: zoomIn; | |
} | |
@-webkit-keyframes zoomInDown { | |
from { | |
opacity: 0; | |
-webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); | |
transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); | |
-webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); | |
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); | |
} | |
60% { | |
opacity: 1; | |
-webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); | |
transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); | |
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); | |
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); | |
} | |
} | |
@keyframes zoomInDown { | |
from { | |
opacity: 0; | |
-webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); | |
transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); | |
-webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); | |
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); | |
} | |
60% { | |
opacity: 1; | |
-webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); | |
transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); | |
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); | |
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); | |
} | |
} | |
.zoomInDown { | |
-webkit-animation-name: zoomInDown; | |
animation-name: zoomInDown; | |
} | |
@-webkit-keyframes zoomInLeft { | |
from { | |
opacity: 0; | |
-webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); | |
transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); | |
-webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); | |
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); | |
} | |
60% { | |
opacity: 1; | |
-webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); | |
transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); | |
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); | |
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); | |
} | |
} | |
@keyframes zoomInLeft { | |
from { | |
opacity: 0; | |
-webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); | |
transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); | |
-webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); | |
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); | |
} | |
60% { | |
opacity: 1; | |
-webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); | |
transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); | |
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); | |
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); | |
} | |
} | |
.zoomInLeft { | |
-webkit-animation-name: zoomInLeft; | |
animation-name: zoomInLeft; | |
} | |
@-webkit-keyframes zoomInRight { | |
from { | |
opacity: 0; | |
-webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); | |
transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); | |
-webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); | |
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); | |
} | |
60% { | |
opacity: 1; | |
-webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); | |
transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); | |
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); | |
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); | |
} | |
} | |
@keyframes zoomInRight { | |
from { | |
opacity: 0; | |
-webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); | |
transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); | |
-webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); | |
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); | |
} | |
60% { | |
opacity: 1; | |
-webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); | |
transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); | |
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); | |
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); | |
} | |
} | |
.zoomInRight { | |
-webkit-animation-name: zoomInRight; | |
animation-name: zoomInRight; | |
} | |
@-webkit-keyframes zoomInUp { | |
from { | |
opacity: 0; | |
-webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); | |
transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); | |
-webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); | |
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); | |
} | |
60% { | |
opacity: 1; | |
-webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); | |
transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); | |
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); | |
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); | |
} | |
} | |
@keyframes zoomInUp { | |
from { | |
opacity: 0; | |
-webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); | |
transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); | |
-webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); | |
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); | |
} | |
60% { | |
opacity: 1; | |
-webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); | |
transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); | |
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); | |
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); | |
} | |
} | |
.zoomInUp { | |
-webkit-animation-name: zoomInUp; | |
animation-name: zoomInUp; | |
} | |
@-webkit-keyframes zoomOut { | |
from { | |
opacity: 1; | |
} | |
50% { | |
opacity: 0; | |
-webkit-transform: scale3d(.3, .3, .3); | |
transform: scale3d(.3, .3, .3); | |
} | |
to { | |
opacity: 0; | |
} | |
} | |
@keyframes zoomOut { | |
from { | |
opacity: 1; | |
} | |
50% { | |
opacity: 0; | |
-webkit-transform: scale3d(.3, .3, .3); | |
transform: scale3d(.3, .3, .3); | |
} | |
to { | |
opacity: 0; | |
} | |
} | |
.zoomOut { | |
-webkit-animation-name: zoomOut; | |
animation-name: zoomOut; | |
} | |
@-webkit-keyframes zoomOutDown { | |
40% { | |
opacity: 1; | |
-webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); | |
transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); | |
-webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); | |
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); | |
} | |
to { | |
opacity: 0; | |
-webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); | |
transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); | |
-webkit-transform-origin: center bottom; | |
transform-origin: center bottom; | |
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); | |
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); | |
} | |
} | |
@keyframes zoomOutDown { | |
40% { | |
opacity: 1; | |
-webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); | |
transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); | |
-webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); | |
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); | |
} | |
to { | |
opacity: 0; | |
-webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); | |
transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); | |
-webkit-transform-origin: center bottom; | |
transform-origin: center bottom; | |
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); | |
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); | |
} | |
} | |
.zoomOutDown { | |
-webkit-animation-name: zoomOutDown; | |
animation-name: zoomOutDown; | |
} | |
@-webkit-keyframes zoomOutLeft { | |
40% { | |
opacity: 1; | |
-webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); | |
transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); | |
} | |
to { | |
opacity: 0; | |
-webkit-transform: scale(.1) translate3d(-2000px, 0, 0); | |
transform: scale(.1) translate3d(-2000px, 0, 0); | |
-webkit-transform-origin: left center; | |
transform-origin: left center; | |
} | |
} | |
@keyframes zoomOutLeft { | |
40% { | |
opacity: 1; | |
-webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); | |
transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); | |
} | |
to { | |
opacity: 0; | |
-webkit-transform: scale(.1) translate3d(-2000px, 0, 0); | |
transform: scale(.1) translate3d(-2000px, 0, 0); | |
-webkit-transform-origin: left center; | |
transform-origin: left center; | |
} | |
} | |
.zoomOutLeft { | |
-webkit-animation-name: zoomOutLeft; | |
animation-name: zoomOutLeft; | |
} | |
@-webkit-keyframes zoomOutRight { | |
40% { | |
opacity: 1; | |
-webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); | |
transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); | |
} | |
to { | |
opacity: 0; | |
-webkit-transform: scale(.1) translate3d(2000px, 0, 0); | |
transform: scale(.1) translate3d(2000px, 0, 0); | |
-webkit-transform-origin: right center; | |
transform-origin: right center; | |
} | |
} | |
@keyframes zoomOutRight { | |
40% { | |
opacity: 1; | |
-webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); | |
transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); | |
} | |
to { | |
opacity: 0; | |
-webkit-transform: scale(.1) translate3d(2000px, 0, 0); | |
transform: scale(.1) translate3d(2000px, 0, 0); | |
-webkit-transform-origin: right center; | |
transform-origin: right center; | |
} | |
} | |
.zoomOutRight { | |
-webkit-animation-name: zoomOutRight; | |
animation-name: zoomOutRight; | |
} | |
@-webkit-keyframes zoomOutUp { | |
40% { | |
opacity: 1; | |
-webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); | |
transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); | |
-webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); | |
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); | |
} | |
to { | |
opacity: 0; | |
-webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); | |
transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); | |
-webkit-transform-origin: center bottom; | |
transform-origin: center bottom; | |
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); | |
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); | |
} | |
} | |
@keyframes zoomOutUp { | |
40% { | |
opacity: 1; | |
-webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); | |
transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); | |
-webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); | |
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); | |
} | |
to { | |
opacity: 0; | |
-webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); | |
transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); | |
-webkit-transform-origin: center bottom; | |
transform-origin: center bottom; | |
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); | |
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); | |
} | |
} | |
.zoomOutUp { | |
-webkit-animation-name: zoomOutUp; | |
animation-name: zoomOutUp; | |
} | |
@-webkit-keyframes slideInDown { | |
from { | |
-webkit-transform: translate3d(0, -100%, 0); | |
transform: translate3d(0, -100%, 0); | |
visibility: visible; | |
} | |
to { | |
-webkit-transform: translate3d(0, 0, 0); | |
transform: translate3d(0, 0, 0); | |
} | |
} | |
@keyframes slideInDown { | |
from { | |
-webkit-transform: translate3d(0, -100%, 0); | |
transform: translate3d(0, -100%, 0); | |
visibility: visible; | |
} | |
to { | |
-webkit-transform: translate3d(0, 0, 0); | |
transform: translate3d(0, 0, 0); | |
} | |
} | |
.slideInDown { | |
-webkit-animation-name: slideInDown; | |
animation-name: slideInDown; | |
} | |
@-webkit-keyframes slideInLeft { | |
from { | |
-webkit-transform: translate3d(-100%, 0, 0); | |
transform: translate3d(-100%, 0, 0); | |
visibility: visible; | |
} | |
to { | |
-webkit-transform: translate3d(0, 0, 0); | |
transform: translate3d(0, 0, 0); | |
} | |
} | |
@keyframes slideInLeft { | |
from { | |
-webkit-transform: translate3d(-100%, 0, 0); | |
transform: translate3d(-100%, 0, 0); | |
visibility: visible; | |
} | |
to { | |
-webkit-transform: translate3d(0, 0, 0); | |
transform: translate3d(0, 0, 0); | |
} | |
} | |
.slideInLeft { | |
-webkit-animation-name: slideInLeft; | |
animation-name: slideInLeft; | |
} | |
@-webkit-keyframes slideInRight { | |
from { | |
-webkit-transform: translate3d(100%, 0, 0); | |
transform: translate3d(100%, 0, 0); | |
visibility: visible; | |
} | |
to { | |
-webkit-transform: translate3d(0, 0, 0); | |
transform: translate3d(0, 0, 0); | |
} | |
} | |
@keyframes slideInRight { | |
from { | |
-webkit-transform: translate3d(100%, 0, 0); | |
transform: translate3d(100%, 0, 0); | |
visibility: visible; | |
} | |
to { | |
-webkit-transform: translate3d(0, 0, 0); | |
transform: translate3d(0, 0, 0); | |
} | |
} | |
.slideInRight { | |
-webkit-animation-name: slideInRight; | |
animation-name: slideInRight; | |
} | |
@-webkit-keyframes slideInUp { | |
from { | |
-webkit-transform: translate3d(0, 100%, 0); | |
transform: translate3d(0, 100%, 0); | |
visibility: visible; | |
} | |
to { | |
-webkit-transform: translate3d(0, 0, 0); | |
transform: translate3d(0, 0, 0); | |
} | |
} | |
@keyframes slideInUp { | |
from { | |
-webkit-transform: translate3d(0, 100%, 0); | |
transform: translate3d(0, 100%, 0); | |
visibility: visible; | |
} | |
to { | |
-webkit-transform: translate3d(0, 0, 0); | |
transform: translate3d(0, 0, 0); | |
} | |
} | |
.slideInUp { | |
-webkit-animation-name: slideInUp; | |
animation-name: slideInUp; | |
} | |
@-webkit-keyframes slideOutDown { | |
from { | |
-webkit-transform: translate3d(0, 0, 0); | |
transform: translate3d(0, 0, 0); | |
} | |
to { | |
visibility: hidden; | |
-webkit-transform: translate3d(0, 100%, 0); | |
transform: translate3d(0, 100%, 0); | |
} | |
} | |
@keyframes slideOutDown { | |
from { | |
-webkit-transform: translate3d(0, 0, 0); | |
transform: translate3d(0, 0, 0); | |
} | |
to { | |
visibility: hidden; | |
-webkit-transform: translate3d(0, 100%, 0); | |
transform: translate3d(0, 100%, 0); | |
} | |
} | |
.slideOutDown { | |
-webkit-animation-name: slideOutDown; | |
animation-name: slideOutDown; | |
} | |
@-webkit-keyframes slideOutLeft { | |
from { | |
-webkit-transform: translate3d(0, 0, 0); | |
transform: translate3d(0, 0, 0); | |
} | |
to { | |
visibility: hidden; | |
-webkit-transform: translate3d(-100%, 0, 0); | |
transform: translate3d(-100%, 0, 0); | |
} | |
} | |
@keyframes slideOutLeft { | |
from { | |
-webkit-transform: translate3d(0, 0, 0); | |
transform: translate3d(0, 0, 0); | |
} | |
to { | |
visibility: hidden; | |
-webkit-transform: translate3d(-100%, 0, 0); | |
transform: translate3d(-100%, 0, 0); | |
} | |
} | |
.slideOutLeft { | |
-webkit-animation-name: slideOutLeft; | |
animation-name: slideOutLeft; | |
} | |
@-webkit-keyframes slideOutRight { | |
from { | |
-webkit-transform: translate3d(0, 0, 0); | |
transform: translate3d(0, 0, 0); | |
} | |
to { | |
visibility: hidden; | |
-webkit-transform: translate3d(100%, 0, 0); | |
transform: translate3d(100%, 0, 0); | |
} | |
} | |
@keyframes slideOutRight { | |
from { | |
-webkit-transform: translate3d(0, 0, 0); | |
transform: translate3d(0, 0, 0); | |
} | |
to { | |
visibility: hidden; | |
-webkit-transform: translate3d(100%, 0, 0); | |
transform: translate3d(100%, 0, 0); | |
} | |
} | |
.slideOutRight { | |
-webkit-animation-name: slideOutRight; | |
animation-name: slideOutRight; | |
} | |
@-webkit-keyframes slideOutUp { | |
from { | |
-webkit-transform: translate3d(0, 0, 0); | |
transform: translate3d(0, 0, 0); | |
} | |
to { | |
visibility: hidden; | |
-webkit-transform: translate3d(0, -100%, 0); | |
transform: translate3d(0, -100%, 0); | |
} | |
} | |
@keyframes slideOutUp { | |
from { | |
-webkit-transform: translate3d(0, 0, 0); | |
transform: translate3d(0, 0, 0); | |
} | |
to { | |
visibility: hidden; | |
-webkit-transform: translate3d(0, -100%, 0); | |
transform: translate3d(0, -100%, 0); | |
} | |
} | |
.slideOutUp { | |
-webkit-animation-name: slideOutUp; | |
animation-name: slideOutUp; | |
} | |
</style> | |
</defs> | |
<g> | |
<path class="st0" d="M122.2,293c-1.2,0.2-2.5,0.3-3.8,0.3c-14.8,0-26.8-12-26.8-26.8"/> | |
<path class="st0" d="M144.9,271c-1.5,8.8-7.3,16.1-15.2,19.7"/> | |
<path class="st0" d="M269.2,272c0.8,1.8,1.4,3.8,1.5,5.8c0.3,6.4-3.4,12-8.8,14.5"/> | |
<path class="st0" d="M227.4,145.9c3.5-9,12.3-15.4,22.6-15.4c2.1,0,4.1,0.3,6,0.7"/> | |
<path class="st0" d="M265.9,136.3c5.1,4.5,8.4,11,8.4,18.4c0,3.4-0.7,6.5-1.9,9.5"/> | |
<path class="st0" d="M377.9,257.4c-6.6,4.8-14.8,7.7-23.6,7.7c-13.6,0-25.7-6.8-33-17.2"/> | |
<path class="st0" d="M333.7,141.5c1.1,16.2,9.7,34.9,38,48.5"/> | |
<path class="st0" d="M339.6,76.2c4.3,4.1,7,9.9,7,16.3c0,4.4-1.2,8.4-3.4,11.9l-1.2,2c0,0-7,11.7-8.2,27.1"/> | |
<path class="st0" d="M303.3,84.3C306.6,76,314.7,70,324.2,70c6,0,11.4,2.3,15.4,6.1"/> | |
<path class="st0" d="M107.3,180.1c4.5-13.8,17.5-23.8,32.8-23.8c19,0,34.5,15.4,34.5,34.5c0,3.3-0.5,6.6-1.4,9.6"/> | |
<path class="st0" d="M92.6,254.3c-0.4,4-0.6,7.2-0.8,9.2"/> | |
<path class="st0" d="M107.3,180.1c-4.7,14.7-8,29.6-10.3,42.8c0,0-0.8,4.7-1.2,7.3c-0.8,5.2-1.5,10-2,14.3"/> | |
<path class="st0" d="M101.6,264.5c0.6-10.1,2.1-44,13.6-80.1"/> | |
<path class="st0" d="M110.9,257.9c0.6-10.1,1.3-35.1,12.7-71.3"/> | |
<path class="st0" d="M91.7,266.4c0,0,0-1,0.2-2.9"/> | |
<path class="st0" d="M78.1,219.8c-0.6,3-1.4,7.7-1.9,12.4"/> | |
<path class="st0" d="M155.4,267c0.8-8.2,4-15.6,6.6-21.3"/> | |
<path class="st0" d="M165.5,214.2"/> | |
<path class="st0" d="M144.9,271c0,0,3.7-28.8,20.6-56.8"/> | |
<path class="st0" d="M135.3,267.8c0,0,1.3-21.7,18.1-49.8"/> | |
<path class="st0" d="M125.8,267.9c0,0,3.8-36.2,29-69"/> | |
<path class="st0" d="M145.3,156.6"/> | |
<path class="st0" d="M348,117.1c0,0-21.2,37.6,22.3,59.9"/> | |
<path class="st0" d="M357.4,116.6c0,0-4.2,7.1-5.2,16.8"/> | |
<path class="st0" d="M368.9,164.7c-0.5,0.5-13.6-9.5-15.8-20"/> | |
<path class="st0" d="M288.9,145.4c0,0,1.1-23.4,14.1-60.1"/> | |
<path class="st0" d="M315.4,239.2c0,0-21-24.1-25.6-69.2"/> | |
<path class="st0" d="M289.2,206.7c-1.9-4-3.2-7.6-4.1-12.8"/> | |
<path class="st0" d="M309.6,209.8c11.2,26.5,26.4,40.1,26.4,40.1"/> | |
<path class="st0" d="M310.2,92.2c-12.2,36.4-12.4,61.8-12.4,61.8c0.4,17.9,3.7,33.4,8.1,46.4"/> | |
<path class="st0" d="M338.2,237.8c-10.7-13.2-29.6-41.4-30.7-86.4c0,0,0.1-20,9.4-47.4"/> | |
<path class="st0" d="M216.8,168.1c3.3-4.1,6.3-9.4,8.9-16.3"/> | |
<path class="st0" d="M203.2,189.1c8.4-2.9,16.8-9.7,23.9-21.9"/> | |
<path class="st0" d="M198.7,214.2c-2,5.2-4.6,10.1-7.8,14.6"/> | |
<path class="st0" d="M218.7,191c-3.3,2.6-6.7,4.5-10.1,5.9c-3.7,1.4-6.2,4.7-7,8.6c-0.2,0.8-0.3,1.5-0.5,2.2"/> | |
<path class="st0" d="M202.8,228.4c2.7-4.9,4.5-9.6,6.1-15.2c0.2-0.7,0.4-1.5,0.6-2.3c0,0,0-0.1,0-0.1c0.8-3.8,3.6-6.9,7.1-8.6 | |
l2.1-1.1"/> | |
<path class="st0" d="M243.1,151.8c-6.9,19.1-15.7,32.3-24.4,39.2"/> | |
<path class="st0" d="M258.1,245.9c-5.8-20.1-8.2-48.9,10.8-75.9"/> | |
<path class="st0" d="M269.2,272c0,0-4.6-7.3-8.8-18.8"/> | |
<path class="st0" d="M275.7,267.8c0,0-30.6-51.2,3-97.8"/> | |
<path class="st0" d="M277.8,250.5c-3.8-12.4-13-38.1,4.6-68.7"/> | |
<path class="st0" d="M354.2,104c-0.7,2.4-1.6,4.7-2.7,6.8"/> | |
<path class="st0" d="M366.1,148.1c-2.7-4.2-4.4-9.1-4.8-14.5c-0.1-1.9-0.1-3.9,0.1-5.7"/> | |
<path class="st0" d="M377.6,245.2c-5.7,6.4-14,10.5-23.3,10.5c-4.2,0-8.2-0.8-11.8-2.3"/> | |
<path class="st0" d="M374.1,217.8c0.7,2.1,1.1,4.4,1.1,6.7"/> | |
<path class="st0" d="M375.2,224.5c0,11.5-9.4,20.9-20.9,20.9c-6.5,0-12.3-2.9-16.1-7.6"/> | |
<path class="st0" d="M357.7,216c3.5,1.7,5.9,5.2,5.9,9.4"/> | |
<path class="st0" d="M318.7,97c0.9-4.8,4.1-7.8,8.3-6.8"/> | |
<path class="st0" d="M363.6,225.4c0,5.7-4.7,10.4-10.4,10.4c-3.1,0-7.3-3.3-8.5-4.7l-0.9-1.2c-8.4-12.2-21.2-36.1-25.7-65.1"/> | |
<path class="st0" d="M377.9,269.1c-7,3.8-15.1,5.9-23.7,5.9c-11.9,0-22.7-4.1-31.3-11"/> | |
<path class="st0" d="M341.5,284c-3.3-0.7-6.4-1.7-9.5-2.9"/> | |
<path class="st0" d="M377.2,280.8c-7.1,2.9-14.8,4.5-22.9,4.5c-2.2,0-4.3-0.1-6.4-0.3"/> | |
<path class="st0" d="M356.8,295c-1,0-2.1,0.1-3.1,0.1c-5,0-9.8-0.5-14.5-1.5"/> | |
<path class="st0" d="M356.8,295"/> | |
<path class="st0" d="M365.7,294.1c-1,0.2-2.1,0.3-3.1,0.5"/> | |
<path class="st0" d="M376.1,291.4c-3.4,1.1-6.9,2-10.4,2.6"/> | |
<path class="st0" d="M374.1,301c-6.6,1.8-13.5,2.7-20.7,2.7c-2.7,0-5.3-0.1-7.9-0.4"/> | |
<path class="st0" d="M369.5,311.5c-5,0.9-10.1,1.3-15.3,1.3c-0.6,0-1.2,0-1.8,0"/> | |
<path class="st0" d="M329.6,164.2c10.9,18.6,23.9,27.4,43.6,37.9"/> | |
<path class="st0" d="M336.7,98.7c0.5,0-24.3,32.5-7.1,65.5"/> | |
<path class="st0" d="M328.3,177.5c10,13.8,23,23.7,39.2,32.4"/> | |
<path class="st0" d="M333.6,194.8c6.5,8.1,14.1,14.5,17.8,17.3"/> | |
<path class="st0" d="M336.3,99.6c3.1-5.3,2.4-12.2-2.1-16.7c-5.4-5.4-14.1-5.4-19.5,0c-0.5,0.5-0.8,0.8-1.2,1.3"/> | |
<path class="st0" d="M355.6,225.4c-0.5,1.1-1.6,1.8-2.9,1.8"/> | |
<path class="st0" d="M233.7,127.3c4.5-2.5,9.4-4.7,16.6-4.7"/> | |
<path class="st0" d="M238.2,118c1.3-0.5,2.6-0.9,3.9-1.2"/> | |
<path class="st0" d="M288.9,161.4c-0.1-1.7-0.2-3.5-0.1-5.2"/> | |
<path class="st0" d="M230.7,160.4c1.5-3.3,3-6.9,4.3-10.8c0.4-1.2,1.1-2.6,1.1-2.6c2.7-4.9,7.9-8.2,13.9-8.2 | |
c8.8,0,15.9,7.1,15.9,15.9c0,1.8-0.3,3.6-0.9,5.3c0,0-0.6,1.6-1.1,2.2c-8.5,12.8-13.6,25-16.4,36.5"/> | |
<path class="st0" d="M123.7,186.6c2.6-8.4,8.5-12.8,16.4-12.8c9.3,0,16.9,7.6,16.9,16.9c0,3-0.8,5.7-2.1,8.2"/> | |
<path class="st0" d="M135.3,267.8c-0.7,8.7-8,15.5-16.8,15.5c-9.3,0-16.9-7.6-16.9-16.9c0-1-0.2-1,0-1.9"/> | |
<path class="st0" d="M243.1,151.8c1.1-2.7,3.8-4.6,6.9-4.6c4.2,0,7.5,3.4,7.5,7.5c0,1.3-0.3,2.6-1,3.7"/> | |
<path class="st0" d="M142.3,200.8c-6.3,10.1-17.3,29.7-21.1,49.1"/> | |
<path class="st0" d="M147,187.8c-1.1-2.7-3.8-4.6-6.9-4.6c-3.6,0-6.8,1.7-8.3,6c0,0-1.8,4.9-4.5,15.9"/> | |
<path class="st0" d="M125.8,267.9c-0.7,3.5-3.7,6.1-7.4,6.1c-4.2,0-7.5-3.4-7.5-7.5"/> | |
<path class="st0" d="M322.9,62.3c0,0-6.8,0.1-15.3,4.7"/> | |
<path class="st0" d="M274.6,133.4c4.9,5.7,7.9,13.1,7.9,21.2c0,6-1.2,10.7-4,15.5"/> | |
<path class="st0" d="M280.6,127.6c1.2,1.4,0.9,0.7,1.9,2.3"/> | |
<path class="st0" d="M275.3,267.1c1.8,3.1,2.8,6.6,3,10.4c0.5,10-5.5,18.7-14.3,22.2"/> | |
<path class="st0" d="M281.9,293.7c-3.2,5.5-8,10-13.9,12.6"/> | |
<path class="st0" d="M90,289.2c-4.7-5.8-7.4-13.1-7.4-21.4"/> | |
<path class="st0" d="M141.3,294.2c-6.2,5.1-14.1,8.2-22.8,8.2c-9,0-17.3-3-23.6-8.2"/> | |
<path class="st0" d="M144.9,165.5c11.9,2.3,20.8,12.7,20.8,25.2c0,3.4-0.7,6.6-1.9,9.6c0,0-3.1,5.4-5.2,8.8"/> | |
<path class="st0" d="M118.4,176.9c3.5-5.6,9.2-9.7,15.8-11.2"/> | |
<path class="st0" d="M125.8,311c-2.4,0.4-4.8,0.6-7.3,0.6c-16.4,0-30.7-8.7-38.6-21.7"/> | |
<path class="st0" d="M110,319.3c-7.4-1.2-14.2-3.8-20.3-7.7"/> | |
<path class="st0" d="M179.5,172.2c2.6,5.6,4.1,11.9,4.1,18.5c0,10-3.4,19.2-9.1,26.6"/> | |
<path class="st0" d="M93.7,193.9c-9.9,38.3-11.1,73.9-11.1,73.9"/> | |
<path class="st0" d="M170.8,159.9c-7.9-7.9-18.8-12.8-30.8-12.8c-17.8,0-33.2,10.7-39.9,26.1c0,0-1.8,4.3-2.7,7.4 | |
c-0.6,1.9-1.2,3.8-1.7,5.7"/> | |
<path class="st0" d="M262.2,275.7c0.3,0.8,0.5,1.7,0.5,2.6c0,2.6-1.4,4.9-3.4,6.2"/> | |
<path class="st0" d="M193.1,186.3c0.1,1.4,0.2,2.9,0.2,4.4c0,14.1-6.5,31.6-21.8,45.1"/> | |
<path class="st0" d="M104.6,151c9.4-8.4,21.8-13.5,35.4-13.5c1.7,0,3.5,0.1,5.2,0.2"/> | |
<path class="st0" d="M92.7,167.2c-0.4,1-0.9,2.1-1.3,3.1c-1.1,3.1-2.6,7.2-4,12c-2.9,9.9-5.6,19.6-7.6,28.8"/> | |
<path class="st0" d="M104.6,151c-1.1,1-2.1,2-3.1,3"/> | |
<path class="st0" d="M259.1,270.6c-5.7-9.4-17.6-33.3-13-64"/> | |
<path class="st0" d="M238.6,249.9c-7.5-32.1-3.7-62.7,18-91.6"/> | |
<path class="st0" d="M227.8,239.7c-2.2-13.9-2.5-29.8,1.5-46.1"/> | |
<path class="st0" d="M218,233.4c-1-6.5-0.5-13.6,0-21"/> | |
<line class="st0" x1="169.8" y1="224.4" x2="168.3" y2="226.9"/> | |
<path class="st0" d="M147.6,193.6c0.1,1-0.3,1.8-1.2,2.4"/> | |
</g> | |
</svg> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?xml version="1.0" encoding="utf-8"?> | |
<!-- Generator: Adobe Illustrator 20.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> | |
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> | |
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" | |
viewBox="0 0 400 400" xml:space="preserve"> | |
<defs> | |
<style type="text/css"> | |
.st0{ | |
fill:none; | |
stroke:tomato; | |
stroke-width:1; | |
stroke-miterlimit:10; | |
} | |
svg:hover .st0 { | |
animation-name: dash; | |
animation-play-state: running; | |
animation-iteration-count: infinite; | |
animation-timing-function: linear; | |
stroke-dasharray: 600; | |
stroke-dashoffset: 0; | |
-webkit-animation: dash 2.5s ease-in-out forwards; | |
-o-animation: dash 2.5s ease-in-out forwards; | |
-moz-animation: dash 2.5s ease-in-out forwards; | |
animation: dash 2.5s ease-in-out forwards; | |
} | |
@-webkit-keyframes dash { | |
from { | |
stroke-dashoffset: 600; | |
} | |
to { | |
stroke-dashoffset: 0; | |
} | |
@charset "UTF-8"; | |
/*! | |
* animate.css -http://daneden.me/animate | |
* Version - 3.5.1 | |
* Licensed under the MIT license - http://opensource.org/licenses/MIT | |
* | |
* Copyright (c) 2016 Daniel Eden | |
*/ | |
.animated { | |
-webkit-animation-duration: 1s; | |
animation-duration: 1s; | |
-webkit-animation-fill-mode: both; | |
animation-fill-mode: both; | |
} | |
.animated.infinite { | |
-webkit-animation-iteration-count: infinite; | |
animation-iteration-count: infinite; | |
} | |
.animated.hinge { | |
-webkit-animation-duration: 2s; | |
animation-duration: 2s; | |
} | |
.animated.flipOutX, | |
.animated.flipOutY, | |
.animated.bounceIn, | |
.animated.bounceOut { | |
-webkit-animation-duration: .75s; | |
animation-duration: .75s; | |
} | |
@-webkit-keyframes bounce { | |
from, 20%, 53%, 80%, to { | |
-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); | |
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); | |
-webkit-transform: translate3d(0,0,0); | |
transform: translate3d(0,0,0); | |
} | |
40%, 43% { | |
-webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); | |
animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); | |
-webkit-transform: translate3d(0, -30px, 0); | |
transform: translate3d(0, -30px, 0); | |
} | |
70% { | |
-webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); | |
animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); | |
-webkit-transform: translate3d(0, -15px, 0); | |
transform: translate3d(0, -15px, 0); | |
} | |
90% { | |
-webkit-transform: translate3d(0,-4px,0); | |
transform: translate3d(0,-4px,0); | |
} | |
} | |
@keyframes bounce { | |
from, 20%, 53%, 80%, to { | |
-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); | |
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); | |
-webkit-transform: translate3d(0,0,0); | |
transform: translate3d(0,0,0); | |
} | |
40%, 43% { | |
-webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); | |
animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); | |
-webkit-transform: translate3d(0, -30px, 0); | |
transform: translate3d(0, -30px, 0); | |
} | |
70% { | |
-webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); | |
animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); | |
-webkit-transform: translate3d(0, -15px, 0); | |
transform: translate3d(0, -15px, 0); | |
} | |
90% { | |
-webkit-transform: translate3d(0,-4px,0); | |
transform: translate3d(0,-4px,0); | |
} | |
} | |
.bounce { | |
-webkit-animation-name: bounce; | |
animation-name: bounce; | |
-webkit-transform-origin: center bottom; | |
transform-origin: center bottom; | |
} | |
@-webkit-keyframes flash { | |
from, 50%, to { | |
opacity: 1; | |
} | |
25%, 75% { | |
opacity: 0; | |
} | |
} | |
@keyframes flash { | |
from, 50%, to { | |
opacity: 1; | |
} | |
25%, 75% { | |
opacity: 0; | |
} | |
} | |
.flash { | |
-webkit-animation-name: flash; | |
animation-name: flash; | |
} | |
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ | |
@-webkit-keyframes pulse { | |
from { | |
-webkit-transform: scale3d(1, 1, 1); | |
transform: scale3d(1, 1, 1); | |
} | |
50% { | |
-webkit-transform: scale3d(1.05, 1.05, 1.05); | |
transform: scale3d(1.05, 1.05, 1.05); | |
} | |
to { | |
-webkit-transform: scale3d(1, 1, 1); | |
transform: scale3d(1, 1, 1); | |
} | |
} | |
@keyframes pulse { | |
from { | |
-webkit-transform: scale3d(1, 1, 1); | |
transform: scale3d(1, 1, 1); | |
} | |
50% { | |
-webkit-transform: scale3d(1.05, 1.05, 1.05); | |
transform: scale3d(1.05, 1.05, 1.05); | |
} | |
to { | |
-webkit-transform: scale3d(1, 1, 1); | |
transform: scale3d(1, 1, 1); | |
} | |
} | |
.pulse { | |
-webkit-animation-name: pulse; | |
animation-name: pulse; | |
} | |
@-webkit-keyframes rubberBand { | |
from { | |
-webkit-transform: scale3d(1, 1, 1); | |
transform: scale3d(1, 1, 1); | |
} | |
30% { | |
-webkit-transform: scale3d(1.25, 0.75, 1); | |
transform: scale3d(1.25, 0.75, 1); | |
} | |
40% { | |
-webkit-transform: scale3d(0.75, 1.25, 1); | |
transform: scale3d(0.75, 1.25, 1); | |
} | |
50% { | |
-webkit-transform: scale3d(1.15, 0.85, 1); | |
transform: scale3d(1.15, 0.85, 1); | |
} | |
65% { | |
-webkit-transform: scale3d(.95, 1.05, 1); | |
transform: scale3d(.95, 1.05, 1); | |
} | |
75% { | |
-webkit-transform: scale3d(1.05, .95, 1); | |
transform: scale3d(1.05, .95, 1); | |
} | |
to { | |
-webkit-transform: scale3d(1, 1, 1); | |
transform: scale3d(1, 1, 1); | |
} | |
} | |
@keyframes rubberBand { | |
from { | |
-webkit-transform: scale3d(1, 1, 1); | |
transform: scale3d(1, 1, 1); | |
} | |
30% { | |
-webkit-transform: scale3d(1.25, 0.75, 1); | |
transform: scale3d(1.25, 0.75, 1); | |
} | |
40% { | |
-webkit-transform: scale3d(0.75, 1.25, 1); | |
transform: scale3d(0.75, 1.25, 1); | |
} | |
50% { | |
-webkit-transform: scale3d(1.15, 0.85, 1); | |
transform: scale3d(1.15, 0.85, 1); | |
} | |
65% { | |
-webkit-transform: scale3d(.95, 1.05, 1); | |
transform: scale3d(.95, 1.05, 1); | |
} | |
75% { | |
-webkit-transform: scale3d(1.05, .95, 1); | |
transform: scale3d(1.05, .95, 1); | |
} | |
to { | |
-webkit-transform: scale3d(1, 1, 1); | |
transform: scale3d(1, 1, 1); | |
} | |
} | |
.rubberBand { | |
-webkit-animation-name: rubberBand; | |
animation-name: rubberBand; | |
} | |
@-webkit-keyframes shake { | |
from, to { | |
-webkit-transform: translate3d(0, 0, 0); | |
transform: translate3d(0, 0, 0); | |
} | |
10%, 30%, 50%, 70%, 90% { | |
-webkit-transform: translate3d(-10px, 0, 0); | |
transform: translate3d(-10px, 0, 0); | |
} | |
20%, 40%, 60%, 80% { | |
-webkit-transform: translate3d(10px, 0, 0); | |
transform: translate3d(10px, 0, 0); | |
} | |
} | |
@keyframes shake { | |
from, to { | |
-webkit-transform: translate3d(0, 0, 0); | |
transform: translate3d(0, 0, 0); | |
} | |
10%, 30%, 50%, 70%, 90% { | |
-webkit-transform: translate3d(-10px, 0, 0); | |
transform: translate3d(-10px, 0, 0); | |
} | |
20%, 40%, 60%, 80% { | |
-webkit-transform: translate3d(10px, 0, 0); | |
transform: translate3d(10px, 0, 0); | |
} | |
} | |
.shake { | |
-webkit-animation-name: shake; | |
animation-name: shake; | |
} | |
@-webkit-keyframes headShake { | |
0% { | |
-webkit-transform: translateX(0); | |
transform: translateX(0); | |
} | |
6.5% { | |
-webkit-transform: translateX(-6px) rotateY(-9deg); | |
transform: translateX(-6px) rotateY(-9deg); | |
} | |
18.5% { | |
-webkit-transform: translateX(5px) rotateY(7deg); | |
transform: translateX(5px) rotateY(7deg); | |
} | |
31.5% { | |
-webkit-transform: translateX(-3px) rotateY(-5deg); | |
transform: translateX(-3px) rotateY(-5deg); | |
} | |
43.5% { | |
-webkit-transform: translateX(2px) rotateY(3deg); | |
transform: translateX(2px) rotateY(3deg); | |
} | |
50% { | |
-webkit-transform: translateX(0); | |
transform: translateX(0); | |
} | |
} | |
@keyframes headShake { | |
0% { | |
-webkit-transform: translateX(0); | |
transform: translateX(0); | |
} | |
6.5% { | |
-webkit-transform: translateX(-6px) rotateY(-9deg); | |
transform: translateX(-6px) rotateY(-9deg); | |
} | |
18.5% { | |
-webkit-transform: translateX(5px) rotateY(7deg); | |
transform: translateX(5px) rotateY(7deg); | |
} | |
31.5% { | |
-webkit-transform: translateX(-3px) rotateY(-5deg); | |
transform: translateX(-3px) rotateY(-5deg); | |
} | |
43.5% { | |
-webkit-transform: translateX(2px) rotateY(3deg); | |
transform: translateX(2px) rotateY(3deg); | |
} | |
50% { | |
-webkit-transform: translateX(0); | |
transform: translateX(0); | |
} | |
} | |
.headShake { | |
-webkit-animation-timing-function: ease-in-out; | |
animation-timing-function: ease-in-out; | |
-webkit-animation-name: headShake; | |
animation-name: headShake; | |
} | |
@-webkit-keyframes swing { | |
20% { | |
-webkit-transform: rotate3d(0, 0, 1, 15deg); | |
transform: rotate3d(0, 0, 1, 15deg); | |
} | |
40% { | |
-webkit-transform: rotate3d(0, 0, 1, -10deg); | |
transform: rotate3d(0, 0, 1, -10deg); | |
} | |
60% { | |
-webkit-transform: rotate3d(0, 0, 1, 5deg); | |
transform: rotate3d(0, 0, 1, 5deg); | |
} | |
80% { | |
-webkit-transform: rotate3d(0, 0, 1, -5deg); | |
transform: rotate3d(0, 0, 1, -5deg); | |
} | |
to { | |
-webkit-transform: rotate3d(0, 0, 1, 0deg); | |
transform: rotate3d(0, 0, 1, 0deg); | |
} | |
} | |
@keyframes swing { | |
20% { | |
-webkit-transform: rotate3d(0, 0, 1, 15deg); | |
transform: rotate3d(0, 0, 1, 15deg); | |
} | |
40% { | |
-webkit-transform: rotate3d(0, 0, 1, -10deg); | |
transform: rotate3d(0, 0, 1, -10deg); | |
} | |
60% { | |
-webkit-transform: rotate3d(0, 0, 1, 5deg); | |
transform: rotate3d(0, 0, 1, 5deg); | |
} | |
80% { | |
-webkit-transform: rotate3d(0, 0, 1, -5deg); | |
transform: rotate3d(0, 0, 1, -5deg); | |
} | |
to { | |
-webkit-transform: rotate3d(0, 0, 1, 0deg); | |
transform: rotate3d(0, 0, 1, 0deg); | |
} | |
} | |
.swing { | |
-webkit-transform-origin: top center; | |
transform-origin: top center; | |
-webkit-animation-name: swing; | |
animation-name: swing; | |
} | |
@-webkit-keyframes tada { | |
from { | |
-webkit-transform: scale3d(1, 1, 1); | |
transform: scale3d(1, 1, 1); | |
} | |
10%, 20% { | |
-webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); | |
transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); | |
} | |
30%, 50%, 70%, 90% { | |
-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); | |
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); | |
} | |
40%, 60%, 80% { | |
-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); | |
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); | |
} | |
to { | |
-webkit-transform: scale3d(1, 1, 1); | |
transform: scale3d(1, 1, 1); | |
} | |
} | |
@keyframes tada { | |
from { | |
-webkit-transform: scale3d(1, 1, 1); | |
transform: scale3d(1, 1, 1); | |
} | |
10%, 20% { | |
-webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); | |
transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); | |
} | |
30%, 50%, 70%, 90% { | |
-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); | |
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); | |
} | |
40%, 60%, 80% { | |
-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); | |
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); | |
} | |
to { | |
-webkit-transform: scale3d(1, 1, 1); | |
transform: scale3d(1, 1, 1); | |
} | |
} | |
.tada { | |
-webkit-animation-name: tada; | |
animation-name: tada; | |
} | |
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ | |
@-webkit-keyframes wobble { | |
from { | |
-webkit-transform: none; | |
transform: none; | |
} | |
15% { | |
-webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); | |
transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); | |
} | |
30% { | |
-webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); | |
transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); | |
} | |
45% { | |
-webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); | |
transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); | |
} | |
60% { | |
-webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); | |
transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); | |
} | |
75% { | |
-webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); | |
transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); | |
} | |
to { | |
-webkit-transform: none; | |
transform: none; | |
} | |
} | |
@keyframes wobble { | |
from { | |
-webkit-transform: none; | |
transform: none; | |
} | |
15% { | |
-webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); | |
transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); | |
} | |
30% { | |
-webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); | |
transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); | |
} | |
45% { | |
-webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); | |
transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); | |
} | |
60% { | |
-webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); | |
transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); | |
} | |
75% { | |
-webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); | |
transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); | |
} | |
to { | |
-webkit-transform: none; | |
transform: none; | |
} | |
} | |
.wobble { | |
-webkit-animation-name: wobble; | |
animation-name: wobble; | |
} | |
@-webkit-keyframes jello { | |
from, 11.1%, to { | |
-webkit-transform: none; | |
transform: none; | |
} | |
22.2% { | |
-webkit-transform: skewX(-12.5deg) skewY(-12.5deg); | |
transform: skewX(-12.5deg) skewY(-12.5deg); | |
} | |
33.3% { | |
-webkit-transform: skewX(6.25deg) skewY(6.25deg); | |
transform: skewX(6.25deg) skewY(6.25deg); | |
} | |
44.4% { | |
-webkit-transform: skewX(-3.125deg) skewY(-3.125deg); | |
transform: skewX(-3.125deg) skewY(-3.125deg); | |
} | |
55.5% { | |
-webkit-transform: skewX(1.5625deg) skewY(1.5625deg); | |
transform: skewX(1.5625deg) skewY(1.5625deg); | |
} | |
66.6% { | |
-webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg); | |
transform: skewX(-0.78125deg) skewY(-0.78125deg); | |
} | |
77.7% { | |
-webkit-transform: skewX(0.390625deg) skewY(0.390625deg); | |
transform: skewX(0.390625deg) skewY(0.390625deg); | |
} | |
88.8% { | |
-webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg); | |
transform: skewX(-0.1953125deg) skewY(-0.1953125deg); | |
} | |
} | |
@keyframes jello { | |
from, 11.1%, to { | |
-webkit-transform: none; | |
transform: none; | |
} | |
22.2% { | |
-webkit-transform: skewX(-12.5deg) skewY(-12.5deg); | |
transform: skewX(-12.5deg) skewY(-12.5deg); | |
} | |
33.3% { | |
-webkit-transform: skewX(6.25deg) skewY(6.25deg); | |
transform: skewX(6.25deg) skewY(6.25deg); | |
} | |
44.4% { | |
-webkit-transform: skewX(-3.125deg) skewY(-3.125deg); | |
transform: skewX(-3.125deg) skewY(-3.125deg); | |
} | |
55.5% { | |
-webkit-transform: skewX(1.5625deg) skewY(1.5625deg); | |
transform: skewX(1.5625deg) skewY(1.5625deg); | |
} | |
66.6% { | |
-webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg); | |
transform: skewX(-0.78125deg) skewY(-0.78125deg); | |
} | |
77.7% { | |
-webkit-transform: skewX(0.390625deg) skewY(0.390625deg); | |
transform: skewX(0.390625deg) skewY(0.390625deg); | |
} | |
88.8% { | |
-webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg); | |
transform: skewX(-0.1953125deg) skewY(-0.1953125deg); | |
} | |
} | |
.jello { | |
-webkit-animation-name: jello; | |
animation-name: jello; | |
-webkit-transform-origin: center; | |
transform-origin: center; | |
} | |
@-webkit-keyframes bounceIn { | |
from, 20%, 40%, 60%, 80%, to { | |
-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); | |
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); | |
} | |
0% { | |
opacity: 0; | |
-webkit-transform: scale3d(.3, .3, .3); | |
transform: scale3d(.3, .3, .3); | |
} | |
20% { | |
-webkit-transform: scale3d(1.1, 1.1, 1.1); | |
transform: scale3d(1.1, 1.1, 1.1); | |
} | |
40% { | |
-webkit-transform: scale3d(.9, .9, .9); | |
transform: scale3d(.9, .9, .9); | |
} | |
60% { | |
opacity: 1; | |
-webkit-transform: scale3d(1.03, 1.03, 1.03); | |
transform: scale3d(1.03, 1.03, 1.03); | |
} | |
80% { | |
-webkit-transform: scale3d(.97, .97, .97); | |
transform: scale3d(.97, .97, .97); | |
} | |
to { | |
opacity: 1; | |
-webkit-transform: scale3d(1, 1, 1); | |
transform: scale3d(1, 1, 1); | |
} | |
} | |
@keyframes bounceIn { | |
from, 20%, 40%, 60%, 80%, to { | |
-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); | |
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); | |
} | |
0% { | |
opacity: 0; | |
-webkit-transform: scale3d(.3, .3, .3); | |
transform: scale3d(.3, .3, .3); | |
} | |
20% { | |
-webkit-transform: scale3d(1.1, 1.1, 1.1); | |
transform: scale3d(1.1, 1.1, 1.1); | |
} | |
40% { | |
-webkit-transform: scale3d(.9, .9, .9); | |
transform: scale3d(.9, .9, .9); | |
} | |
60% { | |
opacity: 1; | |
-webkit-transform: scale3d(1.03, 1.03, 1.03); | |
transform: scale3d(1.03, 1.03, 1.03); | |
} | |
80% { | |
-webkit-transform: scale3d(.97, .97, .97); | |
transform: scale3d(.97, .97, .97); | |
} | |
to { | |
opacity: 1; | |
-webkit-transform: scale3d(1, 1, 1); | |
transform: scale3d(1, 1, 1); | |
} | |
} | |
.bounceIn { | |
-webkit-animation-name: bounceIn; | |
animation-name: bounceIn; | |
} | |
@-webkit-keyframes bounceInDown { | |
from, 60%, 75%, 90%, to { | |
-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); | |
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); | |
} | |
0% { | |
opacity: 0; | |
-webkit-transform: translate3d(0, -3000px, 0); | |
transform: translate3d(0, -3000px, 0); | |
} | |
60% { | |
opacity: 1; | |
-webkit-transform: translate3d(0, 25px, 0); | |
transform: translate3d(0, 25px, 0); | |
} | |
75% { | |
-webkit-transform: translate3d(0, -10px, 0); | |
transform: translate3d(0, -10px, 0); | |
} | |
90% { | |
-webkit-transform: translate3d(0, 5px, 0); | |
transform: translate3d(0, 5px, 0); | |
} | |
to { | |
-webkit-transform: none; | |
transform: none; | |
} | |
} | |
@keyframes bounceInDown { | |
from, 60%, 75%, 90%, to { | |
-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); | |
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); | |
} | |
0% { | |
opacity: 0; | |
-webkit-transform: translate3d(0, -3000px, 0); | |
transform: translate3d(0, -3000px, 0); | |
} | |
60% { | |
opacity: 1; | |
-webkit-transform: translate3d(0, 25px, 0); | |
transform: translate3d(0, 25px, 0); | |
} | |
75% { | |
-webkit-transform: translate3d(0, -10px, 0); | |
transform: translate3d(0, -10px, 0); | |
} | |
90% { | |
-webkit-transform: translate3d(0, 5px, 0); | |
transform: translate3d(0, 5px, 0); | |
} | |
to { | |
-webkit-transform: none; | |
transform: none; | |
} | |
} | |
.bounceInDown { | |
-webkit-animation-name: bounceInDown; | |
animation-name: bounceInDown; | |
} | |
@-webkit-keyframes bounceInLeft { | |
from, 60%, 75%, 90%, to { | |
-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); | |
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); | |
} | |
0% { | |
opacity: 0; | |
-webkit-transform: translate3d(-3000px, 0, 0); | |
transform: translate3d(-3000px, 0, 0); | |
} | |
60% { | |
opacity: 1; | |
-webkit-transform: translate3d(25px, 0, 0); | |
transform: translate3d(25px, 0, 0); | |
} | |
75% { | |
-webkit-transform: translate3d(-10px, 0, 0); | |
transform: translate3d(-10px, 0, 0); | |
} | |
90% { | |
-webkit-transform: translate3d(5px, 0, 0); | |
transform: translate3d(5px, 0, 0); | |
} | |
to { | |
-webkit-transform: none; | |
transform: none; | |
} | |
} | |
@keyframes bounceInLeft { | |
from, 60%, 75%, 90%, to { | |
-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); | |
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); | |
} | |
0% { | |
opacity: 0; | |
-webkit-transform: translate3d(-3000px, 0, 0); | |
transform: translate3d(-3000px, 0, 0); | |
} | |
60% { | |
opacity: 1; | |
-webkit-transform: translate3d(25px, 0, 0); | |
transform: translate3d(25px, 0, 0); | |
} | |
75% { | |
-webkit-transform: translate3d(-10px, 0, 0); | |
transform: translate3d(-10px, 0, 0); | |
} | |
90% { | |
-webkit-transform: translate3d(5px, 0, 0); | |
transform: translate3d(5px, 0, 0); | |
} | |
to { | |
-webkit-transform: none; | |
transform: none; | |
} | |
} | |
.bounceInLeft { | |
-webkit-animation-name: bounceInLeft; | |
animation-name: bounceInLeft; | |
} | |
@-webkit-keyframes bounceInRight { | |
from, 60%, 75%, 90%, to { | |
-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); | |
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); | |
} | |
from { | |
opacity: 0; | |
-webkit-transform: translate3d(3000px, 0, 0); | |
transform: translate3d(3000px, 0, 0); | |
} | |
60% { | |
opacity: 1; | |
-webkit-transform: translate3d(-25px, 0, 0); | |
transform: translate3d(-25px, 0, 0); | |
} | |
75% { | |
-webkit-transform: translate3d(10px, 0, 0); | |
transform: translate3d(10px, 0, 0); | |
} | |
90% { | |
-webkit-transform: translate3d(-5px, 0, 0); | |
transform: translate3d(-5px, 0, 0); | |
} | |
to { | |
-webkit-transform: none; | |
transform: none; | |
} | |
} | |
@keyframes bounceInRight { | |
from, 60%, 75%, 90%, to { | |
-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); | |
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); | |
} | |
from { | |
opacity: 0; | |
-webkit-transform: translate3d(3000px, 0, 0); | |
transform: translate3d(3000px, 0, 0); | |
} | |
60% { | |
opacity: 1; | |
-webkit-transform: translate3d(-25px, 0, 0); | |
transform: translate3d(-25px, 0, 0); | |
} | |
75% { | |
-webkit-transform: translate3d(10px, 0, 0); | |
transform: translate3d(10px, 0, 0); | |
} | |
90% { | |
-webkit-transform: translate3d(-5px, 0, 0); | |
transform: translate3d(-5px, 0, 0); | |
} | |
to { | |
-webkit-transform: none; | |
transform: none; | |
} | |
} | |
.bounceInRight { | |
-webkit-animation-name: bounceInRight; | |
animation-name: bounceInRight; | |
} | |
@-webkit-keyframes bounceInUp { | |
from, 60%, 75%, 90%, to { | |
-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); | |
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); | |
} | |
from { | |
opacity: 0; | |
-webkit-transform: translate3d(0, 3000px, 0); | |
transform: translate3d(0, 3000px, 0); | |
} | |
60% { | |
opacity: 1; | |
-webkit-transform: translate3d(0, -20px, 0); | |
transform: translate3d(0, -20px, 0); | |
} | |
75% { | |
-webkit-transform: translate3d(0, 10px, 0); | |
transform: translate3d(0, 10px, 0); | |
} | |
90% { | |
-webkit-transform: translate3d(0, -5px, 0); | |
transform: translate3d(0, -5px, 0); | |
} | |
to { | |
-webkit-transform: translate3d(0, 0, 0); | |
transform: translate3d(0, 0, 0); | |
} | |
} | |
@keyframes bounceInUp { | |
from, 60%, 75%, 90%, to { | |
-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); | |
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); | |
} | |
from { | |
opacity: 0; | |
-webkit-transform: translate3d(0, 3000px, 0); | |
transform: translate3d(0, 3000px, 0); | |
} | |
60% { | |
opacity: 1; | |
-webkit-transform: translate3d(0, -20px, 0); | |
transform: translate3d(0, -20px, 0); | |
} | |
75% { | |
-webkit-transform: translate3d(0, 10px, 0); | |
transform: translate3d(0, 10px, 0); | |
} | |
90% { | |
-webkit-transform: translate3d(0, -5px, 0); | |
transform: translate3d(0, -5px, 0); | |
} | |
to { | |
-webkit-transform: translate3d(0, 0, 0); | |
transform: translate3d(0, 0, 0); | |
} | |
} | |
.bounceInUp { | |
-webkit-animation-name: bounceInUp; | |
animation-name: bounceInUp; | |
} | |
@-webkit-keyframes bounceOut { | |
20% { | |
-webkit-transform: scale3d(.9, .9, .9); | |
transform: scale3d(.9, .9, .9); | |
} | |
50%, 55% { | |
opacity: 1; | |
-webkit-transform: scale3d(1.1, 1.1, 1.1); | |
transform: scale3d(1.1, 1.1, 1.1); | |
} | |
to { | |
opacity: 0; | |
-webkit-transform: scale3d(.3, .3, .3); | |
transform: scale3d(.3, .3, .3); | |
} | |
} | |
@keyframes bounceOut { | |
20% { | |
-webkit-transform: scale3d(.9, .9, .9); | |
transform: scale3d(.9, .9, .9); | |
} | |
50%, 55% { | |
opacity: 1; | |
-webkit-transform: scale3d(1.1, 1.1, 1.1); | |
transform: scale3d(1.1, 1.1, 1.1); | |
} | |
to { | |
opacity: 0; | |
-webkit-transform: scale3d(.3, .3, .3); | |
transform: scale3d(.3, .3, .3); | |
} | |
} | |
.bounceOut { | |
-webkit-animation-name: bounceOut; | |
animation-name: bounceOut; | |
} | |
@-webkit-keyframes bounceOutDown { | |
20% { | |
-webkit-transform: translate3d(0, 10px, 0); | |
transform: translate3d(0, 10px, 0); | |
} | |
40%, 45% { | |
opacity: 1; | |
-webkit-transform: translate3d(0, -20px, 0); | |
transform: translate3d(0, -20px, 0); | |
} | |
to { | |
opacity: 0; | |
-webkit-transform: translate3d(0, 2000px, 0); | |
transform: translate3d(0, 2000px, 0); | |
} | |
} | |
@keyframes bounceOutDown { | |
20% { | |
-webkit-transform: translate3d(0, 10px, 0); | |
transform: translate3d(0, 10px, 0); | |
} | |
40%, 45% { | |
opacity: 1; | |
-webkit-transform: translate3d(0, -20px, 0); | |
transform: translate3d(0, -20px, 0); | |
} | |
to { | |
opacity: 0; | |
-webkit-transform: translate3d(0, 2000px, 0); | |
transform: translate3d(0, 2000px, 0); | |
} | |
} | |
.bounceOutDown { | |
-webkit-animation-name: bounceOutDown; | |
animation-name: bounceOutDown; | |
} | |
@-webkit-keyframes bounceOutLeft { | |
20% { | |
opacity: 1; | |
-webkit-transform: translate3d(20px, 0, 0); | |
transform: translate3d(20px, 0, 0); | |
} | |
to { | |
opacity: 0; | |
-webkit-transform: translate3d(-2000px, 0, 0); | |
transform: translate3d(-2000px, 0, 0); | |
} | |
} | |
@keyframes bounceOutLeft { | |
20% { | |
opacity: 1; | |
-webkit-transform: translate3d(20px, 0, 0); | |
transform: translate3d(20px, 0, 0); | |
} | |
to { | |
opacity: 0; | |
-webkit-transform: translate3d(-2000px, 0, 0); | |
transform: translate3d(-2000px, 0, 0); | |
} | |
} | |
.bounceOutLeft { | |
-webkit-animation-name: bounceOutLeft; | |
animation-name: bounceOutLeft; | |
} | |
@-webkit-keyframes bounceOutRight { | |
20% { | |
opacity: 1; | |
-webkit-transform: translate3d(-20px, 0, 0); | |
transform: translate3d(-20px, 0, 0); | |
} | |
to { | |
opacity: 0; | |
-webkit-transform: translate3d(2000px, 0, 0); | |
transform: translate3d(2000px, 0, 0); | |
} | |
} | |
@keyframes bounceOutRight { | |
20% { | |
opacity: 1; | |
-webkit-transform: translate3d(-20px, 0, 0); | |
transform: translate3d(-20px, 0, 0); | |
} | |
to { | |
opacity: 0; | |
-webkit-transform: translate3d(2000px, 0, 0); | |
transform: translate3d(2000px, 0, 0); | |
} | |
} | |
.bounceOutRight { | |
-webkit-animation-name: bounceOutRight; | |
animation-name: bounceOutRight; | |
} | |
@-webkit-keyframes bounceOutUp { | |
20% { | |
-webkit-transform: translate3d(0, -10px, 0); | |
transform: translate3d(0, -10px, 0); | |
} | |
40%, 45% { | |
opacity: 1; | |
-webkit-transform: translate3d(0, 20px, 0); | |
transform: translate3d(0, 20px, 0); | |
} | |
to { | |
opacity: 0; | |
-webkit-transform: translate3d(0, -2000px, 0); | |
transform: translate3d(0, -2000px, 0); | |
} | |
} | |
@keyframes bounceOutUp { | |
20% { | |
-webkit-transform: translate3d(0, -10px, 0); | |
transform: translate3d(0, -10px, 0); | |
} | |
40%, 45% { | |
opacity: 1; | |
-webkit-transform: translate3d(0, 20px, 0); | |
transform: translate3d(0, 20px, 0); | |
} | |
to { | |
opacity: 0; | |
-webkit-transform: translate3d(0, -2000px, 0); | |
transform: translate3d(0, -2000px, 0); | |
} | |
} | |
.bounceOutUp { | |
-webkit-animation-name: bounceOutUp; | |
animation-name: bounceOutUp; | |
} | |
@-webkit-keyframes fadeIn { | |
from { | |
opacity: 0; | |
} | |
to { | |
opacity: 1; | |
} | |
} | |
@keyframes fadeIn { | |
from { | |
opacity: 0; | |
} | |
to { | |
opacity: 1; | |
} | |
} | |
.fadeIn { | |
-webkit-animation-name: fadeIn; | |
animation-name: fadeIn; | |
} | |
@-webkit-keyframes fadeInDown { | |
from { | |
opacity: 0; | |
-webkit-transform: translate3d(0, -100%, 0); | |
transform: translate3d(0, -100%, 0); | |
} | |
to { | |
opacity: 1; | |
-webkit-transform: none; | |
transform: none; | |
} | |
} | |
@keyframes fadeInDown { | |
from { | |
opacity: 0; | |
-webkit-transform: translate3d(0, -100%, 0); | |
transform: translate3d(0, -100%, 0); | |
} | |
to { | |
opacity: 1; | |
-webkit-transform: none; | |
transform: none; | |
} | |
} | |
.fadeInDown { | |
-webkit-animation-name: fadeInDown; | |
animation-name: fadeInDown; | |
} | |
@-webkit-keyframes fadeInDownBig { | |
from { | |
opacity: 0; | |
-webkit-transform: translate3d(0, -2000px, 0); | |
transform: translate3d(0, -2000px, 0); | |
} | |
to { | |
opacity: 1; | |
-webkit-transform: none; | |
transform: none; | |
} | |
} | |
@keyframes fadeInDownBig { | |
from { | |
opacity: 0; | |
-webkit-transform: translate3d(0, -2000px, 0); | |
transform: translate3d(0, -2000px, 0); | |
} | |
to { | |
opacity: 1; | |
-webkit-transform: none; | |
transform: none; | |
} | |
} | |
.fadeInDownBig { | |
-webkit-animation-name: fadeInDownBig; | |
animation-name: fadeInDownBig; | |
} | |
@-webkit-keyframes fadeInLeft { | |
from { | |
opacity: 0; | |
-webkit-transform: translate3d(-100%, 0, 0); | |
transform: translate3d(-100%, 0, 0); | |
} | |
to { | |
opacity: 1; | |
-webkit-transform: none; | |
transform: none; | |
} | |
} | |
@keyframes fadeInLeft { | |
from { | |
opacity: 0; | |
-webkit-transform: translate3d(-100%, 0, 0); | |
transform: translate3d(-100%, 0, 0); | |
} | |
to { | |
opacity: 1; | |
-webkit-transform: none; | |
transform: none; | |
} | |
} | |
.fadeInLeft { | |
-webkit-animation-name: fadeInLeft; | |
animation-name: fadeInLeft; | |
} | |
@-webkit-keyframes fadeInLeftBig { | |
from { | |
opacity: 0; | |
-webkit-transform: translate3d(-2000px, 0, 0); | |
transform: translate3d(-2000px, 0, 0); | |
} | |
to { | |
opacity: 1; | |
-webkit-transform: none; | |
transform: none; | |
} | |
} | |
@keyframes fadeInLeftBig { | |
from { | |
opacity: 0; | |
-webkit-transform: translate3d(-2000px, 0, 0); | |
transform: translate3d(-2000px, 0, 0); | |
} | |
to { | |
opacity: 1; | |
-webkit-transform: none; | |
transform: none; | |
} | |
} | |
.fadeInLeftBig { | |
-webkit-animation-name: fadeInLeftBig; | |
animation-name: fadeInLeftBig; | |
} | |
@-webkit-keyframes fadeInRight { | |
from { | |
opacity: 0; | |
-webkit-transform: translate3d(100%, 0, 0); | |
transform: translate3d(100%, 0, 0); | |
} | |
to { | |
opacity: 1; | |
-webkit-transform: none; | |
transform: none; | |
} | |
} | |
@keyframes fadeInRight { | |
from { | |
opacity: 0; | |
-webkit-transform: translate3d(100%, 0, 0); | |
transform: translate3d(100%, 0, 0); | |
} | |
to { | |
opacity: 1; | |
-webkit-transform: none; | |
transform: none; | |
} | |
} | |
.fadeInRight { | |
-webkit-animation-name: fadeInRight; | |
animation-name: fadeInRight; | |
} | |
@-webkit-keyframes fadeInRightBig { | |
from { | |
opacity: 0; | |
-webkit-transform: translate3d(2000px, 0, 0); | |
transform: translate3d(2000px, 0, 0); | |
} | |
to { | |
opacity: 1; | |
-webkit-transform: none; | |
transform: none; | |
} | |
} | |
@keyframes fadeInRightBig { | |
from { | |
opacity: 0; | |
-webkit-transform: translate3d(2000px, 0, 0); | |
transform: translate3d(2000px, 0, 0); | |
} | |
to { | |
opacity: 1; | |
-webkit-transform: none; | |
transform: none; | |
} | |
} | |
.fadeInRightBig { | |
-webkit-animation-name: fadeInRightBig; | |
animation-name: fadeInRightBig; | |
} | |
@-webkit-keyframes fadeInUp { | |
from { | |
opacity: 0; | |
-webkit-transform: translate3d(0, 100%, 0); | |
transform: translate3d(0, 100%, 0); | |
} | |
to { | |
opacity: 1; | |
-webkit-transform: none; | |
transform: none; | |
} | |
} | |
@keyframes fadeInUp { | |
from { | |
opacity: 0; | |
-webkit-transform: translate3d(0, 100%, 0); | |
transform: translate3d(0, 100%, 0); | |
} | |
to { | |
opacity: 1; | |
-webkit-transform: none; | |
transform: none; | |
} | |
} | |
.fadeInUp { | |
-webkit-animation-name: fadeInUp; | |
animation-name: fadeInUp; | |
} | |
@-webkit-keyframes fadeInUpBig { | |
from { | |
opacity: 0; | |
-webkit-transform: translate3d(0, 2000px, 0); | |
transform: translate3d(0, 2000px, 0); | |
} | |
to { | |
opacity: 1; | |
-webkit-transform: none; | |
transform: none; | |
} | |
} | |
@keyframes fadeInUpBig { | |
from { | |
opacity: 0; | |
-webkit-transform: translate3d(0, 2000px, 0); | |
transform: translate3d(0, 2000px, 0); | |
} | |
to { | |
opacity: 1; | |
-webkit-transform: none; | |
transform: none; | |
} | |
} | |
.fadeInUpBig { | |
-webkit-animation-name: fadeInUpBig; | |
animation-name: fadeInUpBig; | |
} | |
@-webkit-keyframes fadeOut { | |
from { | |
opacity: 1; | |
} | |
to { | |
opacity: 0; | |
} | |
} | |
@keyframes fadeOut { | |
from { | |
opacity: 1; | |
} | |
to { | |
opacity: 0; | |
} | |
} | |
.fadeOut { | |
-webkit-animation-name: fadeOut; | |
animation-name: fadeOut; | |
} | |
@-webkit-keyframes fadeOutDown { | |
from { | |
opacity: 1; | |
} | |
to { | |
opacity: 0; | |
-webkit-transform: translate3d(0, 100%, 0); | |
transform: translate3d(0, 100%, 0); | |
} | |
} | |
@keyframes fadeOutDown { | |
from { | |
opacity: 1; | |
} | |
to { | |
opacity: 0; | |
-webkit-transform: translate3d(0, 100%, 0); | |
transform: translate3d(0, 100%, 0); | |
} | |
} | |
.fadeOutDown { | |
-webkit-animation-name: fadeOutDown; | |
animation-name: fadeOutDown; | |
} | |
@-webkit-keyframes fadeOutDownBig { | |
from { | |
opacity: 1; | |
} | |
to { | |
opacity: 0; | |
-webkit-transform: translate3d(0, 2000px, 0); | |
transform: translate3d(0, 2000px, 0); | |
} | |
} | |
@keyframes fadeOutDownBig { | |
from { | |
opacity: 1; | |
} | |
to { | |
opacity: 0; | |
-webkit-transform: translate3d(0, 2000px, 0); | |
transform: translate3d(0, 2000px, 0); | |
} | |
} | |
.fadeOutDownBig { | |
-webkit-animation-name: fadeOutDownBig; | |
animation-name: fadeOutDownBig; | |
} | |
@-webkit-keyframes fadeOutLeft { | |
from { | |
opacity: 1; | |
} | |
to { | |
opacity: 0; | |
-webkit-transform: translate3d(-100%, 0, 0); | |
transform: translate3d(-100%, 0, 0); | |
} | |
} | |
@keyframes fadeOutLeft { | |
from { | |
opacity: 1; | |
} | |
to { | |
opacity: 0; | |
-webkit-transform: translate3d(-100%, 0, 0); | |
transform: translate3d(-100%, 0, 0); | |
} | |
} | |
.fadeOutLeft { | |
-webkit-animation-name: fadeOutLeft; | |
animation-name: fadeOutLeft; | |
} | |
@-webkit-keyframes fadeOutLeftBig { | |
from { | |
opacity: 1; | |
} | |
to { | |
opacity: 0; | |
-webkit-transform: translate3d(-2000px, 0, 0); | |
transform: translate3d(-2000px, 0, 0); | |
} | |
} | |
@keyframes fadeOutLeftBig { | |
from { | |
opacity: 1; | |
} | |
to { | |
opacity: 0; | |
-webkit-transform: translate3d(-2000px, 0, 0); | |
transform: translate3d(-2000px, 0, 0); | |
} | |
} | |
.fadeOutLeftBig { | |
-webkit-animation-name: fadeOutLeftBig; | |
animation-name: fadeOutLeftBig; | |
} | |
@-webkit-keyframes fadeOutRight { | |
from { | |
opacity: 1; | |
} | |
to { | |
opacity: 0; | |
-webkit-transform: translate3d(100%, 0, 0); | |
transform: translate3d(100%, 0, 0); | |
} | |
} | |
@keyframes fadeOutRight { | |
from { | |
opacity: 1; | |
} | |
to { | |
opacity: 0; | |
-webkit-transform: translate3d(100%, 0, 0); | |
transform: translate3d(100%, 0, 0); | |
} | |
} | |
.fadeOutRight { | |
-webkit-animation-name: fadeOutRight; | |
animation-name: fadeOutRight; | |
} | |
@-webkit-keyframes fadeOutRightBig { | |
from { | |
opacity: 1; | |
} | |
to { | |
opacity: 0; | |
-webkit-transform: translate3d(2000px, 0, 0); | |
transform: translate3d(2000px, 0, 0); | |
} | |
} | |
@keyframes fadeOutRightBig { | |
from { | |
opacity: 1; | |
} | |
to { | |
opacity: 0; | |
-webkit-transform: translate3d(2000px, 0, 0); | |
transform: translate3d(2000px, 0, 0); | |
} | |
} | |
.fadeOutRightBig { | |
-webkit-animation-name: fadeOutRightBig; | |
animation-name: fadeOutRightBig; | |
} | |
@-webkit-keyframes fadeOutUp { | |
from { | |
opacity: 1; | |
} | |
to { | |
opacity: 0; | |
-webkit-transform: translate3d(0, -100%, 0); | |
transform: translate3d(0, -100%, 0); | |
} | |
} | |
@keyframes fadeOutUp { | |
from { | |
opacity: 1; | |
} | |
to { | |
opacity: 0; | |
-webkit-transform: translate3d(0, -100%, 0); | |
transform: translate3d(0, -100%, 0); | |
} | |
} | |
.fadeOutUp { | |
-webkit-animation-name: fadeOutUp; | |
animation-name: fadeOutUp; | |
} | |
@-webkit-keyframes fadeOutUpBig { | |
from { | |
opacity: 1; | |
} | |
to { | |
opacity: 0; | |
-webkit-transform: translate3d(0, -2000px, 0); | |
transform: translate3d(0, -2000px, 0); | |
} | |
} | |
@keyframes fadeOutUpBig { | |
from { | |
opacity: 1; | |
} | |
to { | |
opacity: 0; | |
-webkit-transform: translate3d(0, -2000px, 0); | |
transform: translate3d(0, -2000px, 0); | |
} | |
} | |
.fadeOutUpBig { | |
-webkit-animation-name: fadeOutUpBig; | |
animation-name: fadeOutUpBig; | |
} | |
@-webkit-keyframes flip { | |
from { | |
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg); | |
transform: perspective(400px) rotate3d(0, 1, 0, -360deg); | |
-webkit-animation-timing-function: ease-out; | |
animation-timing-function: ease-out; | |
} | |
40% { | |
-webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); | |
transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); | |
-webkit-animation-timing-function: ease-out; | |
animation-timing-function: ease-out; | |
} | |
50% { | |
-webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); | |
transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); | |
-webkit-animation-timing-function: ease-in; | |
animation-timing-function: ease-in; | |
} | |
80% { | |
-webkit-transform: perspective(400px) scale3d(.95, .95, .95); | |
transform: perspective(400px) scale3d(.95, .95, .95); | |
-webkit-animation-timing-function: ease-in; | |
animation-timing-function: ease-in; | |
} | |
to { | |
-webkit-transform: perspective(400px); | |
transform: perspective(400px); | |
-webkit-animation-timing-function: ease-in; | |
animation-timing-function: ease-in; | |
} | |
} | |
@keyframes flip { | |
from { | |
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg); | |
transform: perspective(400px) rotate3d(0, 1, 0, -360deg); | |
-webkit-animation-timing-function: ease-out; | |
animation-timing-function: ease-out; | |
} | |
40% { | |
-webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); | |
transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); | |
-webkit-animation-timing-function: ease-out; | |
animation-timing-function: ease-out; | |
} | |
50% { | |
-webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); | |
transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); | |
-webkit-animation-timing-function: ease-in; | |
animation-timing-function: ease-in; | |
} | |
80% { | |
-webkit-transform: perspective(400px) scale3d(.95, .95, .95); | |
transform: perspective(400px) scale3d(.95, .95, .95); | |
-webkit-animation-timing-function: ease-in; | |
animation-timing-function: ease-in; | |
} | |
to { | |
-webkit-transform: perspective(400px); | |
transform: perspective(400px); | |
-webkit-animation-timing-function: ease-in; | |
animation-timing-function: ease-in; | |
} | |
} | |
.animated.flip { | |
-webkit-backface-visibility: visible; | |
backface-visibility: visible; | |
-webkit-animation-name: flip; | |
animation-name: flip; | |
} | |
@-webkit-keyframes flipInX { | |
from { | |
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); | |
transform: perspective(400px) rotate3d(1, 0, 0, 90deg); | |
-webkit-animation-timing-function: ease-in; | |
animation-timing-function: ease-in; | |
opacity: 0; | |
} | |
40% { | |
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); | |
transform: perspective(400px) rotate3d(1, 0, 0, -20deg); | |
-webkit-animation-timing-function: ease-in; | |
animation-timing-function: ease-in; | |
} | |
60% { | |
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); | |
transform: perspective(400px) rotate3d(1, 0, 0, 10deg); | |
opacity: 1; | |
} | |
80% { | |
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); | |
transform: perspective(400px) rotate3d(1, 0, 0, -5deg); | |
} | |
to { | |
-webkit-transform: perspective(400px); | |
transform: perspective(400px); | |
} | |
} | |
@keyframes flipInX { | |
from { | |
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); | |
transform: perspective(400px) rotate3d(1, 0, 0, 90deg); | |
-webkit-animation-timing-function: ease-in; | |
animation-timing-function: ease-in; | |
opacity: 0; | |
} | |
40% { | |
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); | |
transform: perspective(400px) rotate3d(1, 0, 0, -20deg); | |
-webkit-animation-timing-function: ease-in; | |
animation-timing-function: ease-in; | |
} | |
60% { | |
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); | |
transform: perspective(400px) rotate3d(1, 0, 0, 10deg); | |
opacity: 1; | |
} | |
80% { | |
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); | |
transform: perspective(400px) rotate3d(1, 0, 0, -5deg); | |
} | |
to { | |
-webkit-transform: perspective(400px); | |
transform: perspective(400px); | |
} | |
} | |
.flipInX { | |
-webkit-backface-visibility: visible !important; | |
backface-visibility: visible !important; | |
-webkit-animation-name: flipInX; | |
animation-name: flipInX; | |
} | |
@-webkit-keyframes flipInY { | |
from { | |
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); | |
transform: perspective(400px) rotate3d(0, 1, 0, 90deg); | |
-webkit-animation-timing-function: ease-in; | |
animation-timing-function: ease-in; | |
opacity: 0; | |
} | |
40% { | |
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); | |
transform: perspective(400px) rotate3d(0, 1, 0, -20deg); | |
-webkit-animation-timing-function: ease-in; | |
animation-timing-function: ease-in; | |
} | |
60% { | |
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg); | |
transform: perspective(400px) rotate3d(0, 1, 0, 10deg); | |
opacity: 1; | |
} | |
80% { | |
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg); | |
transform: perspective(400px) rotate3d(0, 1, 0, -5deg); | |
} | |
to { | |
-webkit-transform: perspective(400px); | |
transform: perspective(400px); | |
} | |
} | |
@keyframes flipInY { | |
from { | |
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); | |
transform: perspective(400px) rotate3d(0, 1, 0, 90deg); | |
-webkit-animation-timing-function: ease-in; | |
animation-timing-function: ease-in; | |
opacity: 0; | |
} | |
40% { | |
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); | |
transform: perspective(400px) rotate3d(0, 1, 0, -20deg); | |
-webkit-animation-timing-function: ease-in; | |
animation-timing-function: ease-in; | |
} | |
60% { | |
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg); | |
transform: perspective(400px) rotate3d(0, 1, 0, 10deg); | |
opacity: 1; | |
} | |
80% { | |
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg); | |
transform: perspective(400px) rotate3d(0, 1, 0, -5deg); | |
} | |
to { | |
-webkit-transform: perspective(400px); | |
transform: perspective(400px); | |
} | |
} | |
.flipInY { | |
-webkit-backface-visibility: visible !important; | |
backface-visibility: visible !important; | |
-webkit-animation-name: flipInY; | |
animation-name: flipInY; | |
} | |
@-webkit-keyframes flipOutX { | |
from { | |
-webkit-transform: perspective(400px); | |
transform: perspective(400px); | |
} | |
30% { | |
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); | |
transform: perspective(400px) rotate3d(1, 0, 0, -20deg); | |
opacity: 1; | |
} | |
to { | |
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); | |
transform: perspective(400px) rotate3d(1, 0, 0, 90deg); | |
opacity: 0; | |
} | |
} | |
@keyframes flipOutX { | |
from { | |
-webkit-transform: perspective(400px); | |
transform: perspective(400px); | |
} | |
30% { | |
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); | |
transform: perspective(400px) rotate3d(1, 0, 0, -20deg); | |
opacity: 1; | |
} | |
to { | |
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); | |
transform: perspective(400px) rotate3d(1, 0, 0, 90deg); | |
opacity: 0; | |
} | |
} | |
.flipOutX { | |
-webkit-animation-name: flipOutX; | |
animation-name: flipOutX; | |
-webkit-backface-visibility: visible !important; | |
backface-visibility: visible !important; | |
} | |
@-webkit-keyframes flipOutY { | |
from { | |
-webkit-transform: perspective(400px); | |
transform: perspective(400px); | |
} | |
30% { | |
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg); | |
transform: perspective(400px) rotate3d(0, 1, 0, -15deg); | |
opacity: 1; | |
} | |
to { | |
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); | |
transform: perspective(400px) rotate3d(0, 1, 0, 90deg); | |
opacity: 0; | |
} | |
} | |
@keyframes flipOutY { | |
from { | |
-webkit-transform: perspective(400px); | |
transform: perspective(400px); | |
} | |
30% { | |
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg); | |
transform: perspective(400px) rotate3d(0, 1, 0, -15deg); | |
opacity: 1; | |
} | |
to { | |
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); | |
transform: perspective(400px) rotate3d(0, 1, 0, 90deg); | |
opacity: 0; | |
} | |
} | |
.flipOutY { | |
-webkit-backface-visibility: visible !important; | |
backface-visibility: visible !important; | |
-webkit-animation-name: flipOutY; | |
animation-name: flipOutY; | |
} | |
@-webkit-keyframes lightSpeedIn { | |
from { | |
-webkit-transform: translate3d(100%, 0, 0) skewX(-30deg); | |
transform: translate3d(100%, 0, 0) skewX(-30deg); | |
opacity: 0; | |
} | |
60% { | |
-webkit-transform: skewX(20deg); | |
transform: skewX(20deg); | |
opacity: 1; | |
} | |
80% { | |
-webkit-transform: skewX(-5deg); | |
transform: skewX(-5deg); | |
opacity: 1; | |
} | |
to { | |
-webkit-transform: none; | |
transform: none; | |
opacity: 1; | |
} | |
} | |
@keyframes lightSpeedIn { | |
from { | |
-webkit-transform: translate3d(100%, 0, 0) skewX(-30deg); | |
transform: translate3d(100%, 0, 0) skewX(-30deg); | |
opacity: 0; | |
} | |
60% { | |
-webkit-transform: skewX(20deg); | |
transform: skewX(20deg); | |
opacity: 1; | |
} | |
80% { | |
-webkit-transform: skewX(-5deg); | |
transform: skewX(-5deg); | |
opacity: 1; | |
} | |
to { | |
-webkit-transform: none; | |
transform: none; | |
opacity: 1; | |
} | |
} | |
.lightSpeedIn { | |
-webkit-animation-name: lightSpeedIn; | |
animation-name: lightSpeedIn; | |
-webkit-animation-timing-function: ease-out; | |
animation-timing-function: ease-out; | |
} | |
@-webkit-keyframes lightSpeedOut { | |
from { | |
opacity: 1; | |
} | |
to { | |
-webkit-transform: translate3d(100%, 0, 0) skewX(30deg); | |
transform: translate3d(100%, 0, 0) skewX(30deg); | |
opacity: 0; | |
} | |
} | |
@keyframes lightSpeedOut { | |
from { | |
opacity: 1; | |
} | |
to { | |
-webkit-transform: translate3d(100%, 0, 0) skewX(30deg); | |
transform: translate3d(100%, 0, 0) skewX(30deg); | |
opacity: 0; | |
} | |
} | |
.lightSpeedOut { | |
-webkit-animation-name: lightSpeedOut; | |
animation-name: lightSpeedOut; | |
-webkit-animation-timing-function: ease-in; | |
animation-timing-function: ease-in; | |
} | |
@-webkit-keyframes rotateIn { | |
from { | |
-webkit-transform-origin: center; | |
transform-origin: center; | |
-webkit-transform: rotate3d(0, 0, 1, -200deg); | |
transform: rotate3d(0, 0, 1, -200deg); | |
opacity: 0; | |
} | |
to { | |
-webkit-transform-origin: center; | |
transform-origin: center; | |
-webkit-transform: none; | |
transform: none; | |
opacity: 1; | |
} | |
} | |
@keyframes rotateIn { | |
from { | |
-webkit-transform-origin: center; | |
transform-origin: center; | |
-webkit-transform: rotate3d(0, 0, 1, -200deg); | |
transform: rotate3d(0, 0, 1, -200deg); | |
opacity: 0; | |
} | |
to { | |
-webkit-transform-origin: center; | |
transform-origin: center; | |
-webkit-transform: none; | |
transform: none; | |
opacity: 1; | |
} | |
} | |
.rotateIn { | |
-webkit-animation-name: rotateIn; | |
animation-name: rotateIn; | |
} | |
@-webkit-keyframes rotateInDownLeft { | |
from { | |
-webkit-transform-origin: left bottom; | |
transform-origin: left bottom; | |
-webkit-transform: rotate3d(0, 0, 1, -45deg); | |
transform: rotate3d(0, 0, 1, -45deg); | |
opacity: 0; | |
} | |
to { | |
-webkit-transform-origin: left bottom; | |
transform-origin: left bottom; | |
-webkit-transform: none; | |
transform: none; | |
opacity: 1; | |
} | |
} | |
@keyframes rotateInDownLeft { | |
from { | |
-webkit-transform-origin: left bottom; | |
transform-origin: left bottom; | |
-webkit-transform: rotate3d(0, 0, 1, -45deg); | |
transform: rotate3d(0, 0, 1, -45deg); | |
opacity: 0; | |
} | |
to { | |
-webkit-transform-origin: left bottom; | |
transform-origin: left bottom; | |
-webkit-transform: none; | |
transform: none; | |
opacity: 1; | |
} | |
} | |
.rotateInDownLeft { | |
-webkit-animation-name: rotateInDownLeft; | |
animation-name: rotateInDownLeft; | |
} | |
@-webkit-keyframes rotateInDownRight { | |
from { | |
-webkit-transform-origin: right bottom; | |
transform-origin: right bottom; | |
-webkit-transform: rotate3d(0, 0, 1, 45deg); | |
transform: rotate3d(0, 0, 1, 45deg); | |
opacity: 0; | |
} | |
to { | |
-webkit-transform-origin: right bottom; | |
transform-origin: right bottom; | |
-webkit-transform: none; | |
transform: none; | |
opacity: 1; | |
} | |
} | |
@keyframes rotateInDownRight { | |
from { | |
-webkit-transform-origin: right bottom; | |
transform-origin: right bottom; | |
-webkit-transform: rotate3d(0, 0, 1, 45deg); | |
transform: rotate3d(0, 0, 1, 45deg); | |
opacity: 0; | |
} | |
to { | |
-webkit-transform-origin: right bottom; | |
transform-origin: right bottom; | |
-webkit-transform: none; | |
transform: none; | |
opacity: 1; | |
} | |
} | |
.rotateInDownRight { | |
-webkit-animation-name: rotateInDownRight; | |
animation-name: rotateInDownRight; | |
} | |
@-webkit-keyframes rotateInUpLeft { | |
from { | |
-webkit-transform-origin: left bottom; | |
transform-origin: left bottom; | |
-webkit-transform: rotate3d(0, 0, 1, 45deg); | |
transform: rotate3d(0, 0, 1, 45deg); | |
opacity: 0; | |
} | |
to { | |
-webkit-transform-origin: left bottom; | |
transform-origin: left bottom; | |
-webkit-transform: none; | |
transform: none; | |
opacity: 1; | |
} | |
} | |
@keyframes rotateInUpLeft { | |
from { | |
-webkit-transform-origin: left bottom; | |
transform-origin: left bottom; | |
-webkit-transform: rotate3d(0, 0, 1, 45deg); | |
transform: rotate3d(0, 0, 1, 45deg); | |
opacity: 0; | |
} | |
to { | |
-webkit-transform-origin: left bottom; | |
transform-origin: left bottom; | |
-webkit-transform: none; | |
transform: none; | |
opacity: 1; | |
} | |
} | |
.rotateInUpLeft { | |
-webkit-animation-name: rotateInUpLeft; | |
animation-name: rotateInUpLeft; | |
} | |
@-webkit-keyframes rotateInUpRight { | |
from { | |
-webkit-transform-origin: right bottom; | |
transform-origin: right bottom; | |
-webkit-transform: rotate3d(0, 0, 1, -90deg); | |
transform: rotate3d(0, 0, 1, -90deg); | |
opacity: 0; | |
} | |
to { | |
-webkit-transform-origin: right bottom; | |
transform-origin: right bottom; | |
-webkit-transform: none; | |
transform: none; | |
opacity: 1; | |
} | |
} | |
@keyframes rotateInUpRight { | |
from { | |
-webkit-transform-origin: right bottom; | |
transform-origin: right bottom; | |
-webkit-transform: rotate3d(0, 0, 1, -90deg); | |
transform: rotate3d(0, 0, 1, -90deg); | |
opacity: 0; | |
} | |
to { | |
-webkit-transform-origin: right bottom; | |
transform-origin: right bottom; | |
-webkit-transform: none; | |
transform: none; | |
opacity: 1; | |
} | |
} | |
.rotateInUpRight { | |
-webkit-animation-name: rotateInUpRight; | |
animation-name: rotateInUpRight; | |
} | |
@-webkit-keyframes rotateOut { | |
from { | |
-webkit-transform-origin: center; | |
transform-origin: center; | |
opacity: 1; | |
} | |
to { | |
-webkit-transform-origin: center; | |
transform-origin: center; | |
-webkit-transform: rotate3d(0, 0, 1, 200deg); | |
transform: rotate3d(0, 0, 1, 200deg); | |
opacity: 0; | |
} | |
} | |
@keyframes rotateOut { | |
from { | |
-webkit-transform-origin: center; | |
transform-origin: center; | |
opacity: 1; | |
} | |
to { | |
-webkit-transform-origin: center; | |
transform-origin: center; | |
-webkit-transform: rotate3d(0, 0, 1, 200deg); | |
transform: rotate3d(0, 0, 1, 200deg); | |
opacity: 0; | |
} | |
} | |
.rotateOut { | |
-webkit-animation-name: rotateOut; | |
animation-name: rotateOut; | |
} | |
@-webkit-keyframes rotateOutDownLeft { | |
from { | |
-webkit-transform-origin: left bottom; | |
transform-origin: left bottom; | |
opacity: 1; | |
} | |
to { | |
-webkit-transform-origin: left bottom; | |
transform-origin: left bottom; | |
-webkit-transform: rotate3d(0, 0, 1, 45deg); | |
transform: rotate3d(0, 0, 1, 45deg); | |
opacity: 0; | |
} | |
} | |
@keyframes rotateOutDownLeft { | |
from { | |
-webkit-transform-origin: left bottom; | |
transform-origin: left bottom; | |
opacity: 1; | |
} | |
to { | |
-webkit-transform-origin: left bottom; | |
transform-origin: left bottom; | |
-webkit-transform: rotate3d(0, 0, 1, 45deg); | |
transform: rotate3d(0, 0, 1, 45deg); | |
opacity: 0; | |
} | |
} | |
.rotateOutDownLeft { | |
-webkit-animation-name: rotateOutDownLeft; | |
animation-name: rotateOutDownLeft; | |
} | |
@-webkit-keyframes rotateOutDownRight { | |
from { | |
-webkit-transform-origin: right bottom; | |
transform-origin: right bottom; | |
opacity: 1; | |
} | |
to { | |
-webkit-transform-origin: right bottom; | |
transform-origin: right bottom; | |
-webkit-transform: rotate3d(0, 0, 1, -45deg); | |
transform: rotate3d(0, 0, 1, -45deg); | |
opacity: 0; | |
} | |
} | |
@keyframes rotateOutDownRight { | |
from { | |
-webkit-transform-origin: right bottom; | |
transform-origin: right bottom; | |
opacity: 1; | |
} | |
to { | |
-webkit-transform-origin: right bottom; | |
transform-origin: right bottom; | |
-webkit-transform: rotate3d(0, 0, 1, -45deg); | |
transform: rotate3d(0, 0, 1, -45deg); | |
opacity: 0; | |
} | |
} | |
.rotateOutDownRight { | |
-webkit-animation-name: rotateOutDownRight; | |
animation-name: rotateOutDownRight; | |
} | |
@-webkit-keyframes rotateOutUpLeft { | |
from { | |
-webkit-transform-origin: left bottom; | |
transform-origin: left bottom; | |
opacity: 1; | |
} | |
to { | |
-webkit-transform-origin: left bottom; | |
transform-origin: left bottom; | |
-webkit-transform: rotate3d(0, 0, 1, -45deg); | |
transform: rotate3d(0, 0, 1, -45deg); | |
opacity: 0; | |
} | |
} | |
@keyframes rotateOutUpLeft { | |
from { | |
-webkit-transform-origin: left bottom; | |
transform-origin: left bottom; | |
opacity: 1; | |
} | |
to { | |
-webkit-transform-origin: left bottom; | |
transform-origin: left bottom; | |
-webkit-transform: rotate3d(0, 0, 1, -45deg); | |
transform: rotate3d(0, 0, 1, -45deg); | |
opacity: 0; | |
} | |
} | |
.rotateOutUpLeft { | |
-webkit-animation-name: rotateOutUpLeft; | |
animation-name: rotateOutUpLeft; | |
} | |
@-webkit-keyframes rotateOutUpRight { | |
from { | |
-webkit-transform-origin: right bottom; | |
transform-origin: right bottom; | |
opacity: 1; | |
} | |
to { | |
-webkit-transform-origin: right bottom; | |
transform-origin: right bottom; | |
-webkit-transform: rotate3d(0, 0, 1, 90deg); | |
transform: rotate3d(0, 0, 1, 90deg); | |
opacity: 0; | |
} | |
} | |
@keyframes rotateOutUpRight { | |
from { | |
-webkit-transform-origin: right bottom; | |
transform-origin: right bottom; | |
opacity: 1; | |
} | |
to { | |
-webkit-transform-origin: right bottom; | |
transform-origin: right bottom; | |
-webkit-transform: rotate3d(0, 0, 1, 90deg); | |
transform: rotate3d(0, 0, 1, 90deg); | |
opacity: 0; | |
} | |
} | |
.rotateOutUpRight { | |
-webkit-animation-name: rotateOutUpRight; | |
animation-name: rotateOutUpRight; | |
} | |
@-webkit-keyframes hinge { | |
0% { | |
-webkit-transform-origin: top left; | |
transform-origin: top left; | |
-webkit-animation-timing-function: ease-in-out; | |
animation-timing-function: ease-in-out; | |
} | |
20%, 60% { | |
-webkit-transform: rotate3d(0, 0, 1, 80deg); | |
transform: rotate3d(0, 0, 1, 80deg); | |
-webkit-transform-origin: top left; | |
transform-origin: top left; | |
-webkit-animation-timing-function: ease-in-out; | |
animation-timing-function: ease-in-out; | |
} | |
40%, 80% { | |
-webkit-transform: rotate3d(0, 0, 1, 60deg); | |
transform: rotate3d(0, 0, 1, 60deg); | |
-webkit-transform-origin: top left; | |
transform-origin: top left; | |
-webkit-animation-timing-function: ease-in-out; | |
animation-timing-function: ease-in-out; | |
opacity: 1; | |
} | |
to { | |
-webkit-transform: translate3d(0, 700px, 0); | |
transform: translate3d(0, 700px, 0); | |
opacity: 0; | |
} | |
} | |
@keyframes hinge { | |
0% { | |
-webkit-transform-origin: top left; | |
transform-origin: top left; | |
-webkit-animation-timing-function: ease-in-out; | |
animation-timing-function: ease-in-out; | |
} | |
20%, 60% { | |
-webkit-transform: rotate3d(0, 0, 1, 80deg); | |
transform: rotate3d(0, 0, 1, 80deg); | |
-webkit-transform-origin: top left; | |
transform-origin: top left; | |
-webkit-animation-timing-function: ease-in-out; | |
animation-timing-function: ease-in-out; | |
} | |
40%, 80% { | |
-webkit-transform: rotate3d(0, 0, 1, 60deg); | |
transform: rotate3d(0, 0, 1, 60deg); | |
-webkit-transform-origin: top left; | |
transform-origin: top left; | |
-webkit-animation-timing-function: ease-in-out; | |
animation-timing-function: ease-in-out; | |
opacity: 1; | |
} | |
to { | |
-webkit-transform: translate3d(0, 700px, 0); | |
transform: translate3d(0, 700px, 0); | |
opacity: 0; | |
} | |
} | |
.hinge { | |
-webkit-animation-name: hinge; | |
animation-name: hinge; | |
} | |
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ | |
@-webkit-keyframes rollIn { | |
from { | |
opacity: 0; | |
-webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); | |
transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); | |
} | |
to { | |
opacity: 1; | |
-webkit-transform: none; | |
transform: none; | |
} | |
} | |
@keyframes rollIn { | |
from { | |
opacity: 0; | |
-webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); | |
transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); | |
} | |
to { | |
opacity: 1; | |
-webkit-transform: none; | |
transform: none; | |
} | |
} | |
.rollIn { | |
-webkit-animation-name: rollIn; | |
animation-name: rollIn; | |
} | |
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ | |
@-webkit-keyframes rollOut { | |
from { | |
opacity: 1; | |
} | |
to { | |
opacity: 0; | |
-webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); | |
transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); | |
} | |
} | |
@keyframes rollOut { | |
from { | |
opacity: 1; | |
} | |
to { | |
opacity: 0; | |
-webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); | |
transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); | |
} | |
} | |
.rollOut { | |
-webkit-animation-name: rollOut; | |
animation-name: rollOut; | |
} | |
@-webkit-keyframes zoomIn { | |
from { | |
opacity: 0; | |
-webkit-transform: scale3d(.3, .3, .3); | |
transform: scale3d(.3, .3, .3); | |
} | |
50% { | |
opacity: 1; | |
} | |
} | |
@keyframes zoomIn { | |
from { | |
opacity: 0; | |
-webkit-transform: scale3d(.3, .3, .3); | |
transform: scale3d(.3, .3, .3); | |
} | |
50% { | |
opacity: 1; | |
} | |
} | |
.zoomIn { | |
-webkit-animation-name: zoomIn; | |
animation-name: zoomIn; | |
} | |
@-webkit-keyframes zoomInDown { | |
from { | |
opacity: 0; | |
-webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); | |
transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); | |
-webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); | |
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); | |
} | |
60% { | |
opacity: 1; | |
-webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); | |
transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); | |
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); | |
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); | |
} | |
} | |
@keyframes zoomInDown { | |
from { | |
opacity: 0; | |
-webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); | |
transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); | |
-webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); | |
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); | |
} | |
60% { | |
opacity: 1; | |
-webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); | |
transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); | |
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); | |
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); | |
} | |
} | |
.zoomInDown { | |
-webkit-animation-name: zoomInDown; | |
animation-name: zoomInDown; | |
} | |
@-webkit-keyframes zoomInLeft { | |
from { | |
opacity: 0; | |
-webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); | |
transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); | |
-webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); | |
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); | |
} | |
60% { | |
opacity: 1; | |
-webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); | |
transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); | |
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); | |
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); | |
} | |
} | |
@keyframes zoomInLeft { | |
from { | |
opacity: 0; | |
-webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); | |
transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); | |
-webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); | |
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); | |
} | |
60% { | |
opacity: 1; | |
-webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); | |
transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); | |
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); | |
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); | |
} | |
} | |
.zoomInLeft { | |
-webkit-animation-name: zoomInLeft; | |
animation-name: zoomInLeft; | |
} | |
@-webkit-keyframes zoomInRight { | |
from { | |
opacity: 0; | |
-webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); | |
transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); | |
-webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); | |
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); | |
} | |
60% { | |
opacity: 1; | |
-webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); | |
transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); | |
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); | |
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); | |
} | |
} | |
@keyframes zoomInRight { | |
from { | |
opacity: 0; | |
-webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); | |
transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); | |
-webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); | |
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); | |
} | |
60% { | |
opacity: 1; | |
-webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); | |
transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); | |
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); | |
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); | |
} | |
} | |
.zoomInRight { | |
-webkit-animation-name: zoomInRight; | |
animation-name: zoomInRight; | |
} | |
@-webkit-keyframes zoomInUp { | |
from { | |
opacity: 0; | |
-webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); | |
transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); | |
-webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); | |
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); | |
} | |
60% { | |
opacity: 1; | |
-webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); | |
transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); | |
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); | |
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); | |
} | |
} | |
@keyframes zoomInUp { | |
from { | |
opacity: 0; | |
-webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); | |
transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); | |
-webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); | |
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); | |
} | |
60% { | |
opacity: 1; | |
-webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); | |
transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); | |
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); | |
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); | |
} | |
} | |
.zoomInUp { | |
-webkit-animation-name: zoomInUp; | |
animation-name: zoomInUp; | |
} | |
@-webkit-keyframes zoomOut { | |
from { | |
opacity: 1; | |
} | |
50% { | |
opacity: 0; | |
-webkit-transform: scale3d(.3, .3, .3); | |
transform: scale3d(.3, .3, .3); | |
} | |
to { | |
opacity: 0; | |
} | |
} | |
@keyframes zoomOut { | |
from { | |
opacity: 1; | |
} | |
50% { | |
opacity: 0; | |
-webkit-transform: scale3d(.3, .3, .3); | |
transform: scale3d(.3, .3, .3); | |
} | |
to { | |
opacity: 0; | |
} | |
} | |
.zoomOut { | |
-webkit-animation-name: zoomOut; | |
animation-name: zoomOut; | |
} | |
@-webkit-keyframes zoomOutDown { | |
40% { | |
opacity: 1; | |
-webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); | |
transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); | |
-webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); | |
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); | |
} | |
to { | |
opacity: 0; | |
-webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); | |
transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); | |
-webkit-transform-origin: center bottom; | |
transform-origin: center bottom; | |
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); | |
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); | |
} | |
} | |
@keyframes zoomOutDown { | |
40% { | |
opacity: 1; | |
-webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); | |
transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); | |
-webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); | |
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); | |
} | |
to { | |
opacity: 0; | |
-webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); | |
transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); | |
-webkit-transform-origin: center bottom; | |
transform-origin: center bottom; | |
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); | |
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); | |
} | |
} | |
.zoomOutDown { | |
-webkit-animation-name: zoomOutDown; | |
animation-name: zoomOutDown; | |
} | |
@-webkit-keyframes zoomOutLeft { | |
40% { | |
opacity: 1; | |
-webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); | |
transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); | |
} | |
to { | |
opacity: 0; | |
-webkit-transform: scale(.1) translate3d(-2000px, 0, 0); | |
transform: scale(.1) translate3d(-2000px, 0, 0); | |
-webkit-transform-origin: left center; | |
transform-origin: left center; | |
} | |
} | |
@keyframes zoomOutLeft { | |
40% { | |
opacity: 1; | |
-webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); | |
transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); | |
} | |
to { | |
opacity: 0; | |
-webkit-transform: scale(.1) translate3d(-2000px, 0, 0); | |
transform: scale(.1) translate3d(-2000px, 0, 0); | |
-webkit-transform-origin: left center; | |
transform-origin: left center; | |
} | |
} | |
.zoomOutLeft { | |
-webkit-animation-name: zoomOutLeft; | |
animation-name: zoomOutLeft; | |
} | |
@-webkit-keyframes zoomOutRight { | |
40% { | |
opacity: 1; | |
-webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); | |
transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); | |
} | |
to { | |
opacity: 0; | |
-webkit-transform: scale(.1) translate3d(2000px, 0, 0); | |
transform: scale(.1) translate3d(2000px, 0, 0); | |
-webkit-transform-origin: right center; | |
transform-origin: right center; | |
} | |
} | |
@keyframes zoomOutRight { | |
40% { | |
opacity: 1; | |
-webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); | |
transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); | |
} | |
to { | |
opacity: 0; | |
-webkit-transform: scale(.1) translate3d(2000px, 0, 0); | |
transform: scale(.1) translate3d(2000px, 0, 0); | |
-webkit-transform-origin: right center; | |
transform-origin: right center; | |
} | |
} | |
.zoomOutRight { | |
-webkit-animation-name: zoomOutRight; | |
animation-name: zoomOutRight; | |
} | |
@-webkit-keyframes zoomOutUp { | |
40% { | |
opacity: 1; | |
-webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); | |
transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); | |
-webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); | |
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); | |
} | |
to { | |
opacity: 0; | |
-webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); | |
transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); | |
-webkit-transform-origin: center bottom; | |
transform-origin: center bottom; | |
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); | |
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); | |
} | |
} | |
@keyframes zoomOutUp { | |
40% { | |
opacity: 1; | |
-webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); | |
transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); | |
-webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); | |
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); | |
} | |
to { | |
opacity: 0; | |
-webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); | |
transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); | |
-webkit-transform-origin: center bottom; | |
transform-origin: center bottom; | |
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); | |
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); | |
} | |
} | |
.zoomOutUp { | |
-webkit-animation-name: zoomOutUp; | |
animation-name: zoomOutUp; | |
} | |
@-webkit-keyframes slideInDown { | |
from { | |
-webkit-transform: translate3d(0, -100%, 0); | |
transform: translate3d(0, -100%, 0); | |
visibility: visible; | |
} | |
to { | |
-webkit-transform: translate3d(0, 0, 0); | |
transform: translate3d(0, 0, 0); | |
} | |
} | |
@keyframes slideInDown { | |
from { | |
-webkit-transform: translate3d(0, -100%, 0); | |
transform: translate3d(0, -100%, 0); | |
visibility: visible; | |
} | |
to { | |
-webkit-transform: translate3d(0, 0, 0); | |
transform: translate3d(0, 0, 0); | |
} | |
} | |
.slideInDown { | |
-webkit-animation-name: slideInDown; | |
animation-name: slideInDown; | |
} | |
@-webkit-keyframes slideInLeft { | |
from { | |
-webkit-transform: translate3d(-100%, 0, 0); | |
transform: translate3d(-100%, 0, 0); | |
visibility: visible; | |
} | |
to { | |
-webkit-transform: translate3d(0, 0, 0); | |
transform: translate3d(0, 0, 0); | |
} | |
} | |
@keyframes slideInLeft { | |
from { | |
-webkit-transform: translate3d(-100%, 0, 0); | |
transform: translate3d(-100%, 0, 0); | |
visibility: visible; | |
} | |
to { | |
-webkit-transform: translate3d(0, 0, 0); | |
transform: translate3d(0, 0, 0); | |
} | |
} | |
.slideInLeft { | |
-webkit-animation-name: slideInLeft; | |
animation-name: slideInLeft; | |
} | |
@-webkit-keyframes slideInRight { | |
from { | |
-webkit-transform: translate3d(100%, 0, 0); | |
transform: translate3d(100%, 0, 0); | |
visibility: visible; | |
} | |
to { | |
-webkit-transform: translate3d(0, 0, 0); | |
transform: translate3d(0, 0, 0); | |
} | |
} | |
@keyframes slideInRight { | |
from { | |
-webkit-transform: translate3d(100%, 0, 0); | |
transform: translate3d(100%, 0, 0); | |
visibility: visible; | |
} | |
to { | |
-webkit-transform: translate3d(0, 0, 0); | |
transform: translate3d(0, 0, 0); | |
} | |
} | |
.slideInRight { | |
-webkit-animation-name: slideInRight; | |
animation-name: slideInRight; | |
} | |
@-webkit-keyframes slideInUp { | |
from { | |
-webkit-transform: translate3d(0, 100%, 0); | |
transform: translate3d(0, 100%, 0); | |
visibility: visible; | |
} | |
to { | |
-webkit-transform: translate3d(0, 0, 0); | |
transform: translate3d(0, 0, 0); | |
} | |
} | |
@keyframes slideInUp { | |
from { | |
-webkit-transform: translate3d(0, 100%, 0); | |
transform: translate3d(0, 100%, 0); | |
visibility: visible; | |
} | |
to { | |
-webkit-transform: translate3d(0, 0, 0); | |
transform: translate3d(0, 0, 0); | |
} | |
} | |
.slideInUp { | |
-webkit-animation-name: slideInUp; | |
animation-name: slideInUp; | |
} | |
@-webkit-keyframes slideOutDown { | |
from { | |
-webkit-transform: translate3d(0, 0, 0); | |
transform: translate3d(0, 0, 0); | |
} | |
to { | |
visibility: hidden; | |
-webkit-transform: translate3d(0, 100%, 0); | |
transform: translate3d(0, 100%, 0); | |
} | |
} | |
@keyframes slideOutDown { | |
from { | |
-webkit-transform: translate3d(0, 0, 0); | |
transform: translate3d(0, 0, 0); | |
} | |
to { | |
visibility: hidden; | |
-webkit-transform: translate3d(0, 100%, 0); | |
transform: translate3d(0, 100%, 0); | |
} | |
} | |
.slideOutDown { | |
-webkit-animation-name: slideOutDown; | |
animation-name: slideOutDown; | |
} | |
@-webkit-keyframes slideOutLeft { | |
from { | |
-webkit-transform: translate3d(0, 0, 0); | |
transform: translate3d(0, 0, 0); | |
} | |
to { | |
visibility: hidden; | |
-webkit-transform: translate3d(-100%, 0, 0); | |
transform: translate3d(-100%, 0, 0); | |
} | |
} | |
@keyframes slideOutLeft { | |
from { | |
-webkit-transform: translate3d(0, 0, 0); | |
transform: translate3d(0, 0, 0); | |
} | |
to { | |
visibility: hidden; | |
-webkit-transform: translate3d(-100%, 0, 0); | |
transform: translate3d(-100%, 0, 0); | |
} | |
} | |
.slideOutLeft { | |
-webkit-animation-name: slideOutLeft; | |
animation-name: slideOutLeft; | |
} | |
@-webkit-keyframes slideOutRight { | |
from { | |
-webkit-transform: translate3d(0, 0, 0); | |
transform: translate3d(0, 0, 0); | |
} | |
to { | |
visibility: hidden; | |
-webkit-transform: translate3d(100%, 0, 0); | |
transform: translate3d(100%, 0, 0); | |
} | |
} | |
@keyframes slideOutRight { | |
from { | |
-webkit-transform: translate3d(0, 0, 0); | |
transform: translate3d(0, 0, 0); | |
} | |
to { | |
visibility: hidden; | |
-webkit-transform: translate3d(100%, 0, 0); | |
transform: translate3d(100%, 0, 0); | |
} | |
} | |
.slideOutRight { | |
-webkit-animation-name: slideOutRight; | |
animation-name: slideOutRight; | |
} | |
@-webkit-keyframes slideOutUp { | |
from { | |
-webkit-transform: translate3d(0, 0, 0); | |
transform: translate3d(0, 0, 0); | |
} | |
to { | |
visibility: hidden; | |
-webkit-transform: translate3d(0, -100%, 0); | |
transform: translate3d(0, -100%, 0); | |
} | |
} | |
@keyframes slideOutUp { | |
from { | |
-webkit-transform: translate3d(0, 0, 0); | |
transform: translate3d(0, 0, 0); | |
} | |
to { | |
visibility: hidden; | |
-webkit-transform: translate3d(0, -100%, 0); | |
transform: translate3d(0, -100%, 0); | |
} | |
} | |
.slideOutUp { | |
-webkit-animation-name: slideOutUp; | |
animation-name: slideOutUp; | |
} | |
</style> | |
</defs> | |
<g> | |
<path class="st0" d="M122.2,293c-1.2,0.2-2.5,0.3-3.8,0.3c-14.8,0-26.8-12-26.8-26.8"/> | |
<path class="st0" d="M144.9,271c-1.5,8.8-7.3,16.1-15.2,19.7"/> | |
<path class="st0" d="M269.2,272c0.8,1.8,1.4,3.8,1.5,5.8c0.3,6.4-3.4,12-8.8,14.5"/> | |
<path class="st0" d="M227.4,145.9c3.5-9,12.3-15.4,22.6-15.4c2.1,0,4.1,0.3,6,0.7"/> | |
<path class="st0" d="M265.9,136.3c5.1,4.5,8.4,11,8.4,18.4c0,3.4-0.7,6.5-1.9,9.5"/> | |
<path class="st0" d="M377.9,257.4c-6.6,4.8-14.8,7.7-23.6,7.7c-13.6,0-25.7-6.8-33-17.2"/> | |
<path class="st0" d="M333.7,141.5c1.1,16.2,9.7,34.9,38,48.5"/> | |
<path class="st0" d="M339.6,76.2c4.3,4.1,7,9.9,7,16.3c0,4.4-1.2,8.4-3.4,11.9l-1.2,2c0,0-7,11.7-8.2,27.1"/> | |
<path class="st0" d="M303.3,84.3C306.6,76,314.7,70,324.2,70c6,0,11.4,2.3,15.4,6.1"/> | |
<path class="st0" d="M107.3,180.1c4.5-13.8,17.5-23.8,32.8-23.8c19,0,34.5,15.4,34.5,34.5c0,3.3-0.5,6.6-1.4,9.6"/> | |
<path class="st0" d="M92.6,254.3c-0.4,4-0.6,7.2-0.8,9.2"/> | |
<path class="st0" d="M107.3,180.1c-4.7,14.7-8,29.6-10.3,42.8c0,0-0.8,4.7-1.2,7.3c-0.8,5.2-1.5,10-2,14.3"/> | |
<path class="st0" d="M101.6,264.5c0.6-10.1,2.1-44,13.6-80.1"/> | |
<path class="st0" d="M110.9,257.9c0.6-10.1,1.3-35.1,12.7-71.3"/> | |
<path class="st0" d="M91.7,266.4c0,0,0-1,0.2-2.9"/> | |
<path class="st0" d="M78.1,219.8c-0.6,3-1.4,7.7-1.9,12.4"/> | |
<path class="st0" d="M155.4,267c0.8-8.2,4-15.6,6.6-21.3"/> | |
<path class="st0" d="M165.5,214.2"/> | |
<path class="st0" d="M144.9,271c0,0,3.7-28.8,20.6-56.8"/> | |
<path class="st0" d="M135.3,267.8c0,0,1.3-21.7,18.1-49.8"/> | |
<path class="st0" d="M125.8,267.9c0,0,3.8-36.2,29-69"/> | |
<path class="st0" d="M145.3,156.6"/> | |
<path class="st0" d="M348,117.1c0,0-21.2,37.6,22.3,59.9"/> | |
<path class="st0" d="M357.4,116.6c0,0-4.2,7.1-5.2,16.8"/> | |
<path class="st0" d="M368.9,164.7c-0.5,0.5-13.6-9.5-15.8-20"/> | |
<path class="st0" d="M288.9,145.4c0,0,1.1-23.4,14.1-60.1"/> | |
<path class="st0" d="M315.4,239.2c0,0-21-24.1-25.6-69.2"/> | |
<path class="st0" d="M289.2,206.7c-1.9-4-3.2-7.6-4.1-12.8"/> | |
<path class="st0" d="M309.6,209.8c11.2,26.5,26.4,40.1,26.4,40.1"/> | |
<path class="st0" d="M310.2,92.2c-12.2,36.4-12.4,61.8-12.4,61.8c0.4,17.9,3.7,33.4,8.1,46.4"/> | |
<path class="st0" d="M338.2,237.8c-10.7-13.2-29.6-41.4-30.7-86.4c0,0,0.1-20,9.4-47.4"/> | |
<path class="st0" d="M216.8,168.1c3.3-4.1,6.3-9.4,8.9-16.3"/> | |
<path class="st0" d="M203.2,189.1c8.4-2.9,16.8-9.7,23.9-21.9"/> | |
<path class="st0" d="M198.7,214.2c-2,5.2-4.6,10.1-7.8,14.6"/> | |
<path class="st0" d="M218.7,191c-3.3,2.6-6.7,4.5-10.1,5.9c-3.7,1.4-6.2,4.7-7,8.6c-0.2,0.8-0.3,1.5-0.5,2.2"/> | |
<path class="st0" d="M202.8,228.4c2.7-4.9,4.5-9.6,6.1-15.2c0.2-0.7,0.4-1.5,0.6-2.3c0,0,0-0.1,0-0.1c0.8-3.8,3.6-6.9,7.1-8.6 | |
l2.1-1.1"/> | |
<path class="st0" d="M243.1,151.8c-6.9,19.1-15.7,32.3-24.4,39.2"/> | |
<path class="st0" d="M258.1,245.9c-5.8-20.1-8.2-48.9,10.8-75.9"/> | |
<path class="st0" d="M269.2,272c0,0-4.6-7.3-8.8-18.8"/> | |
<path class="st0" d="M275.7,267.8c0,0-30.6-51.2,3-97.8"/> | |
<path class="st0" d="M277.8,250.5c-3.8-12.4-13-38.1,4.6-68.7"/> | |
<path class="st0" d="M354.2,104c-0.7,2.4-1.6,4.7-2.7,6.8"/> | |
<path class="st0" d="M366.1,148.1c-2.7-4.2-4.4-9.1-4.8-14.5c-0.1-1.9-0.1-3.9,0.1-5.7"/> | |
<path class="st0" d="M377.6,245.2c-5.7,6.4-14,10.5-23.3,10.5c-4.2,0-8.2-0.8-11.8-2.3"/> | |
<path class="st0" d="M374.1,217.8c0.7,2.1,1.1,4.4,1.1,6.7"/> | |
<path class="st0" d="M375.2,224.5c0,11.5-9.4,20.9-20.9,20.9c-6.5,0-12.3-2.9-16.1-7.6"/> | |
<path class="st0" d="M357.7,216c3.5,1.7,5.9,5.2,5.9,9.4"/> | |
<path class="st0" d="M318.7,97c0.9-4.8,4.1-7.8,8.3-6.8"/> | |
<path class="st0" d="M363.6,225.4c0,5.7-4.7,10.4-10.4,10.4c-3.1,0-7.3-3.3-8.5-4.7l-0.9-1.2c-8.4-12.2-21.2-36.1-25.7-65.1"/> | |
<path class="st0" d="M377.9,269.1c-7,3.8-15.1,5.9-23.7,5.9c-11.9,0-22.7-4.1-31.3-11"/> | |
<path class="st0" d="M341.5,284c-3.3-0.7-6.4-1.7-9.5-2.9"/> | |
<path class="st0" d="M377.2,280.8c-7.1,2.9-14.8,4.5-22.9,4.5c-2.2,0-4.3-0.1-6.4-0.3"/> | |
<path class="st0" d="M356.8,295c-1,0-2.1,0.1-3.1,0.1c-5,0-9.8-0.5-14.5-1.5"/> | |
<path class="st0" d="M356.8,295"/> | |
<path class="st0" d="M365.7,294.1c-1,0.2-2.1,0.3-3.1,0.5"/> | |
<path class="st0" d="M376.1,291.4c-3.4,1.1-6.9,2-10.4,2.6"/> | |
<path class="st0" d="M374.1,301c-6.6,1.8-13.5,2.7-20.7,2.7c-2.7,0-5.3-0.1-7.9-0.4"/> | |
<path class="st0" d="M369.5,311.5c-5,0.9-10.1,1.3-15.3,1.3c-0.6,0-1.2,0-1.8,0"/> | |
<path class="st0" d="M329.6,164.2c10.9,18.6,23.9,27.4,43.6,37.9"/> | |
<path class="st0" d="M336.7,98.7c0.5,0-24.3,32.5-7.1,65.5"/> | |
<path class="st0" d="M328.3,177.5c10,13.8,23,23.7,39.2,32.4"/> | |
<path class="st0" d="M333.6,194.8c6.5,8.1,14.1,14.5,17.8,17.3"/> | |
<path class="st0" d="M336.3,99.6c3.1-5.3,2.4-12.2-2.1-16.7c-5.4-5.4-14.1-5.4-19.5,0c-0.5,0.5-0.8,0.8-1.2,1.3"/> | |
<path class="st0" d="M355.6,225.4c-0.5,1.1-1.6,1.8-2.9,1.8"/> | |
<path class="st0" d="M233.7,127.3c4.5-2.5,9.4-4.7,16.6-4.7"/> | |
<path class="st0" d="M238.2,118c1.3-0.5,2.6-0.9,3.9-1.2"/> | |
<path class="st0" d="M288.9,161.4c-0.1-1.7-0.2-3.5-0.1-5.2"/> | |
<path class="st0" d="M230.7,160.4c1.5-3.3,3-6.9,4.3-10.8c0.4-1.2,1.1-2.6,1.1-2.6c2.7-4.9,7.9-8.2,13.9-8.2 | |
c8.8,0,15.9,7.1,15.9,15.9c0,1.8-0.3,3.6-0.9,5.3c0,0-0.6,1.6-1.1,2.2c-8.5,12.8-13.6,25-16.4,36.5"/> | |
<path class="st0" d="M123.7,186.6c2.6-8.4,8.5-12.8,16.4-12.8c9.3,0,16.9,7.6,16.9,16.9c0,3-0.8,5.7-2.1,8.2"/> | |
<path class="st0" d="M135.3,267.8c-0.7,8.7-8,15.5-16.8,15.5c-9.3,0-16.9-7.6-16.9-16.9c0-1-0.2-1,0-1.9"/> | |
<path class="st0" d="M243.1,151.8c1.1-2.7,3.8-4.6,6.9-4.6c4.2,0,7.5,3.4,7.5,7.5c0,1.3-0.3,2.6-1,3.7"/> | |
<path class="st0" d="M142.3,200.8c-6.3,10.1-17.3,29.7-21.1,49.1"/> | |
<path class="st0" d="M147,187.8c-1.1-2.7-3.8-4.6-6.9-4.6c-3.6,0-6.8,1.7-8.3,6c0,0-1.8,4.9-4.5,15.9"/> | |
<path class="st0" d="M125.8,267.9c-0.7,3.5-3.7,6.1-7.4,6.1c-4.2,0-7.5-3.4-7.5-7.5"/> | |
<path class="st0" d="M322.9,62.3c0,0-6.8,0.1-15.3,4.7"/> | |
<path class="st0" d="M274.6,133.4c4.9,5.7,7.9,13.1,7.9,21.2c0,6-1.2,10.7-4,15.5"/> | |
<path class="st0" d="M280.6,127.6c1.2,1.4,0.9,0.7,1.9,2.3"/> | |
<path class="st0" d="M275.3,267.1c1.8,3.1,2.8,6.6,3,10.4c0.5,10-5.5,18.7-14.3,22.2"/> | |
<path class="st0" d="M281.9,293.7c-3.2,5.5-8,10-13.9,12.6"/> | |
<path class="st0" d="M90,289.2c-4.7-5.8-7.4-13.1-7.4-21.4"/> | |
<path class="st0" d="M141.3,294.2c-6.2,5.1-14.1,8.2-22.8,8.2c-9,0-17.3-3-23.6-8.2"/> | |
<path class="st0" d="M144.9,165.5c11.9,2.3,20.8,12.7,20.8,25.2c0,3.4-0.7,6.6-1.9,9.6c0,0-3.1,5.4-5.2,8.8"/> | |
<path class="st0" d="M118.4,176.9c3.5-5.6,9.2-9.7,15.8-11.2"/> | |
<path class="st0" d="M125.8,311c-2.4,0.4-4.8,0.6-7.3,0.6c-16.4,0-30.7-8.7-38.6-21.7"/> | |
<path class="st0" d="M110,319.3c-7.4-1.2-14.2-3.8-20.3-7.7"/> | |
<path class="st0" d="M179.5,172.2c2.6,5.6,4.1,11.9,4.1,18.5c0,10-3.4,19.2-9.1,26.6"/> | |
<path class="st0" d="M93.7,193.9c-9.9,38.3-11.1,73.9-11.1,73.9"/> | |
<path class="st0" d="M170.8,159.9c-7.9-7.9-18.8-12.8-30.8-12.8c-17.8,0-33.2,10.7-39.9,26.1c0,0-1.8,4.3-2.7,7.4 | |
c-0.6,1.9-1.2,3.8-1.7,5.7"/> | |
<path class="st0" d="M262.2,275.7c0.3,0.8,0.5,1.7,0.5,2.6c0,2.6-1.4,4.9-3.4,6.2"/> | |
<path class="st0" d="M193.1,186.3c0.1,1.4,0.2,2.9,0.2,4.4c0,14.1-6.5,31.6-21.8,45.1"/> | |
<path class="st0" d="M104.6,151c9.4-8.4,21.8-13.5,35.4-13.5c1.7,0,3.5,0.1,5.2,0.2"/> | |
<path class="st0" d="M92.7,167.2c-0.4,1-0.9,2.1-1.3,3.1c-1.1,3.1-2.6,7.2-4,12c-2.9,9.9-5.6,19.6-7.6,28.8"/> | |
<path class="st0" d="M104.6,151c-1.1,1-2.1,2-3.1,3"/> | |
<path class="st0" d="M259.1,270.6c-5.7-9.4-17.6-33.3-13-64"/> | |
<path class="st0" d="M238.6,249.9c-7.5-32.1-3.7-62.7,18-91.6"/> | |
<path class="st0" d="M227.8,239.7c-2.2-13.9-2.5-29.8,1.5-46.1"/> | |
<path class="st0" d="M218,233.4c-1-6.5-0.5-13.6,0-21"/> | |
<line class="st0" x1="169.8" y1="224.4" x2="168.3" y2="226.9"/> | |
<path class="st0" d="M147.6,193.6c0.1,1-0.3,1.8-1.2,2.4"/> | |
</g> | |
</svg> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?xml version="1.0" encoding="utf-8"?> | |
<!-- Generator: Adobe Illustrator 20.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> | |
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> | |
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" | |
viewBox="0 0 400 400" xml:space="preserve"> | |
<defs> | |
<style type="text/css"> | |
.st0{ | |
fill:none; | |
stroke:tomato; | |
stroke-width:1; | |
stroke-miterlimit:10; | |
} | |
svg:hover .st0 { | |
animation-name: dash; | |
animation-play-state: running; | |
animation-iteration-count: infinite; | |
animation-timing-function: linear; | |
stroke-dasharray: 600; | |
stroke-dashoffset: 0; | |
-webkit-animation: dash 2.5s ease-in-out forwards; | |
-o-animation: dash 2.5s ease-in-out forwards; | |
-moz-animation: dash 2.5s ease-in-out forwards; | |
animation: dash 2.5s ease-in-out forwards; | |
} | |
@-webkit-keyframes dash { | |
from { | |
stroke-dashoffset: 600; | |
} | |
to { | |
stroke-dashoffset: 0; | |
} | |
@charset "UTF-8"; | |
/*! | |
* animate.css -http://daneden.me/animate | |
* Version - 3.5.1 | |
* Licensed under the MIT license - http://opensource.org/licenses/MIT | |
* | |
* Copyright (c) 2016 Daniel Eden | |
*/ | |
.animated { | |
-webkit-animation-duration: 1s; | |
animation-duration: 1s; | |
-webkit-animation-fill-mode: both; | |
animation-fill-mode: both; | |
} | |
.animated.infinite { | |
-webkit-animation-iteration-count: infinite; | |
animation-iteration-count: infinite; | |
} | |
.animated.hinge { | |
-webkit-animation-duration: 2s; | |
animation-duration: 2s; | |
} | |
.animated.flipOutX, | |
.animated.flipOutY, | |
.animated.bounceIn, | |
.animated.bounceOut { | |
-webkit-animation-duration: .75s; | |
animation-duration: .75s; | |
} | |
@-webkit-keyframes bounce { | |
from, 20%, 53%, 80%, to { | |
-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); | |
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); | |
-webkit-transform: translate3d(0,0,0); | |
transform: translate3d(0,0,0); | |
} | |
40%, 43% { | |
-webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); | |
animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); | |
-webkit-transform: translate3d(0, -30px, 0); | |
transform: translate3d(0, -30px, 0); | |
} | |
70% { | |
-webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); | |
animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); | |
-webkit-transform: translate3d(0, -15px, 0); | |
transform: translate3d(0, -15px, 0); | |
} | |
90% { | |
-webkit-transform: translate3d(0,-4px,0); | |
transform: translate3d(0,-4px,0); | |
} | |
} | |
@keyframes bounce { | |
from, 20%, 53%, 80%, to { | |
-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); | |
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); | |
-webkit-transform: translate3d(0,0,0); | |
transform: translate3d(0,0,0); | |
} | |
40%, 43% { | |
-webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); | |
animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); | |
-webkit-transform: translate3d(0, -30px, 0); | |
transform: translate3d(0, -30px, 0); | |
} | |
70% { | |
-webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); | |
animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); | |
-webkit-transform: translate3d(0, -15px, 0); | |
transform: translate3d(0, -15px, 0); | |
} | |
90% { | |
-webkit-transform: translate3d(0,-4px,0); | |
transform: translate3d(0,-4px,0); | |
} | |
} | |
.bounce { | |
-webkit-animation-name: bounce; | |
animation-name: bounce; | |
-webkit-transform-origin: center bottom; | |
transform-origin: center bottom; | |
} | |
@-webkit-keyframes flash { | |
from, 50%, to { | |
opacity: 1; | |
} | |
25%, 75% { | |
opacity: 0; | |
} | |
} | |
@keyframes flash { | |
from, 50%, to { | |
opacity: 1; | |
} | |
25%, 75% { | |
opacity: 0; | |
} | |
} | |
.flash { | |
-webkit-animation-name: flash; | |
animation-name: flash; | |
} | |
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ | |
@-webkit-keyframes pulse { | |
from { | |
-webkit-transform: scale3d(1, 1, 1); | |
transform: scale3d(1, 1, 1); | |
} | |
50% { | |
-webkit-transform: scale3d(1.05, 1.05, 1.05); | |
transform: scale3d(1.05, 1.05, 1.05); | |
} | |
to { | |
-webkit-transform: scale3d(1, 1, 1); | |
transform: scale3d(1, 1, 1); | |
} | |
} | |
@keyframes pulse { | |
from { | |
-webkit-transform: scale3d(1, 1, 1); | |
transform: scale3d(1, 1, 1); | |
} | |
50% { | |
-webkit-transform: scale3d(1.05, 1.05, 1.05); | |
transform: scale3d(1.05, 1.05, 1.05); | |
} | |
to { | |
-webkit-transform: scale3d(1, 1, 1); | |
transform: scale3d(1, 1, 1); | |
} | |
} | |
.pulse { | |
-webkit-animation-name: pulse; | |
animation-name: pulse; | |
} | |
@-webkit-keyframes rubberBand { | |
from { | |
-webkit-transform: scale3d(1, 1, 1); | |
transform: scale3d(1, 1, 1); | |
} | |
30% { | |
-webkit-transform: scale3d(1.25, 0.75, 1); | |
transform: scale3d(1.25, 0.75, 1); | |
} | |
40% { | |
-webkit-transform: scale3d(0.75, 1.25, 1); | |
transform: scale3d(0.75, 1.25, 1); | |
} | |
50% { | |
-webkit-transform: scale3d(1.15, 0.85, 1); | |
transform: scale3d(1.15, 0.85, 1); | |
} | |
65% { | |
-webkit-transform: scale3d(.95, 1.05, 1); | |
transform: scale3d(.95, 1.05, 1); | |
} | |
75% { | |
-webkit-transform: scale3d(1.05, .95, 1); | |
transform: scale3d(1.05, .95, 1); | |
} | |
to { | |
-webkit-transform: scale3d(1, 1, 1); | |
transform: scale3d(1, 1, 1); | |
} | |
} | |
@keyframes rubberBand { | |
from { | |
-webkit-transform: scale3d(1, 1, 1); | |
transform: scale3d(1, 1, 1); | |
} | |
30% { | |
-webkit-transform: scale3d(1.25, 0.75, 1); | |
transform: scale3d(1.25, 0.75, 1); | |
} | |
40% { | |
-webkit-transform: scale3d(0.75, 1.25, 1); | |
transform: scale3d(0.75, 1.25, 1); | |
} | |
50% { | |
-webkit-transform: scale3d(1.15, 0.85, 1); | |
transform: scale3d(1.15, 0.85, 1); | |
} | |
65% { | |
-webkit-transform: scale3d(.95, 1.05, 1); | |
transform: scale3d(.95, 1.05, 1); | |
} | |
75% { | |
-webkit-transform: scale3d(1.05, .95, 1); | |
transform: scale3d(1.05, .95, 1); | |
} | |
to { | |
-webkit-transform: scale3d(1, 1, 1); | |
transform: scale3d(1, 1, 1); | |
} | |
} | |
.rubberBand { | |
-webkit-animation-name: rubberBand; | |
animation-name: rubberBand; | |
} | |
@-webkit-keyframes shake { | |
from, to { | |
-webkit-transform: translate3d(0, 0, 0); | |
transform: translate3d(0, 0, 0); | |
} | |
10%, 30%, 50%, 70%, 90% { | |
-webkit-transform: translate3d(-10px, 0, 0); | |
transform: translate3d(-10px, 0, 0); | |
} | |
20%, 40%, 60%, 80% { | |
-webkit-transform: translate3d(10px, 0, 0); | |
transform: translate3d(10px, 0, 0); | |
} | |
} | |
@keyframes shake { | |
from, to { | |
-webkit-transform: translate3d(0, 0, 0); | |
transform: translate3d(0, 0, 0); | |
} | |
10%, 30%, 50%, 70%, 90% { | |
-webkit-transform: translate3d(-10px, 0, 0); | |
transform: translate3d(-10px, 0, 0); | |
} | |
20%, 40%, 60%, 80% { | |
-webkit-transform: translate3d(10px, 0, 0); | |
transform: translate3d(10px, 0, 0); | |
} | |
} | |
.shake { | |
-webkit-animation-name: shake; | |
animation-name: shake; | |
} | |
@-webkit-keyframes headShake { | |
0% { | |
-webkit-transform: translateX(0); | |
transform: translateX(0); | |
} | |
6.5% { | |
-webkit-transform: translateX(-6px) rotateY(-9deg); | |
transform: translateX(-6px) rotateY(-9deg); | |
} | |
18.5% { | |
-webkit-transform: translateX(5px) rotateY(7deg); | |
transform: translateX(5px) rotateY(7deg); | |
} | |
31.5% { | |
-webkit-transform: translateX(-3px) rotateY(-5deg); | |
transform: translateX(-3px) rotateY(-5deg); | |
} | |
43.5% { | |
-webkit-transform: translateX(2px) rotateY(3deg); | |
transform: translateX(2px) rotateY(3deg); | |
} | |
50% { | |
-webkit-transform: translateX(0); | |
transform: translateX(0); | |
} | |
} | |
@keyframes headShake { | |
0% { | |
-webkit-transform: translateX(0); | |
transform: translateX(0); | |
} | |
6.5% { | |
-webkit-transform: translateX(-6px) rotateY(-9deg); | |
transform: translateX(-6px) rotateY(-9deg); | |
} | |
18.5% { | |
-webkit-transform: translateX(5px) rotateY(7deg); | |
transform: translateX(5px) rotateY(7deg); | |
} | |
31.5% { | |
-webkit-transform: translateX(-3px) rotateY(-5deg); | |
transform: translateX(-3px) rotateY(-5deg); | |
} | |
43.5% { | |
-webkit-transform: translateX(2px) rotateY(3deg); | |
transform: translateX(2px) rotateY(3deg); | |
} | |
50% { | |
-webkit-transform: translateX(0); | |
transform: translateX(0); | |
} | |
} | |
.headShake { | |
-webkit-animation-timing-function: ease-in-out; | |
animation-timing-function: ease-in-out; | |
-webkit-animation-name: headShake; | |
animation-name: headShake; | |
} | |
@-webkit-keyframes swing { | |
20% { | |
-webkit-transform: rotate3d(0, 0, 1, 15deg); | |
transform: rotate3d(0, 0, 1, 15deg); | |
} | |
40% { | |
-webkit-transform: rotate3d(0, 0, 1, -10deg); | |
transform: rotate3d(0, 0, 1, -10deg); | |
} | |
60% { | |
-webkit-transform: rotate3d(0, 0, 1, 5deg); | |
transform: rotate3d(0, 0, 1, 5deg); | |
} | |
80% { | |
-webkit-transform: rotate3d(0, 0, 1, -5deg); | |
transform: rotate3d(0, 0, 1, -5deg); | |
} | |
to { | |
-webkit-transform: rotate3d(0, 0, 1, 0deg); | |
transform: rotate3d(0, 0, 1, 0deg); | |
} | |
} | |
@keyframes swing { | |
20% { | |
-webkit-transform: rotate3d(0, 0, 1, 15deg); | |
transform: rotate3d(0, 0, 1, 15deg); | |
} | |
40% { | |
-webkit-transform: rotate3d(0, 0, 1, -10deg); | |
transform: rotate3d(0, 0, 1, -10deg); | |
} | |
60% { | |
-webkit-transform: rotate3d(0, 0, 1, 5deg); | |
transform: rotate3d(0, 0, 1, 5deg); | |
} | |
80% { | |
-webkit-transform: rotate3d(0, 0, 1, -5deg); | |
transform: rotate3d(0, 0, 1, -5deg); | |
} | |
to { | |
-webkit-transform: rotate3d(0, 0, 1, 0deg); | |
transform: rotate3d(0, 0, 1, 0deg); | |
} | |
} | |
.swing { | |
-webkit-transform-origin: top center; | |
transform-origin: top center; | |
-webkit-animation-name: swing; | |
animation-name: swing; | |
} | |
@-webkit-keyframes tada { | |
from { | |
-webkit-transform: scale3d(1, 1, 1); | |
transform: scale3d(1, 1, 1); | |
} | |
10%, 20% { | |
-webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); | |
transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); | |
} | |
30%, 50%, 70%, 90% { | |
-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); | |
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); | |
} | |
40%, 60%, 80% { | |
-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); | |
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); | |
} | |
to { | |
-webkit-transform: scale3d(1, 1, 1); | |
transform: scale3d(1, 1, 1); | |
} | |
} | |
@keyframes tada { | |
from { | |
-webkit-transform: scale3d(1, 1, 1); | |
transform: scale3d(1, 1, 1); | |
} | |
10%, 20% { | |
-webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); | |
transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); | |
} | |
30%, 50%, 70%, 90% { | |
-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); | |
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); | |
} | |
40%, 60%, 80% { | |
-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); | |
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); | |
} | |
to { | |
-webkit-transform: scale3d(1, 1, 1); | |
transform: scale3d(1, 1, 1); | |
} | |
} | |
.tada { | |
-webkit-animation-name: tada; | |
animation-name: tada; | |
} | |
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ | |
@-webkit-keyframes wobble { | |
from { | |
-webkit-transform: none; | |
transform: none; | |
} | |
15% { | |
-webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); | |
transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); | |
} | |
30% { | |
-webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); | |
transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); | |
} | |
45% { | |
-webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); | |
transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); | |
} | |
60% { | |
-webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); | |
transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); | |
} | |
75% { | |
-webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); | |
transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); | |
} | |
to { | |
-webkit-transform: none; | |
transform: none; | |
} | |
} | |
@keyframes wobble { | |
from { | |
-webkit-transform: none; | |
transform: none; | |
} | |
15% { | |
-webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); | |
transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); | |
} | |
30% { | |
-webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); | |
transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); | |
} | |
45% { | |
-webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); | |
transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); | |
} | |
60% { | |
-webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); | |
transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); | |
} | |
75% { | |
-webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); | |
transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); | |
} | |
to { | |
-webkit-transform: none; | |
transform: none; | |
} | |
} | |
.wobble { | |
-webkit-animation-name: wobble; | |
animation-name: wobble; | |
} | |
@-webkit-keyframes jello { | |
from, 11.1%, to { | |
-webkit-transform: none; | |
transform: none; | |
} | |
22.2% { | |
-webkit-transform: skewX(-12.5deg) skewY(-12.5deg); | |
transform: skewX(-12.5deg) skewY(-12.5deg); | |
} | |
33.3% { | |
-webkit-transform: skewX(6.25deg) skewY(6.25deg); | |
transform: skewX(6.25deg) skewY(6.25deg); | |
} | |
44.4% { | |
-webkit-transform: skewX(-3.125deg) skewY(-3.125deg); | |
transform: skewX(-3.125deg) skewY(-3.125deg); | |
} | |
55.5% { | |
-webkit-transform: skewX(1.5625deg) skewY(1.5625deg); | |
transform: skewX(1.5625deg) skewY(1.5625deg); | |
} | |
66.6% { | |
-webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg); | |
transform: skewX(-0.78125deg) skewY(-0.78125deg); | |
} | |
77.7% { | |
-webkit-transform: skewX(0.390625deg) skewY(0.390625deg); | |
transform: skewX(0.390625deg) skewY(0.390625deg); | |
} | |
88.8% { | |
-webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg); | |
transform: skewX(-0.1953125deg) skewY(-0.1953125deg); | |
} | |
} | |
@keyframes jello { | |
from, 11.1%, to { | |
-webkit-transform: none; | |
transform: none; | |
} | |
22.2% { | |
-webkit-transform: skewX(-12.5deg) skewY(-12.5deg); | |
transform: skewX(-12.5deg) skewY(-12.5deg); | |
} | |
33.3% { | |
-webkit-transform: skewX(6.25deg) skewY(6.25deg); | |
transform: skewX(6.25deg) skewY(6.25deg); | |
} | |
44.4% { | |
-webkit-transform: skewX(-3.125deg) skewY(-3.125deg); | |
transform: skewX(-3.125deg) skewY(-3.125deg); | |
} | |
55.5% { | |
-webkit-transform: skewX(1.5625deg) skewY(1.5625deg); | |
transform: skewX(1.5625deg) skewY(1.5625deg); | |
} | |
66.6% { | |
-webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg); | |
transform: skewX(-0.78125deg) skewY(-0.78125deg); | |
} | |
77.7% { | |
-webkit-transform: skewX(0.390625deg) skewY(0.390625deg); | |
transform: skewX(0.390625deg) skewY(0.390625deg); | |
} | |
88.8% { | |
-webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg); | |
transform: skewX(-0.1953125deg) skewY(-0.1953125deg); | |
} | |
} | |
.jello { | |
-webkit-animation-name: jello; | |
animation-name: jello; | |
-webkit-transform-origin: center; | |
transform-origin: center; | |
} | |
@-webkit-keyframes bounceIn { | |
from, 20%, 40%, 60%, 80%, to { | |
-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); | |
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); | |
} | |
0% { | |
opacity: 0; | |
-webkit-transform: scale3d(.3, .3, .3); | |
transform: scale3d(.3, .3, .3); | |
} | |
20% { | |
-webkit-transform: scale3d(1.1, 1.1, 1.1); | |
transform: scale3d(1.1, 1.1, 1.1); | |
} | |
40% { | |
-webkit-transform: scale3d(.9, .9, .9); | |
transform: scale3d(.9, .9, .9); | |
} | |
60% { | |
opacity: 1; | |
-webkit-transform: scale3d(1.03, 1.03, 1.03); | |
transform: scale3d(1.03, 1.03, 1.03); | |
} | |
80% { | |
-webkit-transform: scale3d(.97, .97, .97); | |
transform: scale3d(.97, .97, .97); | |
} | |
to { | |
opacity: 1; | |
-webkit-transform: scale3d(1, 1, 1); | |
transform: scale3d(1, 1, 1); | |
} | |
} | |
@keyframes bounceIn { | |
from, 20%, 40%, 60%, 80%, to { | |
-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); | |
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); | |
} | |
0% { | |
opacity: 0; | |
-webkit-transform: scale3d(.3, .3, .3); | |
transform: scale3d(.3, .3, .3); | |
} | |
20% { | |
-webkit-transform: scale3d(1.1, 1.1, 1.1); | |
transform: scale3d(1.1, 1.1, 1.1); | |
} | |
40% { | |
-webkit-transform: scale3d(.9, .9, .9); | |
transform: scale3d(.9, .9, .9); | |
} | |
60% { | |
opacity: 1; | |
-webkit-transform: scale3d(1.03, 1.03, 1.03); | |
transform: scale3d(1.03, 1.03, 1.03); | |
} | |
80% { | |
-webkit-transform: scale3d(.97, .97, .97); | |
transform: scale3d(.97, .97, .97); | |
} | |
to { | |
opacity: 1; | |
-webkit-transform: scale3d(1, 1, 1); | |
transform: scale3d(1, 1, 1); | |
} | |
} | |
.bounceIn { | |
-webkit-animation-name: bounceIn; | |
animation-name: bounceIn; | |
} | |
@-webkit-keyframes bounceInDown { | |
from, 60%, 75%, 90%, to { | |
-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); | |
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); | |
} | |
0% { | |
opacity: 0; | |
-webkit-transform: translate3d(0, -3000px, 0); | |
transform: translate3d(0, -3000px, 0); | |
} | |
60% { | |
opacity: 1; | |
-webkit-transform: translate3d(0, 25px, 0); | |
transform: translate3d(0, 25px, 0); | |
} | |
75% { | |
-webkit-transform: translate3d(0, -10px, 0); | |
transform: translate3d(0, -10px, 0); | |
} | |
90% { | |
-webkit-transform: translate3d(0, 5px, 0); | |
transform: translate3d(0, 5px, 0); | |
} | |
to { | |
-webkit-transform: none; | |
transform: none; | |
} | |
} | |
@keyframes bounceInDown { | |
from, 60%, 75%, 90%, to { | |
-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); | |
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); | |
} | |
0% { | |
opacity: 0; | |
-webkit-transform: translate3d(0, -3000px, 0); | |
transform: translate3d(0, -3000px, 0); | |
} | |
60% { | |
opacity: 1; | |
-webkit-transform: translate3d(0, 25px, 0); | |
transform: translate3d(0, 25px, 0); | |
} | |
75% { | |
-webkit-transform: translate3d(0, -10px, 0); | |
transform: translate3d(0, -10px, 0); | |
} | |
90% { | |
-webkit-transform: translate3d(0, 5px, 0); | |
transform: translate3d(0, 5px, 0); | |
} | |
to { | |
-webkit-transform: none; | |
transform: none; | |
} | |
} | |
.bounceInDown { | |
-webkit-animation-name: bounceInDown; | |
animation-name: bounceInDown; | |
} | |
@-webkit-keyframes bounceInLeft { | |
from, 60%, 75%, 90%, to { | |
-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); | |
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); | |
} | |
0% { | |
opacity: 0; | |
-webkit-transform: translate3d(-3000px, 0, 0); | |
transform: translate3d(-3000px, 0, 0); | |
} | |
60% { | |
opacity: 1; | |
-webkit-transform: translate3d(25px, 0, 0); | |
transform: translate3d(25px, 0, 0); | |
} | |
75% { | |
-webkit-transform: translate3d(-10px, 0, 0); | |
transform: translate3d(-10px, 0, 0); | |
} | |
90% { | |
-webkit-transform: translate3d(5px, 0, 0); | |
transform: translate3d(5px, 0, 0); | |
} | |
to { | |
-webkit-transform: none; | |
transform: none; | |
} | |
} | |
@keyframes bounceInLeft { | |
from, 60%, 75%, 90%, to { | |
-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); | |
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); | |
} | |
0% { | |
opacity: 0; | |
-webkit-transform: translate3d(-3000px, 0, 0); | |
transform: translate3d(-3000px, 0, 0); | |
} | |
60% { | |
opacity: 1; | |
-webkit-transform: translate3d(25px, 0, 0); | |
transform: translate3d(25px, 0, 0); | |
} | |
75% { | |
-webkit-transform: translate3d(-10px, 0, 0); | |
transform: translate3d(-10px, 0, 0); | |
} | |
90% { | |
-webkit-transform: translate3d(5px, 0, 0); | |
transform: translate3d(5px, 0, 0); | |
} | |
to { | |
-webkit-transform: none; | |
transform: none; | |
} | |
} | |
.bounceInLeft { | |
-webkit-animation-name: bounceInLeft; | |
animation-name: bounceInLeft; | |
} | |
@-webkit-keyframes bounceInRight { | |
from, 60%, 75%, 90%, to { | |
-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); | |
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); | |
} | |
from { | |
opacity: 0; | |
-webkit-transform: translate3d(3000px, 0, 0); | |
transform: translate3d(3000px, 0, 0); | |
} | |
60% { | |
opacity: 1; | |
-webkit-transform: translate3d(-25px, 0, 0); | |
transform: translate3d(-25px, 0, 0); | |
} | |
75% { | |
-webkit-transform: translate3d(10px, 0, 0); | |
transform: translate3d(10px, 0, 0); | |
} | |
90% { | |
-webkit-transform: translate3d(-5px, 0, 0); | |
transform: translate3d(-5px, 0, 0); | |
} | |
to { | |
-webkit-transform: none; | |
transform: none; | |
} | |
} | |
@keyframes bounceInRight { | |
from, 60%, 75%, 90%, to { | |
-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); | |
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); | |
} | |
from { | |
opacity: 0; | |
-webkit-transform: translate3d(3000px, 0, 0); | |
transform: translate3d(3000px, 0, 0); | |
} | |
60% { | |
opacity: 1; | |
-webkit-transform: translate3d(-25px, 0, 0); | |
transform: translate3d(-25px, 0, 0); | |
} | |
75% { | |
-webkit-transform: translate3d(10px, 0, 0); | |
transform: translate3d(10px, 0, 0); | |
} | |
90% { | |
-webkit-transform: translate3d(-5px, 0, 0); | |
transform: translate3d(-5px, 0, 0); | |
} | |
to { | |
-webkit-transform: none; | |
transform: none; | |
} | |
} | |
.bounceInRight { | |
-webkit-animation-name: bounceInRight; | |
animation-name: bounceInRight; | |
} | |
@-webkit-keyframes bounceInUp { | |
from, 60%, 75%, 90%, to { | |
-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); | |
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); | |
} | |
from { | |
opacity: 0; | |
-webkit-transform: translate3d(0, 3000px, 0); | |
transform: translate3d(0, 3000px, 0); | |
} | |
60% { | |
opacity: 1; | |
-webkit-transform: translate3d(0, -20px, 0); | |
transform: translate3d(0, -20px, 0); | |
} | |
75% { | |
-webkit-transform: translate3d(0, 10px, 0); | |
transform: translate3d(0, 10px, 0); | |
} | |
90% { | |
-webkit-transform: translate3d(0, -5px, 0); | |
transform: translate3d(0, -5px, 0); | |
} | |
to { | |
-webkit-transform: translate3d(0, 0, 0); | |
transform: translate3d(0, 0, 0); | |
} | |
} | |
@keyframes bounceInUp { | |
from, 60%, 75%, 90%, to { | |
-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); | |
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); | |
} | |
from { | |
opacity: 0; | |
-webkit-transform: translate3d(0, 3000px, 0); | |
transform: translate3d(0, 3000px, 0); | |
} | |
60% { | |
opacity: 1; | |
-webkit-transform: translate3d(0, -20px, 0); | |
transform: translate3d(0, -20px, 0); | |
} | |
75% { | |
-webkit-transform: translate3d(0, 10px, 0); | |
transform: translate3d(0, 10px, 0); | |
} | |
90% { | |
-webkit-transform: translate3d(0, -5px, 0); | |
transform: translate3d(0, -5px, 0); | |
} | |
to { | |
-webkit-transform: translate3d(0, 0, 0); | |
transform: translate3d(0, 0, 0); | |
} | |
} | |
.bounceInUp { | |
-webkit-animation-name: bounceInUp; | |
animation-name: bounceInUp; | |
} | |
@-webkit-keyframes bounceOut { | |
20% { | |
-webkit-transform: scale3d(.9, .9, .9); | |
transform: scale3d(.9, .9, .9); | |
} | |
50%, 55% { | |
opacity: 1; | |
-webkit-transform: scale3d(1.1, 1.1, 1.1); | |
transform: scale3d(1.1, 1.1, 1.1); | |
} | |
to { | |
opacity: 0; | |
-webkit-transform: scale3d(.3, .3, .3); | |
transform: scale3d(.3, .3, .3); | |
} | |
} | |
@keyframes bounceOut { | |
20% { | |
-webkit-transform: scale3d(.9, .9, .9); | |
transform: scale3d(.9, .9, .9); | |
} | |
50%, 55% { | |
opacity: 1; | |
-webkit-transform: scale3d(1.1, 1.1, 1.1); | |
transform: scale3d(1.1, 1.1, 1.1); | |
} | |
to { | |
opacity: 0; | |
-webkit-transform: scale3d(.3, .3, .3); | |
transform: scale3d(.3, .3, .3); | |
} | |
} | |
.bounceOut { | |
-webkit-animation-name: bounceOut; | |
animation-name: bounceOut; | |
} | |
@-webkit-keyframes bounceOutDown { | |
20% { | |
-webkit-transform: translate3d(0, 10px, 0); | |
transform: translate3d(0, 10px, 0); | |
} | |
40%, 45% { | |
opacity: 1; | |
-webkit-transform: translate3d(0, -20px, 0); | |
transform: translate3d(0, -20px, 0); | |
} | |
to { | |
opacity: 0; | |
-webkit-transform: translate3d(0, 2000px, 0); | |
transform: translate3d(0, 2000px, 0); | |
} | |
} | |
@keyframes bounceOutDown { | |
20% { | |
-webkit-transform: translate3d(0, 10px, 0); | |
transform: translate3d(0, 10px, 0); | |
} | |
40%, 45% { | |
opacity: 1; | |
-webkit-transform: translate3d(0, -20px, 0); | |
transform: translate3d(0, -20px, 0); | |
} | |
to { | |
opacity: 0; | |
-webkit-transform: translate3d(0, 2000px, 0); | |
transform: translate3d(0, 2000px, 0); | |
} | |
} | |
.bounceOutDown { | |
-webkit-animation-name: bounceOutDown; | |
animation-name: bounceOutDown; | |
} | |
@-webkit-keyframes bounceOutLeft { | |
20% { | |
opacity: 1; | |
-webkit-transform: translate3d(20px, 0, 0); | |
transform: translate3d(20px, 0, 0); | |
} | |
to { | |
opacity: 0; | |
-webkit-transform: translate3d(-2000px, 0, 0); | |
transform: translate3d(-2000px, 0, 0); | |
} | |
} | |
@keyframes bounceOutLeft { | |
20% { | |
opacity: 1; | |
-webkit-transform: translate3d(20px, 0, 0); | |
transform: translate3d(20px, 0, 0); | |
} | |
to { | |
opacity: 0; | |
-webkit-transform: translate3d(-2000px, 0, 0); | |
transform: translate3d(-2000px, 0, 0); | |
} | |
} | |
.bounceOutLeft { | |
-webkit-animation-name: bounceOutLeft; | |
animation-name: bounceOutLeft; | |
} | |
@-webkit-keyframes bounceOutRight { | |
20% { | |
opacity: 1; | |
-webkit-transform: translate3d(-20px, 0, 0); | |
transform: translate3d(-20px, 0, 0); | |
} | |
to { | |
opacity: 0; | |
-webkit-transform: translate3d(2000px, 0, 0); | |
transform: translate3d(2000px, 0, 0); | |
} | |
} | |
@keyframes bounceOutRight { | |
20% { | |
opacity: 1; | |
-webkit-transform: translate3d(-20px, 0, 0); | |
transform: translate3d(-20px, 0, 0); | |
} | |
to { | |
opacity: 0; | |
-webkit-transform: translate3d(2000px, 0, 0); | |
transform: translate3d(2000px, 0, 0); | |
} | |
} | |
.bounceOutRight { | |
-webkit-animation-name: bounceOutRight; | |
animation-name: bounceOutRight; | |
} | |
@-webkit-keyframes bounceOutUp { | |
20% { | |
-webkit-transform: translate3d(0, -10px, 0); | |
transform: translate3d(0, -10px, 0); | |
} | |
40%, 45% { | |
opacity: 1; | |
-webkit-transform: translate3d(0, 20px, 0); | |
transform: translate3d(0, 20px, 0); | |
} | |
to { | |
opacity: 0; | |
-webkit-transform: translate3d(0, -2000px, 0); | |
transform: translate3d(0, -2000px, 0); | |
} | |
} | |
@keyframes bounceOutUp { | |
20% { | |
-webkit-transform: translate3d(0, -10px, 0); | |
transform: translate3d(0, -10px, 0); | |
} | |
40%, 45% { | |
opacity: 1; | |
-webkit-transform: translate3d(0, 20px, 0); | |
transform: translate3d(0, 20px, 0); | |
} | |
to { | |
opacity: 0; | |
-webkit-transform: translate3d(0, -2000px, 0); | |
transform: translate3d(0, -2000px, 0); | |
} | |
} | |
.bounceOutUp { | |
-webkit-animation-name: bounceOutUp; | |
animation-name: bounceOutUp; | |
} | |
@-webkit-keyframes fadeIn { | |
from { | |
opacity: 0; | |
} | |
to { | |
opacity: 1; | |
} | |
} | |
@keyframes fadeIn { | |
from { | |
opacity: 0; | |
} | |
to { | |
opacity: 1; | |
} | |
} | |
.fadeIn { | |
-webkit-animation-name: fadeIn; | |
animation-name: fadeIn; | |
} | |
@-webkit-keyframes fadeInDown { | |
from { | |
opacity: 0; | |
-webkit-transform: translate3d(0, -100%, 0); | |
transform: translate3d(0, -100%, 0); | |
} | |
to { | |
opacity: 1; | |
-webkit-transform: none; | |
transform: none; | |
} | |
} | |
@keyframes fadeInDown { | |
from { | |
opacity: 0; | |
-webkit-transform: translate3d(0, -100%, 0); | |
transform: translate3d(0, -100%, 0); | |
} | |
to { | |
opacity: 1; | |
-webkit-transform: none; | |
transform: none; | |
} | |
} | |
.fadeInDown { | |
-webkit-animation-name: fadeInDown; | |
animation-name: fadeInDown; | |
} | |
@-webkit-keyframes fadeInDownBig { | |
from { | |
opacity: 0; | |
-webkit-transform: translate3d(0, -2000px, 0); | |
transform: translate3d(0, -2000px, 0); | |
} | |
to { | |
opacity: 1; | |
-webkit-transform: none; | |
transform: none; | |
} | |
} | |
@keyframes fadeInDownBig { | |
from { | |
opacity: 0; | |
-webkit-transform: translate3d(0, -2000px, 0); | |
transform: translate3d(0, -2000px, 0); | |
} | |
to { | |
opacity: 1; | |
-webkit-transform: none; | |
transform: none; | |
} | |
} | |
.fadeInDownBig { | |
-webkit-animation-name: fadeInDownBig; | |
animation-name: fadeInDownBig; | |
} | |
@-webkit-keyframes fadeInLeft { | |
from { | |
opacity: 0; | |
-webkit-transform: translate3d(-100%, 0, 0); | |
transform: translate3d(-100%, 0, 0); | |
} | |
to { | |
opacity: 1; | |
-webkit-transform: none; | |
transform: none; | |
} | |
} | |
@keyframes fadeInLeft { | |
from { | |
opacity: 0; | |
-webkit-transform: translate3d(-100%, 0, 0); | |
transform: translate3d(-100%, 0, 0); | |
} | |
to { | |
opacity: 1; | |
-webkit-transform: none; | |
transform: none; | |
} | |
} | |
.fadeInLeft { | |
-webkit-animation-name: fadeInLeft; | |
animation-name: fadeInLeft; | |
} | |
@-webkit-keyframes fadeInLeftBig { | |
from { | |
opacity: 0; | |
-webkit-transform: translate3d(-2000px, 0, 0); | |
transform: translate3d(-2000px, 0, 0); | |
} | |
to { | |
opacity: 1; | |
-webkit-transform: none; | |
transform: none; | |
} | |
} | |
@keyframes fadeInLeftBig { | |
from { | |
opacity: 0; | |
-webkit-transform: translate3d(-2000px, 0, 0); | |
transform: translate3d(-2000px, 0, 0); | |
} | |
to { | |
opacity: 1; | |
-webkit-transform: none; | |
transform: none; | |
} | |
} | |
.fadeInLeftBig { | |
-webkit-animation-name: fadeInLeftBig; | |
animation-name: fadeInLeftBig; | |
} | |
@-webkit-keyframes fadeInRight { | |
from { | |
opacity: 0; | |
-webkit-transform: translate3d(100%, 0, 0); | |
transform: translate3d(100%, 0, 0); | |
} | |
to { | |
opacity: 1; | |
-webkit-transform: none; | |
transform: none; | |
} | |
} | |
@keyframes fadeInRight { | |
from { | |
opacity: 0; | |
-webkit-transform: translate3d(100%, 0, 0); | |
transform: translate3d(100%, 0, 0); | |
} | |
to { | |
opacity: 1; | |
-webkit-transform: none; | |
transform: none; | |
} | |
} | |
.fadeInRight { | |
-webkit-animation-name: fadeInRight; | |
animation-name: fadeInRight; | |
} | |
@-webkit-keyframes fadeInRightBig { | |
from { | |
opacity: 0; | |
-webkit-transform: translate3d(2000px, 0, 0); | |
transform: translate3d(2000px, 0, 0); | |
} | |
to { | |
opacity: 1; | |
-webkit-transform: none; | |
transform: none; | |
} | |
} | |
@keyframes fadeInRightBig { | |
from { | |
opacity: 0; | |
-webkit-transform: translate3d(2000px, 0, 0); | |
transform: translate3d(2000px, 0, 0); | |
} | |
to { | |
opacity: 1; | |
-webkit-transform: none; | |
transform: none; | |
} | |
} | |
.fadeInRightBig { | |
-webkit-animation-name: fadeInRightBig; | |
animation-name: fadeInRightBig; | |
} | |
@-webkit-keyframes fadeInUp { | |
from { | |
opacity: 0; | |
-webkit-transform: translate3d(0, 100%, 0); | |
transform: translate3d(0, 100%, 0); | |
} | |
to { | |
opacity: 1; | |
-webkit-transform: none; | |
transform: none; | |
} | |
} | |
@keyframes fadeInUp { | |
from { | |
opacity: 0; | |
-webkit-transform: translate3d(0, 100%, 0); | |
transform: translate3d(0, 100%, 0); | |
} | |
to { | |
opacity: 1; | |
-webkit-transform: none; | |
transform: none; | |
} | |
} | |
.fadeInUp { | |
-webkit-animation-name: fadeInUp; | |
animation-name: fadeInUp; | |
} | |
@-webkit-keyframes fadeInUpBig { | |
from { | |
opacity: 0; | |
-webkit-transform: translate3d(0, 2000px, 0); | |
transform: translate3d(0, 2000px, 0); | |
} | |
to { | |
opacity: 1; | |
-webkit-transform: none; | |
transform: none; | |
} | |
} | |
@keyframes fadeInUpBig { | |
from { | |
opacity: 0; | |
-webkit-transform: translate3d(0, 2000px, 0); | |
transform: translate3d(0, 2000px, 0); | |
} | |
to { | |
opacity: 1; | |
-webkit-transform: none; | |
transform: none; | |
} | |
} | |
.fadeInUpBig { | |
-webkit-animation-name: fadeInUpBig; | |
animation-name: fadeInUpBig; | |
} | |
@-webkit-keyframes fadeOut { | |
from { | |
opacity: 1; | |
} | |
to { | |
opacity: 0; | |
} | |
} | |
@keyframes fadeOut { | |
from { | |
opacity: 1; | |
} | |
to { | |
opacity: 0; | |
} | |
} | |
.fadeOut { | |
-webkit-animation-name: fadeOut; | |
animation-name: fadeOut; | |
} | |
@-webkit-keyframes fadeOutDown { | |
from { | |
opacity: 1; | |
} | |
to { | |
opacity: 0; | |
-webkit-transform: translate3d(0, 100%, 0); | |
transform: translate3d(0, 100%, 0); | |
} | |
} | |
@keyframes fadeOutDown { | |
from { | |
opacity: 1; | |
} | |
to { | |
opacity: 0; | |
-webkit-transform: translate3d(0, 100%, 0); | |
transform: translate3d(0, 100%, 0); | |
} | |
} | |
.fadeOutDown { | |
-webkit-animation-name: fadeOutDown; | |
animation-name: fadeOutDown; | |
} | |
@-webkit-keyframes fadeOutDownBig { | |
from { | |
opacity: 1; | |
} | |
to { | |
opacity: 0; | |
-webkit-transform: translate3d(0, 2000px, 0); | |
transform: translate3d(0, 2000px, 0); | |
} | |
} | |
@keyframes fadeOutDownBig { | |
from { | |
opacity: 1; | |
} | |
to { | |
opacity: 0; | |
-webkit-transform: translate3d(0, 2000px, 0); | |
transform: translate3d(0, 2000px, 0); | |
} | |
} | |
.fadeOutDownBig { | |
-webkit-animation-name: fadeOutDownBig; | |
animation-name: fadeOutDownBig; | |
} | |
@-webkit-keyframes fadeOutLeft { | |
from { | |
opacity: 1; | |
} | |
to { | |
opacity: 0; | |
-webkit-transform: translate3d(-100%, 0, 0); | |
transform: translate3d(-100%, 0, 0); | |
} | |
} | |
@keyframes fadeOutLeft { | |
from { | |
opacity: 1; | |
} | |
to { | |
opacity: 0; | |
-webkit-transform: translate3d(-100%, 0, 0); | |
transform: translate3d(-100%, 0, 0); | |
} | |
} | |
.fadeOutLeft { | |
-webkit-animation-name: fadeOutLeft; | |
animation-name: fadeOutLeft; | |
} | |
@-webkit-keyframes fadeOutLeftBig { | |
from { | |
opacity: 1; | |
} | |
to { | |
opacity: 0; | |
-webkit-transform: translate3d(-2000px, 0, 0); | |
transform: translate3d(-2000px, 0, 0); | |
} | |
} | |
@keyframes fadeOutLeftBig { | |
from { | |
opacity: 1; | |
} | |
to { | |
opacity: 0; | |
-webkit-transform: translate3d(-2000px, 0, 0); | |
transform: translate3d(-2000px, 0, 0); | |
} | |
} | |
.fadeOutLeftBig { | |
-webkit-animation-name: fadeOutLeftBig; | |
animation-name: fadeOutLeftBig; | |
} | |
@-webkit-keyframes fadeOutRight { | |
from { | |
opacity: 1; | |
} | |
to { | |
opacity: 0; | |
-webkit-transform: translate3d(100%, 0, 0); | |
transform: translate3d(100%, 0, 0); | |
} | |
} | |
@keyframes fadeOutRight { | |
from { | |
opacity: 1; | |
} | |
to { | |
opacity: 0; | |
-webkit-transform: translate3d(100%, 0, 0); | |
transform: translate3d(100%, 0, 0); | |
} | |
} | |
.fadeOutRight { | |
-webkit-animation-name: fadeOutRight; | |
animation-name: fadeOutRight; | |
} | |
@-webkit-keyframes fadeOutRightBig { | |
from { | |
opacity: 1; | |
} | |
to { | |
opacity: 0; | |
-webkit-transform: translate3d(2000px, 0, 0); | |
transform: translate3d(2000px, 0, 0); | |
} | |
} | |
@keyframes fadeOutRightBig { | |
from { | |
opacity: 1; | |
} | |
to { | |
opacity: 0; | |
-webkit-transform: translate3d(2000px, 0, 0); | |
transform: translate3d(2000px, 0, 0); | |
} | |
} | |
.fadeOutRightBig { | |
-webkit-animation-name: fadeOutRightBig; | |
animation-name: fadeOutRightBig; | |
} | |
@-webkit-keyframes fadeOutUp { | |
from { | |
opacity: 1; | |
} | |
to { | |
opacity: 0; | |
-webkit-transform: translate3d(0, -100%, 0); | |
transform: translate3d(0, -100%, 0); | |
} | |
} | |
@keyframes fadeOutUp { | |
from { | |
opacity: 1; | |
} | |
to { | |
opacity: 0; | |
-webkit-transform: translate3d(0, -100%, 0); | |
transform: translate3d(0, -100%, 0); | |
} | |
} | |
.fadeOutUp { | |
-webkit-animation-name: fadeOutUp; | |
animation-name: fadeOutUp; | |
} | |
@-webkit-keyframes fadeOutUpBig { | |
from { | |
opacity: 1; | |
} | |
to { | |
opacity: 0; | |
-webkit-transform: translate3d(0, -2000px, 0); | |
transform: translate3d(0, -2000px, 0); | |
} | |
} | |
@keyframes fadeOutUpBig { | |
from { | |
opacity: 1; | |
} | |
to { | |
opacity: 0; | |
-webkit-transform: translate3d(0, -2000px, 0); | |
transform: translate3d(0, -2000px, 0); | |
} | |
} | |
.fadeOutUpBig { | |
-webkit-animation-name: fadeOutUpBig; | |
animation-name: fadeOutUpBig; | |
} | |
@-webkit-keyframes flip { | |
from { | |
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg); | |
transform: perspective(400px) rotate3d(0, 1, 0, -360deg); | |
-webkit-animation-timing-function: ease-out; | |
animation-timing-function: ease-out; | |
} | |
40% { | |
-webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); | |
transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); | |
-webkit-animation-timing-function: ease-out; | |
animation-timing-function: ease-out; | |
} | |
50% { | |
-webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); | |
transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); | |
-webkit-animation-timing-function: ease-in; | |
animation-timing-function: ease-in; | |
} | |
80% { | |
-webkit-transform: perspective(400px) scale3d(.95, .95, .95); | |
transform: perspective(400px) scale3d(.95, .95, .95); | |
-webkit-animation-timing-function: ease-in; | |
animation-timing-function: ease-in; | |
} | |
to { | |
-webkit-transform: perspective(400px); | |
transform: perspective(400px); | |
-webkit-animation-timing-function: ease-in; | |
animation-timing-function: ease-in; | |
} | |
} | |
@keyframes flip { | |
from { | |
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg); | |
transform: perspective(400px) rotate3d(0, 1, 0, -360deg); | |
-webkit-animation-timing-function: ease-out; | |
animation-timing-function: ease-out; | |
} | |
40% { | |
-webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); | |
transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); | |
-webkit-animation-timing-function: ease-out; | |
animation-timing-function: ease-out; | |
} | |
50% { | |
-webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); | |
transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); | |
-webkit-animation-timing-function: ease-in; | |
animation-timing-function: ease-in; | |
} | |
80% { | |
-webkit-transform: perspective(400px) scale3d(.95, .95, .95); | |
transform: perspective(400px) scale3d(.95, .95, .95); | |
-webkit-animation-timing-function: ease-in; | |
animation-timing-function: ease-in; | |
} | |
to { | |
-webkit-transform: perspective(400px); | |
transform: perspective(400px); | |
-webkit-animation-timing-function: ease-in; | |
animation-timing-function: ease-in; | |
} | |
} | |
.animated.flip { | |
-webkit-backface-visibility: visible; | |
backface-visibility: visible; | |
-webkit-animation-name: flip; | |
animation-name: flip; | |
} | |
@-webkit-keyframes flipInX { | |
from { | |
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); | |
transform: perspective(400px) rotate3d(1, 0, 0, 90deg); | |
-webkit-animation-timing-function: ease-in; | |
animation-timing-function: ease-in; | |
opacity: 0; | |
} | |
40% { | |
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); | |
transform: perspective(400px) rotate3d(1, 0, 0, -20deg); | |
-webkit-animation-timing-function: ease-in; | |
animation-timing-function: ease-in; | |
} | |
60% { | |
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); | |
transform: perspective(400px) rotate3d(1, 0, 0, 10deg); | |
opacity: 1; | |
} | |
80% { | |
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); | |
transform: perspective(400px) rotate3d(1, 0, 0, -5deg); | |
} | |
to { | |
-webkit-transform: perspective(400px); | |
transform: perspective(400px); | |
} | |
} | |
@keyframes flipInX { | |
from { | |
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); | |
transform: perspective(400px) rotate3d(1, 0, 0, 90deg); | |
-webkit-animation-timing-function: ease-in; | |
animation-timing-function: ease-in; | |
opacity: 0; | |
} | |
40% { | |
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); | |
transform: perspective(400px) rotate3d(1, 0, 0, -20deg); | |
-webkit-animation-timing-function: ease-in; | |
animation-timing-function: ease-in; | |
} | |
60% { | |
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); | |
transform: perspective(400px) rotate3d(1, 0, 0, 10deg); | |
opacity: 1; | |
} | |
80% { | |
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); | |
transform: perspective(400px) rotate3d(1, 0, 0, -5deg); | |
} | |
to { | |
-webkit-transform: perspective(400px); | |
transform: perspective(400px); | |
} | |
} | |
.flipInX { | |
-webkit-backface-visibility: visible !important; | |
backface-visibility: visible !important; | |
-webkit-animation-name: flipInX; | |
animation-name: flipInX; | |
} | |
@-webkit-keyframes flipInY { | |
from { | |
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); | |
transform: perspective(400px) rotate3d(0, 1, 0, 90deg); | |
-webkit-animation-timing-function: ease-in; | |
animation-timing-function: ease-in; | |
opacity: 0; | |
} | |
40% { | |
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); | |
transform: perspective(400px) rotate3d(0, 1, 0, -20deg); | |
-webkit-animation-timing-function: ease-in; | |
animation-timing-function: ease-in; | |
} | |
60% { | |
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg); | |
transform: perspective(400px) rotate3d(0, 1, 0, 10deg); | |
opacity: 1; | |
} | |
80% { | |
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg); | |
transform: perspective(400px) rotate3d(0, 1, 0, -5deg); | |
} | |
to { | |
-webkit-transform: perspective(400px); | |
transform: perspective(400px); | |
} | |
} | |
@keyframes flipInY { | |
from { | |
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); | |
transform: perspective(400px) rotate3d(0, 1, 0, 90deg); | |
-webkit-animation-timing-function: ease-in; | |
animation-timing-function: ease-in; | |
opacity: 0; | |
} | |
40% { | |
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); | |
transform: perspective(400px) rotate3d(0, 1, 0, -20deg); | |
-webkit-animation-timing-function: ease-in; | |
animation-timing-function: ease-in; | |
} | |
60% { | |
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg); | |
transform: perspective(400px) rotate3d(0, 1, 0, 10deg); | |
opacity: 1; | |
} | |
80% { | |
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg); | |
transform: perspective(400px) rotate3d(0, 1, 0, -5deg); | |
} | |
to { | |
-webkit-transform: perspective(400px); | |
transform: perspective(400px); | |
} | |
} | |
.flipInY { | |
-webkit-backface-visibility: visible !important; | |
backface-visibility: visible !important; | |
-webkit-animation-name: flipInY; | |
animation-name: flipInY; | |
} | |
@-webkit-keyframes flipOutX { | |
from { | |
-webkit-transform: perspective(400px); | |
transform: perspective(400px); | |
} | |
30% { | |
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); | |
transform: perspective(400px) rotate3d(1, 0, 0, -20deg); | |
opacity: 1; | |
} | |
to { | |
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); | |
transform: perspective(400px) rotate3d(1, 0, 0, 90deg); | |
opacity: 0; | |
} | |
} | |
@keyframes flipOutX { | |
from { | |
-webkit-transform: perspective(400px); | |
transform: perspective(400px); | |
} | |
30% { | |
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); | |
transform: perspective(400px) rotate3d(1, 0, 0, -20deg); | |
opacity: 1; | |
} | |
to { | |
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); | |
transform: perspective(400px) rotate3d(1, 0, 0, 90deg); | |
opacity: 0; | |
} | |
} | |
.flipOutX { | |
-webkit-animation-name: flipOutX; | |
animation-name: flipOutX; | |
-webkit-backface-visibility: visible !important; | |
backface-visibility: visible !important; | |
} | |
@-webkit-keyframes flipOutY { | |
from { | |
-webkit-transform: perspective(400px); | |
transform: perspective(400px); | |
} | |
30% { | |
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg); | |
transform: perspective(400px) rotate3d(0, 1, 0, -15deg); | |
opacity: 1; | |
} | |
to { | |
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); | |
transform: perspective(400px) rotate3d(0, 1, 0, 90deg); | |
opacity: 0; | |
} | |
} | |
@keyframes flipOutY { | |
from { | |
-webkit-transform: perspective(400px); | |
transform: perspective(400px); | |
} | |
30% { | |
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg); | |
transform: perspective(400px) rotate3d(0, 1, 0, -15deg); | |
opacity: 1; | |
} | |
to { | |
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); | |
transform: perspective(400px) rotate3d(0, 1, 0, 90deg); | |
opacity: 0; | |
} | |
} | |
.flipOutY { | |
-webkit-backface-visibility: visible !important; | |
backface-visibility: visible !important; | |
-webkit-animation-name: flipOutY; | |
animation-name: flipOutY; | |
} | |
@-webkit-keyframes lightSpeedIn { | |
from { | |
-webkit-transform: translate3d(100%, 0, 0) skewX(-30deg); | |
transform: translate3d(100%, 0, 0) skewX(-30deg); | |
opacity: 0; | |
} | |
60% { | |
-webkit-transform: skewX(20deg); | |
transform: skewX(20deg); | |
opacity: 1; | |
} | |
80% { | |
-webkit-transform: skewX(-5deg); | |
transform: skewX(-5deg); | |
opacity: 1; | |
} | |
to { | |
-webkit-transform: none; | |
transform: none; | |
opacity: 1; | |
} | |
} | |
@keyframes lightSpeedIn { | |
from { | |
-webkit-transform: translate3d(100%, 0, 0) skewX(-30deg); | |
transform: translate3d(100%, 0, 0) skewX(-30deg); | |
opacity: 0; | |
} | |
60% { | |
-webkit-transform: skewX(20deg); | |
transform: skewX(20deg); | |
opacity: 1; | |
} | |
80% { | |
-webkit-transform: skewX(-5deg); | |
transform: skewX(-5deg); | |
opacity: 1; | |
} | |
to { | |
-webkit-transform: none; | |
transform: none; | |
opacity: 1; | |
} | |
} | |
.lightSpeedIn { | |
-webkit-animation-name: lightSpeedIn; | |
animation-name: lightSpeedIn; | |
-webkit-animation-timing-function: ease-out; | |
animation-timing-function: ease-out; | |
} | |
@-webkit-keyframes lightSpeedOut { | |
from { | |
opacity: 1; | |
} | |
to { | |
-webkit-transform: translate3d(100%, 0, 0) skewX(30deg); | |
transform: translate3d(100%, 0, 0) skewX(30deg); | |
opacity: 0; | |
} | |
} | |
@keyframes lightSpeedOut { | |
from { | |
opacity: 1; | |
} | |
to { | |
-webkit-transform: translate3d(100%, 0, 0) skewX(30deg); | |
transform: translate3d(100%, 0, 0) skewX(30deg); | |
opacity: 0; | |
} | |
} | |
.lightSpeedOut { | |
-webkit-animation-name: lightSpeedOut; | |
animation-name: lightSpeedOut; | |
-webkit-animation-timing-function: ease-in; | |
animation-timing-function: ease-in; | |
} | |
@-webkit-keyframes rotateIn { | |
from { | |
-webkit-transform-origin: center; | |
transform-origin: center; | |
-webkit-transform: rotate3d(0, 0, 1, -200deg); | |
transform: rotate3d(0, 0, 1, -200deg); | |
opacity: 0; | |
} | |
to { | |
-webkit-transform-origin: center; | |
transform-origin: center; | |
-webkit-transform: none; | |
transform: none; | |
opacity: 1; | |
} | |
} | |
@keyframes rotateIn { | |
from { | |
-webkit-transform-origin: center; | |
transform-origin: center; | |
-webkit-transform: rotate3d(0, 0, 1, -200deg); | |
transform: rotate3d(0, 0, 1, -200deg); | |
opacity: 0; | |
} | |
to { | |
-webkit-transform-origin: center; | |
transform-origin: center; | |
-webkit-transform: none; | |
transform: none; | |
opacity: 1; | |
} | |
} | |
.rotateIn { | |
-webkit-animation-name: rotateIn; | |
animation-name: rotateIn; | |
} | |
@-webkit-keyframes rotateInDownLeft { | |
from { | |
-webkit-transform-origin: left bottom; | |
transform-origin: left bottom; | |
-webkit-transform: rotate3d(0, 0, 1, -45deg); | |
transform: rotate3d(0, 0, 1, -45deg); | |
opacity: 0; | |
} | |
to { | |
-webkit-transform-origin: left bottom; | |
transform-origin: left bottom; | |
-webkit-transform: none; | |
transform: none; | |
opacity: 1; | |
} | |
} | |
@keyframes rotateInDownLeft { | |
from { | |
-webkit-transform-origin: left bottom; | |
transform-origin: left bottom; | |
-webkit-transform: rotate3d(0, 0, 1, -45deg); | |
transform: rotate3d(0, 0, 1, -45deg); | |
opacity: 0; | |
} | |
to { | |
-webkit-transform-origin: left bottom; | |
transform-origin: left bottom; | |
-webkit-transform: none; | |
transform: none; | |
opacity: 1; | |
} | |
} | |
.rotateInDownLeft { | |
-webkit-animation-name: rotateInDownLeft; | |
animation-name: rotateInDownLeft; | |
} | |
@-webkit-keyframes rotateInDownRight { | |
from { | |
-webkit-transform-origin: right bottom; | |
transform-origin: right bottom; | |
-webkit-transform: rotate3d(0, 0, 1, 45deg); | |
transform: rotate3d(0, 0, 1, 45deg); | |
opacity: 0; | |
} | |
to { | |
-webkit-transform-origin: right bottom; | |
transform-origin: right bottom; | |
-webkit-transform: none; | |
transform: none; | |
opacity: 1; | |
} | |
} | |
@keyframes rotateInDownRight { | |
from { | |
-webkit-transform-origin: right bottom; | |
transform-origin: right bottom; | |
-webkit-transform: rotate3d(0, 0, 1, 45deg); | |
transform: rotate3d(0, 0, 1, 45deg); | |
opacity: 0; | |
} | |
to { | |
-webkit-transform-origin: right bottom; | |
transform-origin: right bottom; | |
-webkit-transform: none; | |
transform: none; | |
opacity: 1; | |
} | |
} | |
.rotateInDownRight { | |
-webkit-animation-name: rotateInDownRight; | |
animation-name: rotateInDownRight; | |
} | |
@-webkit-keyframes rotateInUpLeft { | |
from { | |
-webkit-transform-origin: left bottom; | |
transform-origin: left bottom; | |
-webkit-transform: rotate3d(0, 0, 1, 45deg); | |
transform: rotate3d(0, 0, 1, 45deg); | |
opacity: 0; | |
} | |
to { | |
-webkit-transform-origin: left bottom; | |
transform-origin: left bottom; | |
-webkit-transform: none; | |
transform: none; | |
opacity: 1; | |
} | |
} | |
@keyframes rotateInUpLeft { | |
from { | |
-webkit-transform-origin: left bottom; | |
transform-origin: left bottom; | |
-webkit-transform: rotate3d(0, 0, 1, 45deg); | |
transform: rotate3d(0, 0, 1, 45deg); | |
opacity: 0; | |
} | |
to { | |
-webkit-transform-origin: left bottom; | |
transform-origin: left bottom; | |
-webkit-transform: none; | |
transform: none; | |
opacity: 1; | |
} | |
} | |
.rotateInUpLeft { | |
-webkit-animation-name: rotateInUpLeft; | |
animation-name: rotateInUpLeft; | |
} | |
@-webkit-keyframes rotateInUpRight { | |
from { | |
-webkit-transform-origin: right bottom; | |
transform-origin: right bottom; | |
-webkit-transform: rotate3d(0, 0, 1, -90deg); | |
transform: rotate3d(0, 0, 1, -90deg); | |
opacity: 0; | |
} | |
to { | |
-webkit-transform-origin: right bottom; | |
transform-origin: right bottom; | |
-webkit-transform: none; | |
transform: none; | |
opacity: 1; | |
} | |
} | |
@keyframes rotateInUpRight { | |
from { | |
-webkit-transform-origin: right bottom; | |
transform-origin: right bottom; | |
-webkit-transform: rotate3d(0, 0, 1, -90deg); | |
transform: rotate3d(0, 0, 1, -90deg); | |
opacity: 0; | |
} | |
to { | |
-webkit-transform-origin: right bottom; | |
transform-origin: right bottom; | |
-webkit-transform: none; | |
transform: none; | |
opacity: 1; | |
} | |
} | |
.rotateInUpRight { | |
-webkit-animation-name: rotateInUpRight; | |
animation-name: rotateInUpRight; | |
} | |
@-webkit-keyframes rotateOut { | |
from { | |
-webkit-transform-origin: center; | |
transform-origin: center; | |
opacity: 1; | |
} | |
to { | |
-webkit-transform-origin: center; | |
transform-origin: center; | |
-webkit-transform: rotate3d(0, 0, 1, 200deg); | |
transform: rotate3d(0, 0, 1, 200deg); | |
opacity: 0; | |
} | |
} | |
@keyframes rotateOut { | |
from { | |
-webkit-transform-origin: center; | |
transform-origin: center; | |
opacity: 1; | |
} | |
to { | |
-webkit-transform-origin: center; | |
transform-origin: center; | |
-webkit-transform: rotate3d(0, 0, 1, 200deg); | |
transform: rotate3d(0, 0, 1, 200deg); | |
opacity: 0; | |
} | |
} | |
.rotateOut { | |
-webkit-animation-name: rotateOut; | |
animation-name: rotateOut; | |
} | |
@-webkit-keyframes rotateOutDownLeft { | |
from { | |
-webkit-transform-origin: left bottom; | |
transform-origin: left bottom; | |
opacity: 1; | |
} | |
to { | |
-webkit-transform-origin: left bottom; | |
transform-origin: left bottom; | |
-webkit-transform: rotate3d(0, 0, 1, 45deg); | |
transform: rotate3d(0, 0, 1, 45deg); | |
opacity: 0; | |
} | |
} | |
@keyframes rotateOutDownLeft { | |
from { | |
-webkit-transform-origin: left bottom; | |
transform-origin: left bottom; | |
opacity: 1; | |
} | |
to { | |
-webkit-transform-origin: left bottom; | |
transform-origin: left bottom; | |
-webkit-transform: rotate3d(0, 0, 1, 45deg); | |
transform: rotate3d(0, 0, 1, 45deg); | |
opacity: 0; | |
} | |
} | |
.rotateOutDownLeft { | |
-webkit-animation-name: rotateOutDownLeft; | |
animation-name: rotateOutDownLeft; | |
} | |
@-webkit-keyframes rotateOutDownRight { | |
from { | |
-webkit-transform-origin: right bottom; | |
transform-origin: right bottom; | |
opacity: 1; | |
} | |
to { | |
-webkit-transform-origin: right bottom; | |
transform-origin: right bottom; | |
-webkit-transform: rotate3d(0, 0, 1, -45deg); | |
transform: rotate3d(0, 0, 1, -45deg); | |
opacity: 0; | |
} | |
} | |
@keyframes rotateOutDownRight { | |
from { | |
-webkit-transform-origin: right bottom; | |
transform-origin: right bottom; | |
opacity: 1; | |
} | |
to { | |
-webkit-transform-origin: right bottom; | |
transform-origin: right bottom; | |
-webkit-transform: rotate3d(0, 0, 1, -45deg); | |
transform: rotate3d(0, 0, 1, -45deg); | |
opacity: 0; | |
} | |
} | |
.rotateOutDownRight { | |
-webkit-animation-name: rotateOutDownRight; | |
animation-name: rotateOutDownRight; | |
} | |
@-webkit-keyframes rotateOutUpLeft { | |
from { | |
-webkit-transform-origin: left bottom; | |
transform-origin: left bottom; | |
opacity: 1; | |
} | |
to { | |
-webkit-transform-origin: left bottom; | |
transform-origin: left bottom; | |
-webkit-transform: rotate3d(0, 0, 1, -45deg); | |
transform: rotate3d(0, 0, 1, -45deg); | |
opacity: 0; | |
} | |
} | |
@keyframes rotateOutUpLeft { | |
from { | |
-webkit-transform-origin: left bottom; | |
transform-origin: left bottom; | |
opacity: 1; | |
} | |
to { | |
-webkit-transform-origin: left bottom; | |
transform-origin: left bottom; | |
-webkit-transform: rotate3d(0, 0, 1, -45deg); | |
transform: rotate3d(0, 0, 1, -45deg); | |
opacity: 0; | |
} | |
} | |
.rotateOutUpLeft { | |
-webkit-animation-name: rotateOutUpLeft; | |
animation-name: rotateOutUpLeft; | |
} | |
@-webkit-keyframes rotateOutUpRight { | |
from { | |
-webkit-transform-origin: right bottom; | |
transform-origin: right bottom; | |
opacity: 1; | |
} | |
to { | |
-webkit-transform-origin: right bottom; | |
transform-origin: right bottom; | |
-webkit-transform: rotate3d(0, 0, 1, 90deg); | |
transform: rotate3d(0, 0, 1, 90deg); | |
opacity: 0; | |
} | |
} | |
@keyframes rotateOutUpRight { | |
from { | |
-webkit-transform-origin: right bottom; | |
transform-origin: right bottom; | |
opacity: 1; | |
} | |
to { | |
-webkit-transform-origin: right bottom; | |
transform-origin: right bottom; | |
-webkit-transform: rotate3d(0, 0, 1, 90deg); | |
transform: rotate3d(0, 0, 1, 90deg); | |
opacity: 0; | |
} | |
} | |
.rotateOutUpRight { | |
-webkit-animation-name: rotateOutUpRight; | |
animation-name: rotateOutUpRight; | |
} | |
@-webkit-keyframes hinge { | |
0% { | |
-webkit-transform-origin: top left; | |
transform-origin: top left; | |
-webkit-animation-timing-function: ease-in-out; | |
animation-timing-function: ease-in-out; | |
} | |
20%, 60% { | |
-webkit-transform: rotate3d(0, 0, 1, 80deg); | |
transform: rotate3d(0, 0, 1, 80deg); | |
-webkit-transform-origin: top left; | |
transform-origin: top left; | |
-webkit-animation-timing-function: ease-in-out; | |
animation-timing-function: ease-in-out; | |
} | |
40%, 80% { | |
-webkit-transform: rotate3d(0, 0, 1, 60deg); | |
transform: rotate3d(0, 0, 1, 60deg); | |
-webkit-transform-origin: top left; | |
transform-origin: top left; | |
-webkit-animation-timing-function: ease-in-out; | |
animation-timing-function: ease-in-out; | |
opacity: 1; | |
} | |
to { | |
-webkit-transform: translate3d(0, 700px, 0); | |
transform: translate3d(0, 700px, 0); | |
opacity: 0; | |
} | |
} | |
@keyframes hinge { | |
0% { | |
-webkit-transform-origin: top left; | |
transform-origin: top left; | |
-webkit-animation-timing-function: ease-in-out; | |
animation-timing-function: ease-in-out; | |
} | |
20%, 60% { | |
-webkit-transform: rotate3d(0, 0, 1, 80deg); | |
transform: rotate3d(0, 0, 1, 80deg); | |
-webkit-transform-origin: top left; | |
transform-origin: top left; | |
-webkit-animation-timing-function: ease-in-out; | |
animation-timing-function: ease-in-out; | |
} | |
40%, 80% { | |
-webkit-transform: rotate3d(0, 0, 1, 60deg); | |
transform: rotate3d(0, 0, 1, 60deg); | |
-webkit-transform-origin: top left; | |
transform-origin: top left; | |
-webkit-animation-timing-function: ease-in-out; | |
animation-timing-function: ease-in-out; | |
opacity: 1; | |
} | |
to { | |
-webkit-transform: translate3d(0, 700px, 0); | |
transform: translate3d(0, 700px, 0); | |
opacity: 0; | |
} | |
} | |
.hinge { | |
-webkit-animation-name: hinge; | |
animation-name: hinge; | |
} | |
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ | |
@-webkit-keyframes rollIn { | |
from { | |
opacity: 0; | |
-webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); | |
transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); | |
} | |
to { | |
opacity: 1; | |
-webkit-transform: none; | |
transform: none; | |
} | |
} | |
@keyframes rollIn { | |
from { | |
opacity: 0; | |
-webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); | |
transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); | |
} | |
to { | |
opacity: 1; | |
-webkit-transform: none; | |
transform: none; | |
} | |
} | |
.rollIn { | |
-webkit-animation-name: rollIn; | |
animation-name: rollIn; | |
} | |
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ | |
@-webkit-keyframes rollOut { | |
from { | |
opacity: 1; | |
} | |
to { | |
opacity: 0; | |
-webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); | |
transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); | |
} | |
} | |
@keyframes rollOut { | |
from { | |
opacity: 1; | |
} | |
to { | |
opacity: 0; | |
-webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); | |
transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); | |
} | |
} | |
.rollOut { | |
-webkit-animation-name: rollOut; | |
animation-name: rollOut; | |
} | |
@-webkit-keyframes zoomIn { | |
from { | |
opacity: 0; | |
-webkit-transform: scale3d(.3, .3, .3); | |
transform: scale3d(.3, .3, .3); | |
} | |
50% { | |
opacity: 1; | |
} | |
} | |
@keyframes zoomIn { | |
from { | |
opacity: 0; | |
-webkit-transform: scale3d(.3, .3, .3); | |
transform: scale3d(.3, .3, .3); | |
} | |
50% { | |
opacity: 1; | |
} | |
} | |
.zoomIn { | |
-webkit-animation-name: zoomIn; | |
animation-name: zoomIn; | |
} | |
@-webkit-keyframes zoomInDown { | |
from { | |
opacity: 0; | |
-webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); | |
transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); | |
-webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); | |
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); | |
} | |
60% { | |
opacity: 1; | |
-webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); | |
transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); | |
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); | |
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); | |
} | |
} | |
@keyframes zoomInDown { | |
from { | |
opacity: 0; | |
-webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); | |
transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); | |
-webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); | |
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); | |
} | |
60% { | |
opacity: 1; | |
-webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); | |
transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); | |
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); | |
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); | |
} | |
} | |
.zoomInDown { | |
-webkit-animation-name: zoomInDown; | |
animation-name: zoomInDown; | |
} | |
@-webkit-keyframes zoomInLeft { | |
from { | |
opacity: 0; | |
-webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); | |
transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); | |
-webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); | |
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); | |
} | |
60% { | |
opacity: 1; | |
-webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); | |
transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); | |
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); | |
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); | |
} | |
} | |
@keyframes zoomInLeft { | |
from { | |
opacity: 0; | |
-webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); | |
transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); | |
-webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); | |
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); | |
} | |
60% { | |
opacity: 1; | |
-webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); | |
transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); | |
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); | |
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); | |
} | |
} | |
.zoomInLeft { | |
-webkit-animation-name: zoomInLeft; | |
animation-name: zoomInLeft; | |
} | |
@-webkit-keyframes zoomInRight { | |
from { | |
opacity: 0; | |
-webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); | |
transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); | |
-webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); | |
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); | |
} | |
60% { | |
opacity: 1; | |
-webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); | |
transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); | |
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); | |
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); | |
} | |
} | |
@keyframes zoomInRight { | |
from { | |
opacity: 0; | |
-webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); | |
transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); | |
-webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); | |
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); | |
} | |
60% { | |
opacity: 1; | |
-webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); | |
transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); | |
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); | |
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); | |
} | |
} | |
.zoomInRight { | |
-webkit-animation-name: zoomInRight; | |
animation-name: zoomInRight; | |
} | |
@-webkit-keyframes zoomInUp { | |
from { | |
opacity: 0; | |
-webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); | |
transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); | |
-webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); | |
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); | |
} | |
60% { | |
opacity: 1; | |
-webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); | |
transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); | |
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); | |
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); | |
} | |
} | |
@keyframes zoomInUp { | |
from { | |
opacity: 0; | |
-webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); | |
transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); | |
-webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); | |
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); | |
} | |
60% { | |
opacity: 1; | |
-webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); | |
transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); | |
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); | |
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); | |
} | |
} | |
.zoomInUp { | |
-webkit-animation-name: zoomInUp; | |
animation-name: zoomInUp; | |
} | |
@-webkit-keyframes zoomOut { | |
from { | |
opacity: 1; | |
} | |
50% { | |
opacity: 0; | |
-webkit-transform: scale3d(.3, .3, .3); | |
transform: scale3d(.3, .3, .3); | |
} | |
to { | |
opacity: 0; | |
} | |
} | |
@keyframes zoomOut { | |
from { | |
opacity: 1; | |
} | |
50% { | |
opacity: 0; | |
-webkit-transform: scale3d(.3, .3, .3); | |
transform: scale3d(.3, .3, .3); | |
} | |
to { | |
opacity: 0; | |
} | |
} | |
.zoomOut { | |
-webkit-animation-name: zoomOut; | |
animation-name: zoomOut; | |
} | |
@-webkit-keyframes zoomOutDown { | |
40% { | |
opacity: 1; | |
-webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); | |
transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); | |
-webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); | |
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); | |
} | |
to { | |
opacity: 0; | |
-webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); | |
transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); | |
-webkit-transform-origin: center bottom; | |
transform-origin: center bottom; | |
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); | |
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); | |
} | |
} | |
@keyframes zoomOutDown { | |
40% { | |
opacity: 1; | |
-webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); | |
transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); | |
-webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); | |
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); | |
} | |
to { | |
opacity: 0; | |
-webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); | |
transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); | |
-webkit-transform-origin: center bottom; | |
transform-origin: center bottom; | |
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); | |
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); | |
} | |
} | |
.zoomOutDown { | |
-webkit-animation-name: zoomOutDown; | |
animation-name: zoomOutDown; | |
} | |
@-webkit-keyframes zoomOutLeft { | |
40% { | |
opacity: 1; | |
-webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); | |
transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); | |
} | |
to { | |
opacity: 0; | |
-webkit-transform: scale(.1) translate3d(-2000px, 0, 0); | |
transform: scale(.1) translate3d(-2000px, 0, 0); | |
-webkit-transform-origin: left center; | |
transform-origin: left center; | |
} | |
} | |
@keyframes zoomOutLeft { | |
40% { | |
opacity: 1; | |
-webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); | |
transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); | |
} | |
to { | |
opacity: 0; | |
-webkit-transform: scale(.1) translate3d(-2000px, 0, 0); | |
transform: scale(.1) translate3d(-2000px, 0, 0); | |
-webkit-transform-origin: left center; | |
transform-origin: left center; | |
} | |
} | |
.zoomOutLeft { | |
-webkit-animation-name: zoomOutLeft; | |
animation-name: zoomOutLeft; | |
} | |
@-webkit-keyframes zoomOutRight { | |
40% { | |
opacity: 1; | |
-webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); | |
transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); | |
} | |
to { | |
opacity: 0; | |
-webkit-transform: scale(.1) translate3d(2000px, 0, 0); | |
transform: scale(.1) translate3d(2000px, 0, 0); | |
-webkit-transform-origin: right center; | |
transform-origin: right center; | |
} | |
} | |
@keyframes zoomOutRight { | |
40% { | |
opacity: 1; | |
-webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); | |
transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); | |
} | |
to { | |
opacity: 0; | |
-webkit-transform: scale(.1) translate3d(2000px, 0, 0); | |
transform: scale(.1) translate3d(2000px, 0, 0); | |
-webkit-transform-origin: right center; | |
transform-origin: right center; | |
} | |
} | |
.zoomOutRight { | |
-webkit-animation-name: zoomOutRight; | |
animation-name: zoomOutRight; | |
} | |
@-webkit-keyframes zoomOutUp { | |
40% { | |
opacity: 1; | |
-webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); | |
transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); | |
-webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); | |
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); | |
} | |
to { | |
opacity: 0; | |
-webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); | |
transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); | |
-webkit-transform-origin: center bottom; | |
transform-origin: center bottom; | |
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); | |
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); | |
} | |
} | |
@keyframes zoomOutUp { | |
40% { | |
opacity: 1; | |
-webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); | |
transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); | |
-webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); | |
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); | |
} | |
to { | |
opacity: 0; | |
-webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); | |
transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); | |
-webkit-transform-origin: center bottom; | |
transform-origin: center bottom; | |
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); | |
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); | |
} | |
} | |
.zoomOutUp { | |
-webkit-animation-name: zoomOutUp; | |
animation-name: zoomOutUp; | |
} | |
@-webkit-keyframes slideInDown { | |
from { | |
-webkit-transform: translate3d(0, -100%, 0); | |
transform: translate3d(0, -100%, 0); | |
visibility: visible; | |
} | |
to { | |
-webkit-transform: translate3d(0, 0, 0); | |
transform: translate3d(0, 0, 0); | |
} | |
} | |
@keyframes slideInDown { | |
from { | |
-webkit-transform: translate3d(0, -100%, 0); | |
transform: translate3d(0, -100%, 0); | |
visibility: visible; | |
} | |
to { | |
-webkit-transform: translate3d(0, 0, 0); | |
transform: translate3d(0, 0, 0); | |
} | |
} | |
.slideInDown { | |
-webkit-animation-name: slideInDown; | |
animation-name: slideInDown; | |
} | |
@-webkit-keyframes slideInLeft { | |
from { | |
-webkit-transform: translate3d(-100%, 0, 0); | |
transform: translate3d(-100%, 0, 0); | |
visibility: visible; | |
} | |
to { | |
-webkit-transform: translate3d(0, 0, 0); | |
transform: translate3d(0, 0, 0); | |
} | |
} | |
@keyframes slideInLeft { | |
from { | |
-webkit-transform: translate3d(-100%, 0, 0); | |
transform: translate3d(-100%, 0, 0); | |
visibility: visible; | |
} | |
to { | |
-webkit-transform: translate3d(0, 0, 0); | |
transform: translate3d(0, 0, 0); | |
} | |
} | |
.slideInLeft { | |
-webkit-animation-name: slideInLeft; | |
animation-name: slideInLeft; | |
} | |
@-webkit-keyframes slideInRight { | |
from { | |
-webkit-transform: translate3d(100%, 0, 0); | |
transform: translate3d(100%, 0, 0); | |
visibility: visible; | |
} | |
to { | |
-webkit-transform: translate3d(0, 0, 0); | |
transform: translate3d(0, 0, 0); | |
} | |
} | |
@keyframes slideInRight { | |
from { | |
-webkit-transform: translate3d(100%, 0, 0); | |
transform: translate3d(100%, 0, 0); | |
visibility: visible; | |
} | |
to { | |
-webkit-transform: translate3d(0, 0, 0); | |
transform: translate3d(0, 0, 0); | |
} | |
} | |
.slideInRight { | |
-webkit-animation-name: slideInRight; | |
animation-name: slideInRight; | |
} | |
@-webkit-keyframes slideInUp { | |
from { | |
-webkit-transform: translate3d(0, 100%, 0); | |
transform: translate3d(0, 100%, 0); | |
visibility: visible; | |
} | |
to { | |
-webkit-transform: translate3d(0, 0, 0); | |
transform: translate3d(0, 0, 0); | |
} | |
} | |
@keyframes slideInUp { | |
from { | |
-webkit-transform: translate3d(0, 100%, 0); | |
transform: translate3d(0, 100%, 0); | |
visibility: visible; | |
} | |
to { | |
-webkit-transform: translate3d(0, 0, 0); | |
transform: translate3d(0, 0, 0); | |
} | |
} | |
.slideInUp { | |
-webkit-animation-name: slideInUp; | |
animation-name: slideInUp; | |
} | |
@-webkit-keyframes slideOutDown { | |
from { | |
-webkit-transform: translate3d(0, 0, 0); | |
transform: translate3d(0, 0, 0); | |
} | |
to { | |
visibility: hidden; | |
-webkit-transform: translate3d(0, 100%, 0); | |
transform: translate3d(0, 100%, 0); | |
} | |
} | |
@keyframes slideOutDown { | |
from { | |
-webkit-transform: translate3d(0, 0, 0); | |
transform: translate3d(0, 0, 0); | |
} | |
to { | |
visibility: hidden; | |
-webkit-transform: translate3d(0, 100%, 0); | |
transform: translate3d(0, 100%, 0); | |
} | |
} | |
.slideOutDown { | |
-webkit-animation-name: slideOutDown; | |
animation-name: slideOutDown; | |
} | |
@-webkit-keyframes slideOutLeft { | |
from { | |
-webkit-transform: translate3d(0, 0, 0); | |
transform: translate3d(0, 0, 0); | |
} | |
to { | |
visibility: hidden; | |
-webkit-transform: translate3d(-100%, 0, 0); | |
transform: translate3d(-100%, 0, 0); | |
} | |
} | |
@keyframes slideOutLeft { | |
from { | |
-webkit-transform: translate3d(0, 0, 0); | |
transform: translate3d(0, 0, 0); | |
} | |
to { | |
visibility: hidden; | |
-webkit-transform: translate3d(-100%, 0, 0); | |
transform: translate3d(-100%, 0, 0); | |
} | |
} | |
.slideOutLeft { | |
-webkit-animation-name: slideOutLeft; | |
animation-name: slideOutLeft; | |
} | |
@-webkit-keyframes slideOutRight { | |
from { | |
-webkit-transform: translate3d(0, 0, 0); | |
transform: translate3d(0, 0, 0); | |
} | |
to { | |
visibility: hidden; | |
-webkit-transform: translate3d(100%, 0, 0); | |
transform: translate3d(100%, 0, 0); | |
} | |
} | |
@keyframes slideOutRight { | |
from { | |
-webkit-transform: translate3d(0, 0, 0); | |
transform: translate3d(0, 0, 0); | |
} | |
to { | |
visibility: hidden; | |
-webkit-transform: translate3d(100%, 0, 0); | |
transform: translate3d(100%, 0, 0); | |
} | |
} | |
.slideOutRight { | |
-webkit-animation-name: slideOutRight; | |
animation-name: slideOutRight; | |
} | |
@-webkit-keyframes slideOutUp { | |
from { | |
-webkit-transform: translate3d(0, 0, 0); | |
transform: translate3d(0, 0, 0); | |
} | |
to { | |
visibility: hidden; | |
-webkit-transform: translate3d(0, -100%, 0); | |
transform: translate3d(0, -100%, 0); | |
} | |
} | |
@keyframes slideOutUp { | |
from { | |
-webkit-transform: translate3d(0, 0, 0); | |
transform: translate3d(0, 0, 0); | |
} | |
to { | |
visibility: hidden; | |
-webkit-transform: translate3d(0, -100%, 0); | |
transform: translate3d(0, -100%, 0); | |
} | |
} | |
.slideOutUp { | |
-webkit-animation-name: slideOutUp; | |
animation-name: slideOutUp; | |
} | |
</style> | |
</defs> | |
<g> | |
<path class="st0" d="M122.2,293c-1.2,0.2-2.5,0.3-3.8,0.3c-14.8,0-26.8-12-26.8-26.8"/> | |
<path class="st0" d="M144.9,271c-1.5,8.8-7.3,16.1-15.2,19.7"/> | |
<path class="st0" d="M269.2,272c0.8,1.8,1.4,3.8,1.5,5.8c0.3,6.4-3.4,12-8.8,14.5"/> | |
<path class="st0" d="M227.4,145.9c3.5-9,12.3-15.4,22.6-15.4c2.1,0,4.1,0.3,6,0.7"/> | |
<path class="st0" d="M265.9,136.3c5.1,4.5,8.4,11,8.4,18.4c0,3.4-0.7,6.5-1.9,9.5"/> | |
<path class="st0" d="M377.9,257.4c-6.6,4.8-14.8,7.7-23.6,7.7c-13.6,0-25.7-6.8-33-17.2"/> | |
<path class="st0" d="M333.7,141.5c1.1,16.2,9.7,34.9,38,48.5"/> | |
<path class="st0" d="M339.6,76.2c4.3,4.1,7,9.9,7,16.3c0,4.4-1.2,8.4-3.4,11.9l-1.2,2c0,0-7,11.7-8.2,27.1"/> | |
<path class="st0" d="M303.3,84.3C306.6,76,314.7,70,324.2,70c6,0,11.4,2.3,15.4,6.1"/> | |
<path class="st0" d="M107.3,180.1c4.5-13.8,17.5-23.8,32.8-23.8c19,0,34.5,15.4,34.5,34.5c0,3.3-0.5,6.6-1.4,9.6"/> | |
<path class="st0" d="M92.6,254.3c-0.4,4-0.6,7.2-0.8,9.2"/> | |
<path class="st0" d="M107.3,180.1c-4.7,14.7-8,29.6-10.3,42.8c0,0-0.8,4.7-1.2,7.3c-0.8,5.2-1.5,10-2,14.3"/> | |
<path class="st0" d="M101.6,264.5c0.6-10.1,2.1-44,13.6-80.1"/> | |
<path class="st0" d="M110.9,257.9c0.6-10.1,1.3-35.1,12.7-71.3"/> | |
<path class="st0" d="M91.7,266.4c0,0,0-1,0.2-2.9"/> | |
<path class="st0" d="M78.1,219.8c-0.6,3-1.4,7.7-1.9,12.4"/> | |
<path class="st0" d="M155.4,267c0.8-8.2,4-15.6,6.6-21.3"/> | |
<path class="st0" d="M165.5,214.2"/> | |
<path class="st0" d="M144.9,271c0,0,3.7-28.8,20.6-56.8"/> | |
<path class="st0" d="M135.3,267.8c0,0,1.3-21.7,18.1-49.8"/> | |
<path class="st0" d="M125.8,267.9c0,0,3.8-36.2,29-69"/> | |
<path class="st0" d="M145.3,156.6"/> | |
<path class="st0" d="M348,117.1c0,0-21.2,37.6,22.3,59.9"/> | |
<path class="st0" d="M357.4,116.6c0,0-4.2,7.1-5.2,16.8"/> | |
<path class="st0" d="M368.9,164.7c-0.5,0.5-13.6-9.5-15.8-20"/> | |
<path class="st0" d="M288.9,145.4c0,0,1.1-23.4,14.1-60.1"/> | |
<path class="st0" d="M315.4,239.2c0,0-21-24.1-25.6-69.2"/> | |
<path class="st0" d="M289.2,206.7c-1.9-4-3.2-7.6-4.1-12.8"/> | |
<path class="st0" d="M309.6,209.8c11.2,26.5,26.4,40.1,26.4,40.1"/> | |
<path class="st0" d="M310.2,92.2c-12.2,36.4-12.4,61.8-12.4,61.8c0.4,17.9,3.7,33.4,8.1,46.4"/> | |
<path class="st0" d="M338.2,237.8c-10.7-13.2-29.6-41.4-30.7-86.4c0,0,0.1-20,9.4-47.4"/> | |
<path class="st0" d="M216.8,168.1c3.3-4.1,6.3-9.4,8.9-16.3"/> | |
<path class="st0" d="M203.2,189.1c8.4-2.9,16.8-9.7,23.9-21.9"/> | |
<path class="st0" d="M198.7,214.2c-2,5.2-4.6,10.1-7.8,14.6"/> | |
<path class="st0" d="M218.7,191c-3.3,2.6-6.7,4.5-10.1,5.9c-3.7,1.4-6.2,4.7-7,8.6c-0.2,0.8-0.3,1.5-0.5,2.2"/> | |
<path class="st0" d="M202.8,228.4c2.7-4.9,4.5-9.6,6.1-15.2c0.2-0.7,0.4-1.5,0.6-2.3c0,0,0-0.1,0-0.1c0.8-3.8,3.6-6.9,7.1-8.6 | |
l2.1-1.1"/> | |
<path class="st0" d="M243.1,151.8c-6.9,19.1-15.7,32.3-24.4,39.2"/> | |
<path class="st0" d="M258.1,245.9c-5.8-20.1-8.2-48.9,10.8-75.9"/> | |
<path class="st0" d="M269.2,272c0,0-4.6-7.3-8.8-18.8"/> | |
<path class="st0" d="M275.7,267.8c0,0-30.6-51.2,3-97.8"/> | |
<path class="st0" d="M277.8,250.5c-3.8-12.4-13-38.1,4.6-68.7"/> | |
<path class="st0" d="M354.2,104c-0.7,2.4-1.6,4.7-2.7,6.8"/> | |
<path class="st0" d="M366.1,148.1c-2.7-4.2-4.4-9.1-4.8-14.5c-0.1-1.9-0.1-3.9,0.1-5.7"/> | |
<path class="st0" d="M377.6,245.2c-5.7,6.4-14,10.5-23.3,10.5c-4.2,0-8.2-0.8-11.8-2.3"/> | |
<path class="st0" d="M374.1,217.8c0.7,2.1,1.1,4.4,1.1,6.7"/> | |
<path class="st0" d="M375.2,224.5c0,11.5-9.4,20.9-20.9,20.9c-6.5,0-12.3-2.9-16.1-7.6"/> | |
<path class="st0" d="M357.7,216c3.5,1.7,5.9,5.2,5.9,9.4"/> | |
<path class="st0" d="M318.7,97c0.9-4.8,4.1-7.8,8.3-6.8"/> | |
<path class="st0" d="M363.6,225.4c0,5.7-4.7,10.4-10.4,10.4c-3.1,0-7.3-3.3-8.5-4.7l-0.9-1.2c-8.4-12.2-21.2-36.1-25.7-65.1"/> | |
<path class="st0" d="M377.9,269.1c-7,3.8-15.1,5.9-23.7,5.9c-11.9,0-22.7-4.1-31.3-11"/> | |
<path class="st0" d="M341.5,284c-3.3-0.7-6.4-1.7-9.5-2.9"/> | |
<path class="st0" d="M377.2,280.8c-7.1,2.9-14.8,4.5-22.9,4.5c-2.2,0-4.3-0.1-6.4-0.3"/> | |
<path class="st0" d="M356.8,295c-1,0-2.1,0.1-3.1,0.1c-5,0-9.8-0.5-14.5-1.5"/> | |
<path class="st0" d="M356.8,295"/> | |
<path class="st0" d="M365.7,294.1c-1,0.2-2.1,0.3-3.1,0.5"/> | |
<path class="st0" d="M376.1,291.4c-3.4,1.1-6.9,2-10.4,2.6"/> | |
<path class="st0" d="M374.1,301c-6.6,1.8-13.5,2.7-20.7,2.7c-2.7,0-5.3-0.1-7.9-0.4"/> | |
<path class="st0" d="M369.5,311.5c-5,0.9-10.1,1.3-15.3,1.3c-0.6,0-1.2,0-1.8,0"/> | |
<path class="st0" d="M329.6,164.2c10.9,18.6,23.9,27.4,43.6,37.9"/> | |
<path class="st0" d="M336.7,98.7c0.5,0-24.3,32.5-7.1,65.5"/> | |
<path class="st0" d="M328.3,177.5c10,13.8,23,23.7,39.2,32.4"/> | |
<path class="st0" d="M333.6,194.8c6.5,8.1,14.1,14.5,17.8,17.3"/> | |
<path class="st0" d="M336.3,99.6c3.1-5.3,2.4-12.2-2.1-16.7c-5.4-5.4-14.1-5.4-19.5,0c-0.5,0.5-0.8,0.8-1.2,1.3"/> | |
<path class="st0" d="M355.6,225.4c-0.5,1.1-1.6,1.8-2.9,1.8"/> | |
<path class="st0" d="M233.7,127.3c4.5-2.5,9.4-4.7,16.6-4.7"/> | |
<path class="st0" d="M238.2,118c1.3-0.5,2.6-0.9,3.9-1.2"/> | |
<path class="st0" d="M288.9,161.4c-0.1-1.7-0.2-3.5-0.1-5.2"/> | |
<path class="st0" d="M230.7,160.4c1.5-3.3,3-6.9,4.3-10.8c0.4-1.2,1.1-2.6,1.1-2.6c2.7-4.9,7.9-8.2,13.9-8.2 | |
c8.8,0,15.9,7.1,15.9,15.9c0,1.8-0.3,3.6-0.9,5.3c0,0-0.6,1.6-1.1,2.2c-8.5,12.8-13.6,25-16.4,36.5"/> | |
<path class="st0" d="M123.7,186.6c2.6-8.4,8.5-12.8,16.4-12.8c9.3,0,16.9,7.6,16.9,16.9c0,3-0.8,5.7-2.1,8.2"/> | |
<path class="st0" d="M135.3,267.8c-0.7,8.7-8,15.5-16.8,15.5c-9.3,0-16.9-7.6-16.9-16.9c0-1-0.2-1,0-1.9"/> | |
<path class="st0" d="M243.1,151.8c1.1-2.7,3.8-4.6,6.9-4.6c4.2,0,7.5,3.4,7.5,7.5c0,1.3-0.3,2.6-1,3.7"/> | |
<path class="st0" d="M142.3,200.8c-6.3,10.1-17.3,29.7-21.1,49.1"/> | |
<path class="st0" d="M147,187.8c-1.1-2.7-3.8-4.6-6.9-4.6c-3.6,0-6.8,1.7-8.3,6c0,0-1.8,4.9-4.5,15.9"/> | |
<path class="st0" d="M125.8,267.9c-0.7,3.5-3.7,6.1-7.4,6.1c-4.2,0-7.5-3.4-7.5-7.5"/> | |
<path class="st0" d="M322.9,62.3c0,0-6.8,0.1-15.3,4.7"/> | |
<path class="st0" d="M274.6,133.4c4.9,5.7,7.9,13.1,7.9,21.2c0,6-1.2,10.7-4,15.5"/> | |
<path class="st0" d="M280.6,127.6c1.2,1.4,0.9,0.7,1.9,2.3"/> | |
<path class="st0" d="M275.3,267.1c1.8,3.1,2.8,6.6,3,10.4c0.5,10-5.5,18.7-14.3,22.2"/> | |
<path class="st0" d="M281.9,293.7c-3.2,5.5-8,10-13.9,12.6"/> | |
<path class="st0" d="M90,289.2c-4.7-5.8-7.4-13.1-7.4-21.4"/> | |
<path class="st0" d="M141.3,294.2c-6.2,5.1-14.1,8.2-22.8,8.2c-9,0-17.3-3-23.6-8.2"/> | |
<path class="st0" d="M144.9,165.5c11.9,2.3,20.8,12.7,20.8,25.2c0,3.4-0.7,6.6-1.9,9.6c0,0-3.1,5.4-5.2,8.8"/> | |
<path class="st0" d="M118.4,176.9c3.5-5.6,9.2-9.7,15.8-11.2"/> | |
<path class="st0" d="M125.8,311c-2.4,0.4-4.8,0.6-7.3,0.6c-16.4,0-30.7-8.7-38.6-21.7"/> | |
<path class="st0" d="M110,319.3c-7.4-1.2-14.2-3.8-20.3-7.7"/> | |
<path class="st0" d="M179.5,172.2c2.6,5.6,4.1,11.9,4.1,18.5c0,10-3.4,19.2-9.1,26.6"/> | |
<path class="st0" d="M93.7,193.9c-9.9,38.3-11.1,73.9-11.1,73.9"/> | |
<path class="st0" d="M170.8,159.9c-7.9-7.9-18.8-12.8-30.8-12.8c-17.8,0-33.2,10.7-39.9,26.1c0,0-1.8,4.3-2.7,7.4 | |
c-0.6,1.9-1.2,3.8-1.7,5.7"/> | |
<path class="st0" d="M262.2,275.7c0.3,0.8,0.5,1.7,0.5,2.6c0,2.6-1.4,4.9-3.4,6.2"/> | |
<path class="st0" d="M193.1,186.3c0.1,1.4,0.2,2.9,0.2,4.4c0,14.1-6.5,31.6-21.8,45.1"/> | |
<path class="st0" d="M104.6,151c9.4-8.4,21.8-13.5,35.4-13.5c1.7,0,3.5,0.1,5.2,0.2"/> | |
<path class="st0" d="M92.7,167.2c-0.4,1-0.9,2.1-1.3,3.1c-1.1,3.1-2.6,7.2-4,12c-2.9,9.9-5.6,19.6-7.6,28.8"/> | |
<path class="st0" d="M104.6,151c-1.1,1-2.1,2-3.1,3"/> | |
<path class="st0" d="M259.1,270.6c-5.7-9.4-17.6-33.3-13-64"/> | |
<path class="st0" d="M238.6,249.9c-7.5-32.1-3.7-62.7,18-91.6"/> | |
<path class="st0" d="M227.8,239.7c-2.2-13.9-2.5-29.8,1.5-46.1"/> | |
<path class="st0" d="M218,233.4c-1-6.5-0.5-13.6,0-21"/> | |
<line class="st0" x1="169.8" y1="224.4" x2="168.3" y2="226.9"/> | |
<path class="st0" d="M147.6,193.6c0.1,1-0.3,1.8-1.2,2.4"/> | |
</g> | |
</svg> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment