Created
November 28, 2017 03:11
-
-
Save BrandonKlotz/8c8dcee4768cc7326074fcc64c3231b4 to your computer and use it in GitHub Desktop.
Aninated Buildings 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 500 500" style="enable-background:new 0 0 500 500;" xml:space="preserve"> | |
<defs> | |
<style type="text/css"> | |
.st0{ | |
fill:none; | |
stroke:black; | |
stroke-width:.5; | |
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 id="JW"> | |
<polyline class="st0" points="178.1,286.7 178.1,149.8 242.5,184.1 242.5,332.1 185.1,332.1 185.1,319.9 "/> | |
<line class="st0" x1="201.2" y1="287.6" x2="242.5" y2="309.4"/> | |
<path class="st0" d="M242.5,186.1"/> | |
<line class="st0" x1="201.2" y1="162" x2="201.2" y2="332.1"/> | |
<line class="st0" x1="211.5" y1="167.6" x2="211.5" y2="293.1"/> | |
<line class="st0" x1="221.8" y1="172.9" x2="221.8" y2="298.4"/> | |
<line class="st0" x1="232.1" y1="178.6" x2="232.1" y2="303.8"/> | |
<circle class="st0" cx="232.8" cy="317.5" r="4.6"/> | |
<line class="st0" x1="206" y1="284.5" x2="209.4" y2="284.5"/> | |
<line class="st0" x1="206" y1="280.6" x2="209.4" y2="280.6"/> | |
<line class="st0" x1="206" y1="272.6" x2="209.4" y2="272.6"/> | |
<line class="st0" x1="206" y1="276.6" x2="209.4" y2="276.6"/> | |
<line class="st0" x1="206" y1="268.6" x2="209.4" y2="268.6"/> | |
<line class="st0" x1="206" y1="260.7" x2="209.4" y2="260.7"/> | |
<line class="st0" x1="206" y1="264.7" x2="209.4" y2="264.7"/> | |
<line class="st0" x1="206" y1="256.7" x2="209.4" y2="256.7"/> | |
<g> | |
<line class="st0" x1="180.5" y1="279.7" x2="198.8" y2="279.7"/> | |
<line class="st0" x1="180.5" y1="283.6" x2="198.8" y2="283.6"/> | |
<line class="st0" x1="180.5" y1="275.7" x2="198.8" y2="275.7"/> | |
<line class="st0" x1="180.5" y1="267.7" x2="198.8" y2="267.7"/> | |
<line class="st0" x1="180.5" y1="271.7" x2="198.8" y2="271.7"/> | |
<line class="st0" x1="180.5" y1="263.7" x2="198.8" y2="263.7"/> | |
<line class="st0" x1="180.5" y1="259.7" x2="198.8" y2="259.7"/> | |
</g> | |
<g> | |
<line class="st0" x1="226.7" y1="281.4" x2="230.1" y2="281.4"/> | |
<line class="st0" x1="226.7" y1="275.1" x2="230.1" y2="275.1"/> | |
<line class="st0" x1="226.7" y1="268.7" x2="230.1" y2="268.7"/> | |
<line class="st0" x1="226.7" y1="262.3" x2="230.1" y2="262.3"/> | |
<line class="st0" x1="226.7" y1="256" x2="230.1" y2="256"/> | |
<line class="st0" x1="226.7" y1="249.6" x2="230.1" y2="249.6"/> | |
</g> | |
<g> | |
<line class="st0" x1="216.5" y1="281.4" x2="219.9" y2="281.4"/> | |
<line class="st0" x1="216.5" y1="275.1" x2="219.9" y2="275.1"/> | |
<line class="st0" x1="216.5" y1="268.7" x2="219.9" y2="268.7"/> | |
<line class="st0" x1="216.5" y1="262.3" x2="219.9" y2="262.3"/> | |
<line class="st0" x1="216.5" y1="256" x2="219.9" y2="256"/> | |
<line class="st0" x1="216.5" y1="249.6" x2="219.9" y2="249.6"/> | |
</g> | |
<line class="st0" x1="237.1" y1="281.4" x2="240.5" y2="281.4"/> | |
<line class="st0" x1="237.1" y1="275.1" x2="240.5" y2="275.1"/> | |
<line class="st0" x1="237.1" y1="268.7" x2="240.5" y2="268.7"/> | |
<line class="st0" x1="237.1" y1="262.3" x2="240.5" y2="262.3"/> | |
<line class="st0" x1="237.1" y1="256" x2="240.5" y2="256"/> | |
<line class="st0" x1="237.1" y1="249.6" x2="240.5" y2="249.6"/> | |
</g> | |
<g id="Building"> | |
<line class="st0" x1="99.9" y1="316.7" x2="99.9" y2="300.6"/> | |
<path class="st0" d="M99.9,316.7"/> | |
<polyline class="st0" points="185.1,319.9 185.1,331.9 99.9,331.9 99.9,320.1 "/> | |
<line class="st0" x1="185.1" y1="300.7" x2="185.1" y2="316.9"/> | |
<rect x="98" y="287" class="st0" width="89" height="3.3"/> | |
<rect x="98.7" y="297.6" class="st0" width="87.6" height="3"/> | |
<polyline class="st0" points="185.2,319.9 98.7,319.9 98.7,316.9 186.3,316.9 186.3,319.9 185.2,319.9 "/> | |
<polyline class="st0" points="99.9,297.6 99.9,290.3 185.1,290.3 185.1,297.6 "/> | |
<g> | |
<g> | |
<line class="st0" x1="183.9" y1="300.6" x2="183.9" y2="316.6"/> | |
<line class="st0" x1="183.9" y1="290.3" x2="183.9" y2="297.6"/> | |
</g> | |
<g> | |
<line class="st0" x1="174.1" y1="300.6" x2="174.1" y2="316.6"/> | |
<line class="st0" x1="175.2" y1="300.6" x2="175.2" y2="316.6"/> | |
<line class="st0" x1="175.2" y1="290.3" x2="175.2" y2="297.6"/> | |
<line class="st0" x1="174.1" y1="290.3" x2="174.1" y2="297.6"/> | |
</g> | |
<g> | |
<line class="st0" x1="164.9" y1="300.6" x2="164.9" y2="316.6"/> | |
<line class="st0" x1="166.1" y1="300.6" x2="166.1" y2="316.6"/> | |
<line class="st0" x1="166.1" y1="290.3" x2="166.1" y2="297.6"/> | |
<line class="st0" x1="164.9" y1="290.3" x2="164.9" y2="297.6"/> | |
</g> | |
<g> | |
<line class="st0" x1="155.7" y1="300.6" x2="155.7" y2="316.6"/> | |
<line class="st0" x1="156.9" y1="300.6" x2="156.9" y2="316.6"/> | |
<line class="st0" x1="156.9" y1="290.3" x2="156.9" y2="297.6"/> | |
<line class="st0" x1="155.7" y1="290.3" x2="155.7" y2="297.6"/> | |
</g> | |
<g> | |
<line class="st0" x1="146.6" y1="300.6" x2="146.6" y2="316.6"/> | |
<line class="st0" x1="147.7" y1="300.6" x2="147.7" y2="316.6"/> | |
<line class="st0" x1="147.7" y1="290.3" x2="147.7" y2="297.6"/> | |
<line class="st0" x1="146.6" y1="290.3" x2="146.6" y2="297.6"/> | |
</g> | |
<g> | |
<line class="st0" x1="137.4" y1="300.7" x2="137.4" y2="316.7"/> | |
<line class="st0" x1="138.5" y1="300.7" x2="138.5" y2="316.7"/> | |
<line class="st0" x1="138.5" y1="290.3" x2="138.5" y2="297.6"/> | |
<line class="st0" x1="137.4" y1="290.3" x2="137.4" y2="297.6"/> | |
</g> | |
<g> | |
<line class="st0" x1="128.2" y1="300.7" x2="128.2" y2="316.7"/> | |
<line class="st0" x1="129.3" y1="300.7" x2="129.3" y2="316.7"/> | |
<line class="st0" x1="129.3" y1="290.3" x2="129.3" y2="297.6"/> | |
<line class="st0" x1="128.2" y1="290.3" x2="128.2" y2="297.6"/> | |
</g> | |
<g> | |
<line class="st0" x1="119" y1="300.7" x2="119" y2="316.7"/> | |
<line class="st0" x1="120.1" y1="300.7" x2="120.1" y2="316.7"/> | |
<line class="st0" x1="120.1" y1="290.3" x2="120.1" y2="297.6"/> | |
<line class="st0" x1="119" y1="290.3" x2="119" y2="297.6"/> | |
</g> | |
<g> | |
<line class="st0" x1="109.8" y1="300.7" x2="109.8" y2="316.7"/> | |
<line class="st0" x1="111" y1="300.7" x2="111" y2="316.7"/> | |
<line class="st0" x1="111" y1="290.3" x2="111" y2="297.6"/> | |
<line class="st0" x1="109.8" y1="290.3" x2="109.8" y2="297.6"/> | |
</g> | |
<g> | |
<line class="st0" x1="101.2" y1="300.7" x2="101.2" y2="316.7"/> | |
<line class="st0" x1="101.2" y1="290.3" x2="101.2" y2="297.6"/> | |
</g> | |
</g> | |
</g> | |
<g id="Bridge"> | |
<rect x="242.5" y="328.6" class="st0" width="158.9" height="3.3"/> | |
<rect x="242.3" y="332.1" class="st0" width="3.2" height="18.9"/> | |
<rect x="320.2" y="332.1" class="st0" width="3.2" height="18.9"/> | |
<rect x="398.1" y="332.1" class="st0" width="3.2" height="18.9"/> | |
<path class="st0" d="M242.2,347.7c11.8-7.7,25.8-12.2,40.9-12.2c14.8,0,28.7,4.3,40.3,11.8"/> | |
<path class="st0" d="M320.2,347.3c11.8-7.7,25.8-12.2,40.9-12.2c14.8,0,28.7,4.3,40.3,11.8"/> | |
<g> | |
<line class="st0" x1="251.1" y1="332.1" x2="251.1" y2="339.2"/> | |
<line class="st0" x1="253.1" y1="332.1" x2="253.1" y2="338.5"/> | |
</g> | |
<g> | |
<line class="st0" x1="259.9" y1="331.9" x2="259.9" y2="336"/> | |
<line class="st0" x1="261.9" y1="331.9" x2="261.9" y2="335.6"/> | |
</g> | |
<g> | |
<line class="st0" x1="268.7" y1="332.1" x2="268.7" y2="334.5"/> | |
<line class="st0" x1="270.7" y1="332.1" x2="270.7" y2="334.2"/> | |
</g> | |
<g> | |
<line class="st0" x1="277.5" y1="331.9" x2="277.5" y2="333.6"/> | |
<line class="st0" x1="279.5" y1="331.9" x2="279.5" y2="333.4"/> | |
</g> | |
<g> | |
<g> | |
<line class="st0" x1="314.7" y1="332.1" x2="314.7" y2="339.2"/> | |
<line class="st0" x1="312.8" y1="332.1" x2="312.8" y2="338.5"/> | |
</g> | |
<g> | |
<line class="st0" x1="305.9" y1="331.9" x2="305.9" y2="336"/> | |
<line class="st0" x1="304" y1="331.9" x2="304" y2="335.6"/> | |
</g> | |
<g> | |
<line class="st0" x1="297.1" y1="332.1" x2="297.1" y2="334.5"/> | |
<line class="st0" x1="295.2" y1="332.1" x2="295.2" y2="334.2"/> | |
</g> | |
<g> | |
<line class="st0" x1="288.3" y1="331.9" x2="288.3" y2="333.6"/> | |
<line class="st0" x1="286.4" y1="331.9" x2="286.4" y2="333.4"/> | |
</g> | |
</g> | |
<g> | |
<g> | |
<line class="st0" x1="329" y1="332.1" x2="329" y2="339.2"/> | |
<line class="st0" x1="331" y1="332.1" x2="331" y2="338.5"/> | |
</g> | |
<g> | |
<line class="st0" x1="337.8" y1="331.9" x2="337.8" y2="336"/> | |
<line class="st0" x1="339.8" y1="331.9" x2="339.8" y2="335.6"/> | |
</g> | |
<g> | |
<line class="st0" x1="346.6" y1="332.1" x2="346.6" y2="334.5"/> | |
<line class="st0" x1="348.6" y1="332.1" x2="348.6" y2="334.2"/> | |
</g> | |
<g> | |
<line class="st0" x1="355.4" y1="331.9" x2="355.4" y2="333.5"/> | |
<line class="st0" x1="357.4" y1="331.9" x2="357.4" y2="333.4"/> | |
</g> | |
<g> | |
<g> | |
<line class="st0" x1="392.6" y1="332.1" x2="392.6" y2="339.2"/> | |
<line class="st0" x1="390.7" y1="332.1" x2="390.7" y2="338.5"/> | |
</g> | |
<g> | |
<line class="st0" x1="383.8" y1="331.9" x2="383.8" y2="336"/> | |
<line class="st0" x1="381.9" y1="331.9" x2="381.9" y2="335.6"/> | |
</g> | |
<g> | |
<line class="st0" x1="375" y1="332.1" x2="375" y2="334.5"/> | |
<line class="st0" x1="373.1" y1="332.1" x2="373.1" y2="334.2"/> | |
</g> | |
<g> | |
<line class="st0" x1="366.2" y1="331.9" x2="366.2" y2="333.5"/> | |
<line class="st0" x1="364.3" y1="331.9" x2="364.3" y2="333.4"/> | |
</g> | |
</g> | |
</g> | |
</g> | |
<g id="Sun"> | |
<circle class="st0" cx="297.1" cy="223" r="27"/> | |
</g> | |
</svg> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment