From 715b21c80c02dad6fb387731ad9bc9df051cb034 Mon Sep 17 00:00:00 2001 From: Ivan Popelyshev Date: Tue, 7 Jun 2016 18:22:37 +0300 Subject: [PATCH] initial commit --- .gitignore | 28 + LICENSE | 22 + README.md | 2 +- css/main.css | 3378 +++++++++++++++++++++++++++++++++++++ gulp/header.txt | 12 + gulp/tasks/build.js | 6 + gulp/tasks/clean.js | 6 + gulp/tasks/dev.js | 6 + gulp/tasks/jsdoc.js | 11 + gulp/tasks/jshint.js | 12 + gulp/tasks/scripts.js | 6 + gulp/tasks/watch.js | 19 + gulp/util/bundle.js | 76 + gulp/util/handleErrors.js | 26 + gulp/util/jsdoc.conf.json | 55 + gulpfile.js | 33 + package.json | 67 + src/Const.js | 25 + src/ContainerMixin.js | 14 + src/DisplayGroup.js | 14 + src/DisplayObjectMixin.js | 14 + src/index.js | 36 + 22 files changed, 3867 insertions(+), 1 deletion(-) create mode 100644 .gitignore create mode 100644 LICENSE create mode 100644 css/main.css create mode 100644 gulp/header.txt create mode 100644 gulp/tasks/build.js create mode 100644 gulp/tasks/clean.js create mode 100644 gulp/tasks/dev.js create mode 100644 gulp/tasks/jsdoc.js create mode 100644 gulp/tasks/jshint.js create mode 100644 gulp/tasks/scripts.js create mode 100644 gulp/tasks/watch.js create mode 100644 gulp/util/bundle.js create mode 100644 gulp/util/handleErrors.js create mode 100644 gulp/util/jsdoc.conf.json create mode 100644 gulpfile.js create mode 100644 package.json create mode 100644 src/Const.js create mode 100644 src/ContainerMixin.js create mode 100644 src/DisplayGroup.js create mode 100644 src/DisplayObjectMixin.js create mode 100644 src/index.js diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..72a72d7 --- /dev/null +++ b/.gitignore @@ -0,0 +1,28 @@ +# sublime text files +*.sublime* +*.*~*.TMP + +# temp files +.DS_Store +Thumbs.db +Desktop.ini +npm-debug.log + +# project files +.project + +# vim swap files +*.sw* + +# emacs temp files +*~ +\#*# + +# project ignores +!.gitkeep +*__temp +node_modules +docs/ + +# jetBrains IDE ignores +.idea diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..02c5e14 --- /dev/null +++ b/LICENSE @@ -0,0 +1,22 @@ +The MIT License (MIT) + +Copyright (c) 2015 Ivan Popelyshev + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. + diff --git a/README.md b/README.md index 9a49a53..72511de 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,2 @@ # pixi-display -Allows to change rendering order of pixi-v4 containers without changing the stage +Allows to change rendering order of pixi-v4 containers without changing the scene graph diff --git a/css/main.css b/css/main.css new file mode 100644 index 0000000..d164508 --- /dev/null +++ b/css/main.css @@ -0,0 +1,3378 @@ +@charset "UTF-8"; +html { + font-size: 10px; +} +body { + background: transparent; + margin: 0; + color: #1d1b1b; + font-size: 1.6rem; +} +ul { + list-style: none; + margin: 0; + padding: 0; +} +ul li { + margin: 0; + display: inline-block; +} +.game-canvas { + position: absolute; + /*image-rendering: pixelated; + image-rendering: -moz-crisp-edges; + image-rendering: -webkit-optimize-contrast; + image-rendering: -o-crisp-edges; + image-rendering: optimize-contrast; + -ms-interpolation-mode: nearest-neighbor;*/ +} +.outer-container { + position: absolute; + left: 0px; + right: 0px; + top: 0px; + bottom: 0px; + overflow: hidden; +} +.inner-container { + position: relative; + overflow: hidden; +} +#frontCanvas { + pointer-events: none; +} +/* Buttons */ +/* text */ +/* window */ +@font-face { + font-family: 'GProBold'; + src: url('../assets/fonts/G_Pro_Bold.otf') format("opentype"); + /* Safari, Android, iOS */ +} +@font-face { + font-family: 'GProExtend'; + src: url('../assets/fonts/G_Pro_Extend.otf') format("opentype"); + /* Safari, Android, iOS */ +} +@font-face { + font-family: 'GProExtendBold'; + src: url('../assets/fonts/G_Pro_Extended_Bold.otf') format("opentype"); + /* Safari, Android, iOS */ +} +@font-face { + font-family: 'GProMedium'; + src: url('../assets/fonts/G_Pro_Medium.otf') format("opentype"); + /* Safari, Android, iOS */ +} +@font-face { + font-family: 'GRegular'; + src: url('../assets/fonts/G_Regular.otf') format("opentype"); + /* Safari, Android, iOS */ +} +@font-face { + font-family: 'FSrail55'; + src: url('../assets/fonts/FSRAIL55.ttf') format('truetype'); + /* Safari, Android, iOS */ +} +@font-face { + font-family: 'FSrail75'; + src: url('../assets/fonts/FSRAIL75.ttf') format('truetype'); + /* Safari, Android, iOS */ +} +.view-wrapper { + display: inline-block; +} +.viewport { + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; +} +/* fullscreen button */ +.fullscreen-btn { + position: absolute; + top: 0; + left: 0; + width: 5.3rem; + height: 5.3rem; + background-image: url('../assets/fullscreen.png'); + background-repeat: no-repeat; + background-size: 100% 100%; + cursor: pointer; + top: 0.2rem; + left: 0.2rem; +} +.uiport { + background: transparent; + background-image: url('../assets/ui/bg_back_2.jpg'); + background-repeat: no-repeat; + background-size: 100% 100%; + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; +} +.uiport.game-active { + display: none; +} +.uiport .game-name { + position: absolute; + top: 17%; + left: 6.5%; + width: 22%; + height: 20%; + background-image: url('../assets/ui/game_name.png'); + background-repeat: no-repeat; + background-size: contain; +} +.uiport .rjd-name { + position: absolute; + bottom: 5%; + right: 3%; + width: 11.5%; + height: 12%; + background-image: url('../assets/ui/rjd_logo_white.png'); + background-repeat: no-repeat; + background-size: contain; +} +.main-ui { + width: 100%; + height: 100%; +} +.game-menu.start { + width: 20%; + position: absolute; + right: 5%; + top: 10%; +} +.game-menu.bottom { + position: absolute; + bottom: 1rem; +} +.game-menu .game-menu-list { + text-align: center; +} +.game-menu .game-menu-item { + display: inline-table; + position: relative; + width: 25.7rem; + height: 4.8rem; + min-width: 60px; + min-height: 14px; + border-radius: 0.5rem; + margin-bottom: 3%; + background-color: #1b73a5; + box-sizing: border-box; + overflow: hidden; + color: #fdf9ed; +} +.game-menu .game-menu-item.play-item { + background-color: #ec2e0c; +} +.game-menu .game-menu-item.play-item:hover { + background-color: #f55336; +} +.game-menu .game-menu-item:hover { + background-color: #2292d1; + cursor: pointer; +} +.game-menu .game-menu-txt { + font-family: 'GRegular', Tahoma, Arial; + font-size: 2.4rem; + text-transform: uppercase; + height: 100%; + display: table-cell; + vertical-align: middle; + text-align: center; + max-width: 100%; + overflow: hidden; + color: #fdf9ed; +} +.view-msg { + position: absolute; + bottom: 0; + left: 0; + width: 100%; +} +.page-wrapper.rules { + width: 80rem; + display: block; + text-align: center; + position: absolute; + top: 10%; + left: 5%; + height: 52rem; +} +.page-wrapper.rules .rules-pager { + position: absolute; + bottom: 0; + width: 100%; + height: 7rem; + background-color: rgba(25, 125, 176, 0.6); + border-radius: 1.5rem; +} +.page-wrapper.rules .rules-pager .rule-pointer { + display: inline-block; + width: 1.5rem; + height: 1.5rem; + margin: 2rem; + border: 3px solid #82AACA; + border-radius: 50%; + cursor: pointer; +} +.page-wrapper.rules .rules-pager .rule-pointer.active { + width: 2.3rem; + height: 2.3rem; + position: relative; + top: 0.4rem; + border: 3px solid #72B5D7; +} +.page-wrapper.rules .rule-item-frame { + width: 100%; + height: 70%; + background-color: rgba(25, 125, 176, 0.6); + box-sizing: border-box; + border-radius: 1.5rem; + padding: 1.5rem 1.8rem; + display: inline-table; +} +.page-wrapper.rules .rule-item-frame.active { + display: inline-table; +} +.page-wrapper.rules .rule-item-frame .inner-rule-item { + width: 100%; + height: 100%; + display: table-cell; + vertical-align: middle; + text-align: center; +} +.page-wrapper.rules .rule-item { + display: inline-block; + width: 45%; + border-radius: 1.5rem; + border: 3px solid #355308; + margin: 0.8rem 0; + background-color: #98b401; + box-sizing: border-box; + min-height: 5rem; + padding: 1rem; + position: relative; +} +.page-wrapper.rules .rule-item-img { + display: inline-block; + width: 12rem; + height: 12rem; + background-image: url('../assets/ui/train_demo_300.png'); + background-size: cover; + vertical-align: top; + background-repeat: no-repeat; +} +.page-wrapper.rules .rule-item-img.default { + width: 10rem; + height: 10rem; +} +.page-wrapper.rules .rule-item-img.rule-img-2 { + background-image: url('../assets/ui/tips_1/rules_2.png'); + background-size: cover; + vertical-align: top; +} +.page-wrapper.rules .rule-item-img.rule-img-4 { + background-image: url('../assets/ui/tips_1/rules_4.png'); + background-size: cover; + vertical-align: top; +} +.page-wrapper.rules .rule-item-img.rule-img-5 { + background-image: url('../assets/ui/tips_1/rules_5.png'); + background-size: contain; + vertical-align: top; +} +.page-wrapper.rules .rule-item-img.rubbish { + background-image: url('../assets/ui/tips_1/rules_3.png'); + background-size: cover; + vertical-align: top; +} +.page-wrapper.rules .rule-item-img.walker { + background-image: url('../assets/ui/tips_1/rules_3_2.png'); + background-size: cover; + vertical-align: top; +} +.page-wrapper.rules .rule-item-img.children { + background-image: url('../assets/ui/tips_1/rules_3_3.png'); + background-size: cover; + vertical-align: top; +} +.page-wrapper.rules .rule-item-img.car { + background-image: url('../assets/ui/tips_1/rules_3_1.png'); + background-size: cover; + vertical-align: top; +} +.page-wrapper.rules .rule-item-img-wrap-top { + display: inline-block; + width: 100%; + margin-bottom: 1rem; +} +.page-wrapper.rules .rule-item-txt { + display: inline-block; + width: 98%; + color: #f9f1be; + font-family: 'GProMedium', Tahoma, Arial; + font-size: 2.8rem; + padding: 0 1.2rem; +} +.page-wrapper.rating { + width: 80rem; + display: block; + text-align: center; + position: absolute; + top: 10%; + left: 5%; + height: 62rem; +} +.page-wrapper.rating .rating-pager-wrapper { + position: absolute; + bottom: 0; + width: 100%; + height: 6rem; + background-color: rgba(25, 125, 176, 0.6); + border-radius: 1.5rem; + text-align: left; + padding: 0.5rem 1.2rem; + box-sizing: border-box; +} +.page-wrapper.rating .rating-top-link, +.page-wrapper.rating .rating-me-link { + display: inline-block; + margin: 0.8rem 2rem; + width: 10rem; +} +.page-wrapper.rating .rating-top-link .link-txt, +.page-wrapper.rating .rating-me-link .link-txt { + color: #f9f1be; + font-family: 'GProExtend', Tahoma, Arial; + font-size: 2.2rem; +} +.page-wrapper.rating .rating-pager { + display: inline-block; + margin: 0.8rem 2rem; + text-align: center; + min-width: 38rem; +} +.page-wrapper.rating .rating-pager.center { + width: 100%; +} +.page-wrapper.rating .rating-pager .page-item { + display: inline-block; + color: #DBF1FE; + font-family: 'GProExtend', Tahoma, Arial; + font-size: 1.8rem; + border-radius: 50%; + margin: 0 0.8rem; + padding: 0.6rem; + cursor: pointer; +} +.page-wrapper.rating .rating-pager .page-item.active { + color: #f9f1be; + text-decoration: underline; +} +.page-wrapper.rating .rating-me-link { + display: inline-block; +} +.page-wrapper.rating .game-rating-list .game-rating-item { + display: block; + width: 100%; + border-radius: 1.5rem; + margin-bottom: 0.8rem; + background-color: rgba(25, 125, 176, 0.6); + box-sizing: border-box; + height: 4.2rem; + padding: 1rem; + position: relative; +} +.page-wrapper.rating .game-rating-list .game-rating-item.rating-header .rating-item-position { + color: #DBF1FE; +} +.page-wrapper.rating .game-rating-list .game-rating-item.rating-header .rating-item-score { + color: #DBF1FE; +} +.page-wrapper.rating .game-rating-list .game-rating-item.rating-header .rating-item-nickname { + color: #DBF1FE; + font-size: 2.1rem; +} +.page-wrapper.rating .game-rating-list .rating-item-position { + display: inline-block; + width: 25%; + color: #f9f1be; + font-family: 'GProExtend', Verdana, Tahoma; + font-size: 2.1rem; + overflow: hidden; + vertical-align: top; +} +.page-wrapper.rating .game-rating-list .rating-item-nickname { + display: inline-block; + width: 35%; + color: #f9f1be; + font-family: 'GProExtend', Verdana, Tahoma; + font-size: 1.7rem; + overflow: hidden; +} +.page-wrapper.rating .game-rating-list .rating-item-nickname.longname { + position: relative; + top: -0.8rem; +} +.page-wrapper.rating .game-rating-list .rating-item-score { + display: inline-block; + width: 30%; + vertical-align: top; + font-family: 'GProExtend', Verdana, Tahoma; + font-size: 2.1rem; + color: #f9f1be; + overflow: hidden; +} +/*! +Animate.css - http://daneden.me/animate +Licensed under the MIT license - http://opensource.org/licenses/MIT + +Copyright (c) 2015 Daniel Eden +*/ +.animated { + -webkit-animation-duration: 1.5s; + animation-duration: 1.5s; + -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.bounceIn, +.animated.bounceOut { + -webkit-animation-duration: .75s; + animation-duration: .75s; +} +.animated.flipOutX, +.animated.flipOutY { + -webkit-animation-duration: .75s; + animation-duration: .75s; +} +@-webkit-keyframes bounce { + 0%, + 20%, + 53%, + 80%, + 100% { + -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); + transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } + 40%, + 43% { + -webkit-transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); + transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); + -webkit-transform: translate3d(0, -30px, 0); + transform: translate3d(0, -30px, 0); + } + 70% { + -webkit-transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); + transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); + -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 { + 0%, + 20%, + 53%, + 80%, + 100% { + -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); + transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } + 40%, + 43% { + -webkit-transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); + transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); + -webkit-transform: translate3d(0, -30px, 0); + transform: translate3d(0, -30px, 0); + } + 70% { + -webkit-transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); + transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); + -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 { + 0%, + 50%, + 100% { + opacity: 1; + } + 25%, + 75% { + opacity: 0; + } +} +@keyframes flash { + 0%, + 50%, + 100% { + 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 { + 0% { + -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); + } + 100% { + -webkit-transform: scale3d(1, 1, 1); + transform: scale3d(1, 1, 1); + } +} +@keyframes pulse { + 0% { + -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); + } + 100% { + -webkit-transform: scale3d(1, 1, 1); + transform: scale3d(1, 1, 1); + } +} +.pulse { + -webkit-animation-name: pulse; + animation-name: pulse; +} +@-webkit-keyframes rubberBand { + 0% { + -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(0.95, 1.05, 1); + transform: scale3d(0.95, 1.05, 1); + } + 75% { + -webkit-transform: scale3d(1.05, 0.95, 1); + transform: scale3d(1.05, 0.95, 1); + } + 100% { + -webkit-transform: scale3d(1, 1, 1); + transform: scale3d(1, 1, 1); + } +} +@keyframes rubberBand { + 0% { + -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(0.95, 1.05, 1); + transform: scale3d(0.95, 1.05, 1); + } + 75% { + -webkit-transform: scale3d(1.05, 0.95, 1); + transform: scale3d(1.05, 0.95, 1); + } + 100% { + -webkit-transform: scale3d(1, 1, 1); + transform: scale3d(1, 1, 1); + } +} +.rubberBand { + -webkit-animation-name: rubberBand; + animation-name: rubberBand; +} +@-webkit-keyframes shake { + 0%, + 100% { + -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 { + 0%, + 100% { + -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 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); + } + 100% { + -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); + } + 100% { + -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 { + 0% { + -webkit-transform: scale3d(1, 1, 1); + transform: scale3d(1, 1, 1); + } + 10%, + 20% { + -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); + transform: scale3d(0.9, 0.9, 0.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); + } + 100% { + -webkit-transform: scale3d(1, 1, 1); + transform: scale3d(1, 1, 1); + } +} +@keyframes tada { + 0% { + -webkit-transform: scale3d(1, 1, 1); + transform: scale3d(1, 1, 1); + } + 10%, + 20% { + -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); + transform: scale3d(0.9, 0.9, 0.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); + } + 100% { + -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 { + 0% { + -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); + } + 100% { + -webkit-transform: none; + transform: none; + } +} +@keyframes wobble { + 0% { + -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); + } + 100% { + -webkit-transform: none; + transform: none; + } +} +.wobble { + -webkit-animation-name: wobble; + animation-name: wobble; +} +@-webkit-keyframes bounceIn { + 0%, + 20%, + 40%, + 60%, + 80%, + 100% { + -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); + transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); + } + 0% { + opacity: 0; + -webkit-transform: scale3d(0.3, 0.3, 0.3); + transform: scale3d(0.3, 0.3, 0.3); + } + 20% { + -webkit-transform: scale3d(1.1, 1.1, 1.1); + transform: scale3d(1.1, 1.1, 1.1); + } + 40% { + -webkit-transform: scale3d(0.9, 0.9, 0.9); + transform: scale3d(0.9, 0.9, 0.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(0.97, 0.97, 0.97); + transform: scale3d(0.97, 0.97, 0.97); + } + 100% { + opacity: 1; + -webkit-transform: scale3d(1, 1, 1); + transform: scale3d(1, 1, 1); + } +} +@keyframes bounceIn { + 0%, + 20%, + 40%, + 60%, + 80%, + 100% { + -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); + transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); + } + 0% { + opacity: 0; + -webkit-transform: scale3d(0.3, 0.3, 0.3); + transform: scale3d(0.3, 0.3, 0.3); + } + 20% { + -webkit-transform: scale3d(1.1, 1.1, 1.1); + transform: scale3d(1.1, 1.1, 1.1); + } + 40% { + -webkit-transform: scale3d(0.9, 0.9, 0.9); + transform: scale3d(0.9, 0.9, 0.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(0.97, 0.97, 0.97); + transform: scale3d(0.97, 0.97, 0.97); + } + 100% { + opacity: 1; + -webkit-transform: scale3d(1, 1, 1); + transform: scale3d(1, 1, 1); + } +} +.bounceIn { + -webkit-animation-name: bounceIn; + animation-name: bounceIn; +} +@-webkit-keyframes bounceInDown { + 0%, + 60%, + 75%, + 90%, + 100% { + -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); + transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); + } + 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); + } + 100% { + -webkit-transform: none; + transform: none; + } +} +@keyframes bounceInDown { + 0%, + 60%, + 75%, + 90%, + 100% { + -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); + transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); + } + 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); + } + 100% { + -webkit-transform: none; + transform: none; + } +} +.bounceInDown { + -webkit-animation-name: bounceInDown; + animation-name: bounceInDown; +} +@-webkit-keyframes bounceInLeft { + 0%, + 60%, + 75%, + 90%, + 100% { + -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); + transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); + } + 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); + } + 100% { + -webkit-transform: none; + transform: none; + } +} +@keyframes bounceInLeft { + 0%, + 60%, + 75%, + 90%, + 100% { + -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); + transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); + } + 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); + } + 100% { + -webkit-transform: none; + transform: none; + } +} +.bounceInLeft { + -webkit-animation-name: bounceInLeft; + animation-name: bounceInLeft; +} +@-webkit-keyframes bounceInRight { + 0%, + 60%, + 75%, + 90%, + 100% { + -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); + transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); + } + 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); + } + 100% { + -webkit-transform: none; + transform: none; + } +} +@keyframes bounceInRight { + 0%, + 60%, + 75%, + 90%, + 100% { + -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); + transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); + } + 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); + } + 100% { + -webkit-transform: none; + transform: none; + } +} +.bounceInRight { + -webkit-animation-name: bounceInRight; + animation-name: bounceInRight; +} +@-webkit-keyframes bounceInUp { + 0%, + 60%, + 75%, + 90%, + 100% { + -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); + transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); + } + 0% { + 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); + } + 100% { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } +} +@keyframes bounceInUp { + 0%, + 60%, + 75%, + 90%, + 100% { + -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); + transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); + } + 0% { + 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); + } + 100% { + -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(0.9, 0.9, 0.9); + transform: scale3d(0.9, 0.9, 0.9); + } + 50%, + 55% { + opacity: 1; + -webkit-transform: scale3d(1.1, 1.1, 1.1); + transform: scale3d(1.1, 1.1, 1.1); + } + 100% { + opacity: 0; + -webkit-transform: scale3d(0.3, 0.3, 0.3); + transform: scale3d(0.3, 0.3, 0.3); + } +} +@keyframes bounceOut { + 20% { + -webkit-transform: scale3d(0.9, 0.9, 0.9); + transform: scale3d(0.9, 0.9, 0.9); + } + 50%, + 55% { + opacity: 1; + -webkit-transform: scale3d(1.1, 1.1, 1.1); + transform: scale3d(1.1, 1.1, 1.1); + } + 100% { + opacity: 0; + -webkit-transform: scale3d(0.3, 0.3, 0.3); + transform: scale3d(0.3, 0.3, 0.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); + } + 100% { + 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); + } + 100% { + 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); + } + 100% { + 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); + } + 100% { + 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); + } + 100% { + 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); + } + 100% { + 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); + } + 100% { + 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); + } + 100% { + opacity: 0; + -webkit-transform: translate3d(0, -2000px, 0); + transform: translate3d(0, -2000px, 0); + } +} +.bounceOutUp { + -webkit-animation-name: bounceOutUp; + animation-name: bounceOutUp; +} +@-webkit-keyframes fadeIn { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } +} +@keyframes fadeIn { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } +} +.fadeIn { + -webkit-animation-name: fadeIn; + animation-name: fadeIn; +} +@-webkit-keyframes fadeInDown { + 0% { + opacity: 0; + -webkit-transform: translate3d(0, -100%, 0); + transform: translate3d(0, -100%, 0); + } + 100% { + opacity: 1; + -webkit-transform: none; + transform: none; + } +} +@keyframes fadeInDown { + 0% { + opacity: 0; + -webkit-transform: translate3d(0, -100%, 0); + transform: translate3d(0, -100%, 0); + } + 100% { + opacity: 1; + -webkit-transform: none; + transform: none; + } +} +.fadeInDown { + -webkit-animation-name: fadeInDown; + animation-name: fadeInDown; +} +@-webkit-keyframes fadeInDownBig { + 0% { + opacity: 0; + -webkit-transform: translate3d(0, -2000px, 0); + transform: translate3d(0, -2000px, 0); + } + 100% { + opacity: 1; + -webkit-transform: none; + transform: none; + } +} +@keyframes fadeInDownBig { + 0% { + opacity: 0; + -webkit-transform: translate3d(0, -2000px, 0); + transform: translate3d(0, -2000px, 0); + } + 100% { + opacity: 1; + -webkit-transform: none; + transform: none; + } +} +.fadeInDownBig { + -webkit-animation-name: fadeInDownBig; + animation-name: fadeInDownBig; +} +@-webkit-keyframes fadeInLeft { + 0% { + opacity: 0; + -webkit-transform: translate3d(-100%, 0, 0); + transform: translate3d(-100%, 0, 0); + } + 100% { + opacity: 1; + -webkit-transform: none; + transform: none; + } +} +@keyframes fadeInLeft { + 0% { + opacity: 0; + -webkit-transform: translate3d(-100%, 0, 0); + transform: translate3d(-100%, 0, 0); + } + 100% { + opacity: 1; + -webkit-transform: none; + transform: none; + } +} +.fadeInLeft { + -webkit-animation-name: fadeInLeft; + animation-name: fadeInLeft; +} +@-webkit-keyframes fadeInLeftBig { + 0% { + opacity: 0; + -webkit-transform: translate3d(-2000px, 0, 0); + transform: translate3d(-2000px, 0, 0); + } + 100% { + opacity: 1; + -webkit-transform: none; + transform: none; + } +} +@keyframes fadeInLeftBig { + 0% { + opacity: 0; + -webkit-transform: translate3d(-2000px, 0, 0); + transform: translate3d(-2000px, 0, 0); + } + 100% { + opacity: 1; + -webkit-transform: none; + transform: none; + } +} +.fadeInLeftBig { + -webkit-animation-name: fadeInLeftBig; + animation-name: fadeInLeftBig; +} +@-webkit-keyframes fadeInRight { + 0% { + opacity: 0; + -webkit-transform: translate3d(100%, 0, 0); + transform: translate3d(100%, 0, 0); + } + 100% { + opacity: 1; + -webkit-transform: none; + transform: none; + } +} +@keyframes fadeInRight { + 0% { + opacity: 0; + -webkit-transform: translate3d(100%, 0, 0); + transform: translate3d(100%, 0, 0); + } + 100% { + opacity: 1; + -webkit-transform: none; + transform: none; + } +} +.fadeInRight { + -webkit-animation-name: fadeInRight; + animation-name: fadeInRight; +} +@-webkit-keyframes fadeInRightBig { + 0% { + opacity: 0; + -webkit-transform: translate3d(2000px, 0, 0); + transform: translate3d(2000px, 0, 0); + } + 100% { + opacity: 1; + -webkit-transform: none; + transform: none; + } +} +@keyframes fadeInRightBig { + 0% { + opacity: 0; + -webkit-transform: translate3d(2000px, 0, 0); + transform: translate3d(2000px, 0, 0); + } + 100% { + opacity: 1; + -webkit-transform: none; + transform: none; + } +} +.fadeInRightBig { + -webkit-animation-name: fadeInRightBig; + animation-name: fadeInRightBig; +} +@-webkit-keyframes fadeInUp { + 0% { + opacity: 0; + -webkit-transform: translate3d(0, 100%, 0); + transform: translate3d(0, 100%, 0); + } + 100% { + opacity: 1; + -webkit-transform: none; + transform: none; + } +} +@keyframes fadeInUp { + 0% { + opacity: 0; + -webkit-transform: translate3d(0, 100%, 0); + transform: translate3d(0, 100%, 0); + } + 100% { + opacity: 1; + -webkit-transform: none; + transform: none; + } +} +.fadeInUp { + -webkit-animation-name: fadeInUp; + animation-name: fadeInUp; +} +@-webkit-keyframes fadeInUpBig { + 0% { + opacity: 0; + -webkit-transform: translate3d(0, 2000px, 0); + transform: translate3d(0, 2000px, 0); + } + 100% { + opacity: 1; + -webkit-transform: none; + transform: none; + } +} +@keyframes fadeInUpBig { + 0% { + opacity: 0; + -webkit-transform: translate3d(0, 2000px, 0); + transform: translate3d(0, 2000px, 0); + } + 100% { + opacity: 1; + -webkit-transform: none; + transform: none; + } +} +.fadeInUpBig { + -webkit-animation-name: fadeInUpBig; + animation-name: fadeInUpBig; +} +@-webkit-keyframes fadeOut { + 0% { + opacity: 1; + } + 100% { + opacity: 0; + } +} +@keyframes fadeOut { + 0% { + opacity: 1; + } + 100% { + opacity: 0; + } +} +.fadeOut { + -webkit-animation-name: fadeOut; + animation-name: fadeOut; +} +@-webkit-keyframes fadeOutDown { + 0% { + opacity: 1; + } + 100% { + opacity: 0; + -webkit-transform: translate3d(0, 100%, 0); + transform: translate3d(0, 100%, 0); + } +} +@keyframes fadeOutDown { + 0% { + opacity: 1; + } + 100% { + opacity: 0; + -webkit-transform: translate3d(0, 100%, 0); + transform: translate3d(0, 100%, 0); + } +} +.fadeOutDown { + -webkit-animation-name: fadeOutDown; + animation-name: fadeOutDown; +} +@-webkit-keyframes fadeOutDownBig { + 0% { + opacity: 1; + } + 100% { + opacity: 0; + -webkit-transform: translate3d(0, 2000px, 0); + transform: translate3d(0, 2000px, 0); + } +} +@keyframes fadeOutDownBig { + 0% { + opacity: 1; + } + 100% { + opacity: 0; + -webkit-transform: translate3d(0, 2000px, 0); + transform: translate3d(0, 2000px, 0); + } +} +.fadeOutDownBig { + -webkit-animation-name: fadeOutDownBig; + animation-name: fadeOutDownBig; +} +@-webkit-keyframes fadeOutLeft { + 0% { + opacity: 1; + } + 100% { + opacity: 0; + -webkit-transform: translate3d(-100%, 0, 0); + transform: translate3d(-100%, 0, 0); + } +} +@keyframes fadeOutLeft { + 0% { + opacity: 1; + } + 100% { + opacity: 0; + -webkit-transform: translate3d(-100%, 0, 0); + transform: translate3d(-100%, 0, 0); + } +} +.fadeOutLeft { + -webkit-animation-name: fadeOutLeft; + animation-name: fadeOutLeft; +} +@-webkit-keyframes fadeOutLeftBig { + 0% { + opacity: 1; + } + 100% { + opacity: 0; + -webkit-transform: translate3d(-2000px, 0, 0); + transform: translate3d(-2000px, 0, 0); + } +} +@keyframes fadeOutLeftBig { + 0% { + opacity: 1; + } + 100% { + opacity: 0; + -webkit-transform: translate3d(-2000px, 0, 0); + transform: translate3d(-2000px, 0, 0); + } +} +.fadeOutLeftBig { + -webkit-animation-name: fadeOutLeftBig; + animation-name: fadeOutLeftBig; +} +@-webkit-keyframes fadeOutRight { + 0% { + opacity: 1; + } + 100% { + opacity: 0; + -webkit-transform: translate3d(100%, 0, 0); + transform: translate3d(100%, 0, 0); + } +} +@keyframes fadeOutRight { + 0% { + opacity: 1; + } + 100% { + opacity: 0; + -webkit-transform: translate3d(100%, 0, 0); + transform: translate3d(100%, 0, 0); + } +} +.fadeOutRight { + -webkit-animation-name: fadeOutRight; + animation-name: fadeOutRight; +} +@-webkit-keyframes fadeOutRightBig { + 0% { + opacity: 1; + } + 100% { + opacity: 0; + -webkit-transform: translate3d(2000px, 0, 0); + transform: translate3d(2000px, 0, 0); + } +} +@keyframes fadeOutRightBig { + 0% { + opacity: 1; + } + 100% { + opacity: 0; + -webkit-transform: translate3d(2000px, 0, 0); + transform: translate3d(2000px, 0, 0); + } +} +.fadeOutRightBig { + -webkit-animation-name: fadeOutRightBig; + animation-name: fadeOutRightBig; +} +@-webkit-keyframes fadeOutUp { + 0% { + opacity: 1; + } + 100% { + opacity: 0; + -webkit-transform: translate3d(0, -100%, 0); + transform: translate3d(0, -100%, 0); + } +} +@keyframes fadeOutUp { + 0% { + opacity: 1; + } + 100% { + opacity: 0; + -webkit-transform: translate3d(0, -100%, 0); + transform: translate3d(0, -100%, 0); + } +} +.fadeOutUp { + -webkit-animation-name: fadeOutUp; + animation-name: fadeOutUp; +} +@-webkit-keyframes fadeOutUpBig { + 0% { + opacity: 1; + } + 100% { + opacity: 0; + -webkit-transform: translate3d(0, -2000px, 0); + transform: translate3d(0, -2000px, 0); + } +} +@keyframes fadeOutUpBig { + 0% { + opacity: 1; + } + 100% { + opacity: 0; + -webkit-transform: translate3d(0, -2000px, 0); + transform: translate3d(0, -2000px, 0); + } +} +.fadeOutUpBig { + -webkit-animation-name: fadeOutUpBig; + animation-name: fadeOutUpBig; +} +@-webkit-keyframes flip { + 0% { + -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(0.95, 0.95, 0.95); + transform: perspective(400px) scale3d(0.95, 0.95, 0.95); + -webkit-animation-timing-function: ease-in; + animation-timing-function: ease-in; + } + 100% { + -webkit-transform: perspective(400px); + transform: perspective(400px); + -webkit-animation-timing-function: ease-in; + animation-timing-function: ease-in; + } +} +@keyframes flip { + 0% { + -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(0.95, 0.95, 0.95); + transform: perspective(400px) scale3d(0.95, 0.95, 0.95); + -webkit-animation-timing-function: ease-in; + animation-timing-function: ease-in; + } + 100% { + -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 { + 0% { + -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); + transform: perspective(400px) rotate3d(1, 0, 0, 90deg); + -webkit-transition-timing-function: ease-in; + transition-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-transition-timing-function: ease-in; + transition-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); + } + 100% { + -webkit-transform: perspective(400px); + transform: perspective(400px); + } +} +@keyframes flipInX { + 0% { + -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); + transform: perspective(400px) rotate3d(1, 0, 0, 90deg); + -webkit-transition-timing-function: ease-in; + transition-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-transition-timing-function: ease-in; + transition-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); + } + 100% { + -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 { + 0% { + -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); + transform: perspective(400px) rotate3d(0, 1, 0, 90deg); + -webkit-transition-timing-function: ease-in; + transition-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-transition-timing-function: ease-in; + transition-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); + } + 100% { + -webkit-transform: perspective(400px); + transform: perspective(400px); + } +} +@keyframes flipInY { + 0% { + -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); + transform: perspective(400px) rotate3d(0, 1, 0, 90deg); + -webkit-transition-timing-function: ease-in; + transition-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-transition-timing-function: ease-in; + transition-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); + } + 100% { + -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 { + 0% { + -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; + } + 100% { + -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); + transform: perspective(400px) rotate3d(1, 0, 0, 90deg); + opacity: 0; + } +} +@keyframes flipOutX { + 0% { + -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; + } + 100% { + -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 { + 0% { + -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; + } + 100% { + -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); + transform: perspective(400px) rotate3d(0, 1, 0, 90deg); + opacity: 0; + } +} +@keyframes flipOutY { + 0% { + -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; + } + 100% { + -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 { + 0% { + -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; + } + 100% { + -webkit-transform: none; + transform: none; + opacity: 1; + } +} +@keyframes lightSpeedIn { + 0% { + -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; + } + 100% { + -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 { + 0% { + opacity: 1; + } + 100% { + -webkit-transform: translate3d(100%, 0, 0) skewX(30deg); + transform: translate3d(100%, 0, 0) skewX(30deg); + opacity: 0; + } +} +@keyframes lightSpeedOut { + 0% { + opacity: 1; + } + 100% { + -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 { + 0% { + -webkit-transform-origin: center; + transform-origin: center; + -webkit-transform: rotate3d(0, 0, 1, -200deg); + transform: rotate3d(0, 0, 1, -200deg); + opacity: 0; + } + 100% { + -webkit-transform-origin: center; + transform-origin: center; + -webkit-transform: none; + transform: none; + opacity: 1; + } +} +@keyframes rotateIn { + 0% { + -webkit-transform-origin: center; + transform-origin: center; + -webkit-transform: rotate3d(0, 0, 1, -200deg); + transform: rotate3d(0, 0, 1, -200deg); + opacity: 0; + } + 100% { + -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 { + 0% { + -webkit-transform-origin: left bottom; + transform-origin: left bottom; + -webkit-transform: rotate3d(0, 0, 1, -45deg); + transform: rotate3d(0, 0, 1, -45deg); + opacity: 0; + } + 100% { + -webkit-transform-origin: left bottom; + transform-origin: left bottom; + -webkit-transform: none; + transform: none; + opacity: 1; + } +} +@keyframes rotateInDownLeft { + 0% { + -webkit-transform-origin: left bottom; + transform-origin: left bottom; + -webkit-transform: rotate3d(0, 0, 1, -45deg); + transform: rotate3d(0, 0, 1, -45deg); + opacity: 0; + } + 100% { + -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 { + 0% { + -webkit-transform-origin: right bottom; + transform-origin: right bottom; + -webkit-transform: rotate3d(0, 0, 1, 45deg); + transform: rotate3d(0, 0, 1, 45deg); + opacity: 0; + } + 100% { + -webkit-transform-origin: right bottom; + transform-origin: right bottom; + -webkit-transform: none; + transform: none; + opacity: 1; + } +} +@keyframes rotateInDownRight { + 0% { + -webkit-transform-origin: right bottom; + transform-origin: right bottom; + -webkit-transform: rotate3d(0, 0, 1, 45deg); + transform: rotate3d(0, 0, 1, 45deg); + opacity: 0; + } + 100% { + -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 { + 0% { + -webkit-transform-origin: left bottom; + transform-origin: left bottom; + -webkit-transform: rotate3d(0, 0, 1, 45deg); + transform: rotate3d(0, 0, 1, 45deg); + opacity: 0; + } + 100% { + -webkit-transform-origin: left bottom; + transform-origin: left bottom; + -webkit-transform: none; + transform: none; + opacity: 1; + } +} +@keyframes rotateInUpLeft { + 0% { + -webkit-transform-origin: left bottom; + transform-origin: left bottom; + -webkit-transform: rotate3d(0, 0, 1, 45deg); + transform: rotate3d(0, 0, 1, 45deg); + opacity: 0; + } + 100% { + -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 { + 0% { + -webkit-transform-origin: right bottom; + transform-origin: right bottom; + -webkit-transform: rotate3d(0, 0, 1, -90deg); + transform: rotate3d(0, 0, 1, -90deg); + opacity: 0; + } + 100% { + -webkit-transform-origin: right bottom; + transform-origin: right bottom; + -webkit-transform: none; + transform: none; + opacity: 1; + } +} +@keyframes rotateInUpRight { + 0% { + -webkit-transform-origin: right bottom; + transform-origin: right bottom; + -webkit-transform: rotate3d(0, 0, 1, -90deg); + transform: rotate3d(0, 0, 1, -90deg); + opacity: 0; + } + 100% { + -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 { + 0% { + -webkit-transform-origin: center; + transform-origin: center; + opacity: 1; + } + 100% { + -webkit-transform-origin: center; + transform-origin: center; + -webkit-transform: rotate3d(0, 0, 1, 200deg); + transform: rotate3d(0, 0, 1, 200deg); + opacity: 0; + } +} +@keyframes rotateOut { + 0% { + -webkit-transform-origin: center; + transform-origin: center; + opacity: 1; + } + 100% { + -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 { + 0% { + -webkit-transform-origin: left bottom; + transform-origin: left bottom; + opacity: 1; + } + 100% { + -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 { + 0% { + -webkit-transform-origin: left bottom; + transform-origin: left bottom; + opacity: 1; + } + 100% { + -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 { + 0% { + -webkit-transform-origin: right bottom; + transform-origin: right bottom; + opacity: 1; + } + 100% { + -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 { + 0% { + -webkit-transform-origin: right bottom; + transform-origin: right bottom; + opacity: 1; + } + 100% { + -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 { + 0% { + -webkit-transform-origin: left bottom; + transform-origin: left bottom; + opacity: 1; + } + 100% { + -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 { + 0% { + -webkit-transform-origin: left bottom; + transform-origin: left bottom; + opacity: 1; + } + 100% { + -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 { + 0% { + -webkit-transform-origin: right bottom; + transform-origin: right bottom; + opacity: 1; + } + 100% { + -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 { + 0% { + -webkit-transform-origin: right bottom; + transform-origin: right bottom; + opacity: 1; + } + 100% { + -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; + } + 100% { + -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; + } + 100% { + -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 { + 0% { + opacity: 0; + -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); + transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); + } + 100% { + opacity: 1; + -webkit-transform: none; + transform: none; + } +} +@keyframes rollIn { + 0% { + opacity: 0; + -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); + transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); + } + 100% { + 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 { + 0% { + opacity: 1; + } + 100% { + 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 { + 0% { + opacity: 1; + } + 100% { + 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 { + 0% { + opacity: 0; + -webkit-transform: scale3d(0.3, 0.3, 0.3); + transform: scale3d(0.3, 0.3, 0.3); + } + 50% { + opacity: 1; + } +} +@keyframes zoomIn { + 0% { + opacity: 0; + -webkit-transform: scale3d(0.3, 0.3, 0.3); + transform: scale3d(0.3, 0.3, 0.3); + } + 50% { + opacity: 1; + } +} +.zoomIn { + -webkit-animation-name: zoomIn; + animation-name: zoomIn; +} +@-webkit-keyframes zoomInDown { + 0% { + opacity: 0; + -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); + transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); + -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); + animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); + } + 60% { + opacity: 1; + -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); + transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); + -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); + animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); + } +} +@keyframes zoomInDown { + 0% { + opacity: 0; + -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); + transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); + -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); + animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); + } + 60% { + opacity: 1; + -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); + transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); + -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); + animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); + } +} +.zoomInDown { + -webkit-animation-name: zoomInDown; + animation-name: zoomInDown; +} +@-webkit-keyframes zoomInLeft { + 0% { + opacity: 0; + -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); + transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); + -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); + animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); + } + 60% { + opacity: 1; + -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); + transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); + -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); + animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); + } +} +@keyframes zoomInLeft { + 0% { + opacity: 0; + -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); + transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); + -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); + animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); + } + 60% { + opacity: 1; + -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); + transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); + -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); + animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); + } +} +.zoomInLeft { + -webkit-animation-name: zoomInLeft; + animation-name: zoomInLeft; +} +@-webkit-keyframes zoomInRight { + 0% { + opacity: 0; + -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); + transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); + -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); + animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); + } + 60% { + opacity: 1; + -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); + transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); + -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); + animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); + } +} +@keyframes zoomInRight { + 0% { + opacity: 0; + -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); + transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); + -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); + animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); + } + 60% { + opacity: 1; + -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); + transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); + -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); + animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); + } +} +.zoomInRight { + -webkit-animation-name: zoomInRight; + animation-name: zoomInRight; +} +@-webkit-keyframes zoomInUp { + 0% { + opacity: 0; + -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); + transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); + -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); + animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); + } + 60% { + opacity: 1; + -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); + transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); + -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); + animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); + } +} +@keyframes zoomInUp { + 0% { + opacity: 0; + -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); + transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); + -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); + animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); + } + 60% { + opacity: 1; + -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); + transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); + -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); + animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); + } +} +.zoomInUp { + -webkit-animation-name: zoomInUp; + animation-name: zoomInUp; +} +@-webkit-keyframes zoomOut { + 0% { + opacity: 1; + } + 50% { + opacity: 0; + -webkit-transform: scale3d(0.3, 0.3, 0.3); + transform: scale3d(0.3, 0.3, 0.3); + } + 100% { + opacity: 0; + } +} +@keyframes zoomOut { + 0% { + opacity: 1; + } + 50% { + opacity: 0; + -webkit-transform: scale3d(0.3, 0.3, 0.3); + transform: scale3d(0.3, 0.3, 0.3); + } + 100% { + opacity: 0; + } +} +.zoomOut { + -webkit-animation-name: zoomOut; + animation-name: zoomOut; +} +@-webkit-keyframes zoomOutDown { + 40% { + opacity: 1; + -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); + transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); + -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); + animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); + } + 100% { + opacity: 0; + -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); + transform: scale3d(0.1, 0.1, 0.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.32, 1); + animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); + } +} +@keyframes zoomOutDown { + 40% { + opacity: 1; + -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); + transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); + -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); + animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); + } + 100% { + opacity: 0; + -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); + transform: scale3d(0.1, 0.1, 0.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.32, 1); + animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); + } +} +.zoomOutDown { + -webkit-animation-name: zoomOutDown; + animation-name: zoomOutDown; +} +@-webkit-keyframes zoomOutLeft { + 40% { + opacity: 1; + -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); + transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); + } + 100% { + opacity: 0; + -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0); + transform: scale(0.1) translate3d(-2000px, 0, 0); + -webkit-transform-origin: left center; + transform-origin: left center; + } +} +@keyframes zoomOutLeft { + 40% { + opacity: 1; + -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); + transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); + } + 100% { + opacity: 0; + -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0); + transform: scale(0.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(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); + transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); + } + 100% { + opacity: 0; + -webkit-transform: scale(0.1) translate3d(2000px, 0, 0); + transform: scale(0.1) translate3d(2000px, 0, 0); + -webkit-transform-origin: right center; + transform-origin: right center; + } +} +@keyframes zoomOutRight { + 40% { + opacity: 1; + -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); + transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); + } + 100% { + opacity: 0; + -webkit-transform: scale(0.1) translate3d(2000px, 0, 0); + transform: scale(0.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(0.475, 0.475, 0.475) translate3d(0, 60px, 0); + transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); + -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); + animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); + } + 100% { + opacity: 0; + -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); + transform: scale3d(0.1, 0.1, 0.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.32, 1); + animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); + } +} +@keyframes zoomOutUp { + 40% { + opacity: 1; + -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); + transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); + -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); + animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); + } + 100% { + opacity: 0; + -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); + transform: scale3d(0.1, 0.1, 0.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.32, 1); + animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); + } +} +.zoomOutUp { + -webkit-animation-name: zoomOutUp; + animation-name: zoomOutUp; +} +@-webkit-keyframes slideInDown { + 0% { + -webkit-transform: translate3d(0, -100%, 0); + transform: translate3d(0, -100%, 0); + visibility: visible; + } + 100% { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } +} +@keyframes slideInDown { + 0% { + -webkit-transform: translate3d(0, -100%, 0); + transform: translate3d(0, -100%, 0); + visibility: visible; + } + 100% { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } +} +.slideInDown { + -webkit-animation-name: slideInDown; + animation-name: slideInDown; +} +@-webkit-keyframes slideInLeft { + 0% { + -webkit-transform: translate3d(-100%, 0, 0); + transform: translate3d(-100%, 0, 0); + visibility: visible; + } + 100% { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } +} +@keyframes slideInLeft { + 0% { + -webkit-transform: translate3d(-100%, 0, 0); + transform: translate3d(-100%, 0, 0); + visibility: visible; + } + 100% { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } +} +.slideInLeft { + -webkit-animation-name: slideInLeft; + animation-name: slideInLeft; +} +@-webkit-keyframes slideInRight { + 0% { + -webkit-transform: translate3d(100%, 0, 0); + transform: translate3d(100%, 0, 0); + visibility: visible; + } + 100% { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } +} +@keyframes slideInRight { + 0% { + -webkit-transform: translate3d(100%, 0, 0); + transform: translate3d(100%, 0, 0); + visibility: visible; + } + 100% { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } +} +.slideInRight { + -webkit-animation-name: slideInRight; + animation-name: slideInRight; +} +@-webkit-keyframes slideInUp { + 0% { + -webkit-transform: translate3d(0, 100%, 0); + transform: translate3d(0, 100%, 0); + visibility: visible; + } + 100% { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } +} +@keyframes slideInUp { + 0% { + -webkit-transform: translate3d(0, 100%, 0); + transform: translate3d(0, 100%, 0); + visibility: visible; + } + 100% { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } +} +.slideInUp { + -webkit-animation-name: slideInUp; + animation-name: slideInUp; +} +@-webkit-keyframes slideOutDown { + 0% { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } + 100% { + visibility: hidden; + -webkit-transform: translate3d(0, 100%, 0); + transform: translate3d(0, 100%, 0); + } +} +@keyframes slideOutDown { + 0% { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } + 100% { + visibility: hidden; + -webkit-transform: translate3d(0, 100%, 0); + transform: translate3d(0, 100%, 0); + } +} +.slideOutDown { + -webkit-animation-name: slideOutDown; + animation-name: slideOutDown; +} +@-webkit-keyframes slideOutLeft { + 0% { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } + 100% { + visibility: hidden; + -webkit-transform: translate3d(-100%, 0, 0); + transform: translate3d(-100%, 0, 0); + } +} +@keyframes slideOutLeft { + 0% { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } + 100% { + visibility: hidden; + -webkit-transform: translate3d(-100%, 0, 0); + transform: translate3d(-100%, 0, 0); + } +} +.slideOutLeft { + -webkit-animation-name: slideOutLeft; + animation-name: slideOutLeft; +} +@-webkit-keyframes slideOutRight { + 0% { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } + 100% { + visibility: hidden; + -webkit-transform: translate3d(100%, 0, 0); + transform: translate3d(100%, 0, 0); + } +} +@keyframes slideOutRight { + 0% { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } + 100% { + visibility: hidden; + -webkit-transform: translate3d(100%, 0, 0); + transform: translate3d(100%, 0, 0); + } +} +.slideOutRight { + -webkit-animation-name: slideOutRight; + animation-name: slideOutRight; +} +@-webkit-keyframes slideOutUp { + 0% { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } + 100% { + visibility: hidden; + -webkit-transform: translate3d(0, -100%, 0); + transform: translate3d(0, -100%, 0); + } +} +@keyframes slideOutUp { + 0% { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } + 100% { + visibility: hidden; + -webkit-transform: translate3d(0, -100%, 0); + transform: translate3d(0, -100%, 0); + } +} +.slideOutUp { + -webkit-animation-name: slideOutUp; + animation-name: slideOutUp; +} +.game-tip-window { + position: absolute; + bottom: 0; + width: 100%; + height: 12rem; +} +.game-tip-window .tip-hero { + position: absolute; + bottom: 0; + right: 0; + width: 22.5rem; + height: 22.5rem; + background-size: contain; + background-repeat: no-repeat; + /* spider man */ + /* superman */ + /* san andreas */ + /* BttF */ +} +.game-tip-window .tip-hero.hero-1 { + background-image: url('../assets/ui/hero_spider.png'); +} +.game-tip-window .tip-hero.hero-2 { + background-image: url('../assets/ui/hero_2.png'); +} +.game-tip-window .tip-hero.hero-3 { + background-image: url('../assets/ui/hero_3.png'); +} +.game-tip-window .tip-hero.hero-4 { + background-image: url('../assets/ui/hero_4.png'); +} +.game-tip-window .tip-msg-wrap { + width: 83rem; + height: 13rem; + background-image: url('../assets/ui/tip_back.png'); + background-size: contain; + background-repeat: no-repeat; + position: absolute; + right: 20rem; + bottom: 2.5rem; + padding: 1.5rem 6rem 1.5rem 3rem; + box-sizing: border-box; +} +.game-tip-window .tip-txt { + width: 100%; + text-align: center; + color: #f9f1be; + font-family: 'GProMedium', Tahoma, Arial; + font-size: 2.2rem; +} +.game-over-window { + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; + background-image: url('../assets/ui/game_over.jpg'); + background-size: cover; + background-repeat: no-repeat; +} +.game-over-window .share-block { + position: absolute; + top: 1rem; + right: 1rem; +} +.game-over-window .share-block.inline { + position: relative; + top: 0.6rem; + left: 0; + display: inline-block; +} +.game-over-window .share-block .share-link { + display: inline-block; + width: 3rem; + height: 3rem; + background-repeat: no-repeat; + background-size: 100% 100%; + margin: 0.2rem; + cursor: pointer; +} +.game-over-window .share-block .share-link.vk { + background-image: url('../assets/ui/social/vk.png'); +} +.game-over-window .share-block .share-link.fb { + background-image: url('../assets/ui/social/fb.png'); +} +.game-over-window .share-block .share-link.ok { + background-image: url('../assets/ui/social/ok.png'); + background-size: 97% 100%; +} +.game-over-window .share-block .share-link.tw { + background-image: url('../assets/ui/social/tw2.png'); + background-size: 100% 98%; +} +.game-over-window .share-block .share-link .vk-path { + stroke: #ae4; + fill: #ae4; +} +.game-over-window .result-block { + height: 28rem; + width: 100%; + position: absolute; + bottom: 0; +} +.game-over-window .result-line { + display: block; + width: 100%; +} +.game-over-window .result-line-options { + margin-top: 2.5rem; +} +.game-over-window .result-label { + width: 50%; + display: inline-block; + padding-right: 2rem; + box-sizing: border-box; + text-align: right; +} +.game-over-window .result-value { + width: 49%; + display: inline-block; + text-align: left; +} +.game-over-window .result-label-txt { + color: #f9f1be; + font-family: 'GProMedium', Tahoma, Arial; + font-size: 1.9rem; +} +.game-over-window .result-label-txt.result-label-txt-score { + font-size: 3rem; +} +.game-over-window .result-value-txt { + color: #f9f1be; + font-family: 'GProMedium', Tahoma, Arial; + font-size: 2.6rem; +} +.game-over-window .result-value-txt.result-value-txt-score { + font-size: 4.2rem; +} +.game-over-window .play-more-btn { + color: #f9f1be; + font-family: 'GProExtend', Tahoma, Arial; + font-size: 2.5rem; + text-transform: uppercase; + cursor: pointer; + border: 2px solid; + padding: 0.2rem 1.6rem; + border-radius: 0.3rem; +} +.game-over-window .rating-link { + color: #f9f1be; + font-family: 'GProExtend', Tahoma, Arial; + font-size: 2.8rem; + text-transform: uppercase; + cursor: pointer; + border: 2px solid; + padding: 0.2rem 1.6rem; + border-radius: 0.3rem; +} +.game-over-window .results-sub-info { + position: absolute; + bottom: 0; + width: 80%; + display: block; + margin: auto; + color: #f9f1be; + font-family: 'GProExtend', Tahoma, Arial; + font-size: 1.4rem; + margin: 0.8rem 10%; +} diff --git a/gulp/header.txt b/gulp/header.txt new file mode 100644 index 0000000..b912897 --- /dev/null +++ b/gulp/header.txt @@ -0,0 +1,12 @@ +/** + * @license + * pixi-tilemap.js - v<%= pkg.version %> + * Compiled <%= date %> + * + * pixi.js is licensed under the MIT License. + * http://www.opensource.org/licenses/mit-license.php + * + * + * <% licenseText.split('\n').forEach(function (line) { %><%= line %> + * <% }); %> + */ diff --git a/gulp/tasks/build.js b/gulp/tasks/build.js new file mode 100644 index 0000000..5c4497a --- /dev/null +++ b/gulp/tasks/build.js @@ -0,0 +1,6 @@ +var gulp = require('gulp'), + runSeq = require('run-sequence'); + +gulp.task('build', function (done) { + runSeq('clean', ['scripts'], done); +}); diff --git a/gulp/tasks/clean.js b/gulp/tasks/clean.js new file mode 100644 index 0000000..0a880b2 --- /dev/null +++ b/gulp/tasks/clean.js @@ -0,0 +1,6 @@ +var gulp = require('gulp'), + del = require('del'); + +gulp.task('clean', function () { + return del(paths.out); +}); diff --git a/gulp/tasks/dev.js b/gulp/tasks/dev.js new file mode 100644 index 0000000..9ef0f4c --- /dev/null +++ b/gulp/tasks/dev.js @@ -0,0 +1,6 @@ +var gulp = require('gulp'), + runSeq = require('run-sequence'); + +gulp.task('dev', function (done) { + runSeq('clean', ['watch'], done); +}); diff --git a/gulp/tasks/jsdoc.js b/gulp/tasks/jsdoc.js new file mode 100644 index 0000000..3cf1745 --- /dev/null +++ b/gulp/tasks/jsdoc.js @@ -0,0 +1,11 @@ +var gulp = require('gulp'), + exec = require('child_process').exec; + +gulp.task('jsdoc', function (done) { + exec('npm run docs', function (err, stdout, stderr) { + console.log(stdout); + console.log(stderr); + + done(err); + }); +}); diff --git a/gulp/tasks/jshint.js b/gulp/tasks/jshint.js new file mode 100644 index 0000000..fe6d542 --- /dev/null +++ b/gulp/tasks/jshint.js @@ -0,0 +1,12 @@ +var gulp = require('gulp'), + jshint = require('gulp-jshint'), + cache = require('gulp-cached'), + handleErrors = require('../util/handleErrors'); + +gulp.task('jshint', function () { + return gulp.src(paths.scripts) + .pipe(handleErrors()) + .pipe(cache('jshint', { optimizeMemory: true })) + .pipe(jshint()) + .pipe(jshint.reporter('jshint-summary')); +}); diff --git a/gulp/tasks/scripts.js b/gulp/tasks/scripts.js new file mode 100644 index 0000000..995a258 --- /dev/null +++ b/gulp/tasks/scripts.js @@ -0,0 +1,6 @@ +var gulp = require('gulp'), + bundle = require('../util/bundle'); + +gulp.task('scripts', function () { + return bundle(); +}); diff --git a/gulp/tasks/watch.js b/gulp/tasks/watch.js new file mode 100644 index 0000000..1b8038e --- /dev/null +++ b/gulp/tasks/watch.js @@ -0,0 +1,19 @@ +var gulp = require('gulp'), + path = require('path'), + gutil = require('gulp-util'), + bundle = require('../util/bundle'); + + +gulp.task('watch', function () { + gulp.watch(paths.scripts, ['jshint']) + .on('change', logChanges); + + return bundle.watch(); +}); + +function logChanges(event) { + gutil.log( + gutil.colors.green('File ' + event.type + ': ') + + gutil.colors.magenta(path.basename(event.path)) + ); +} diff --git a/gulp/util/bundle.js b/gulp/util/bundle.js new file mode 100644 index 0000000..517ceb3 --- /dev/null +++ b/gulp/util/bundle.js @@ -0,0 +1,76 @@ +var fs = require('fs'), + path = require('path'), + gulp = require('gulp'), + gutil = require('gulp-util'), + mirror = require('gulp-mirror'), + rename = require('gulp-rename'), + source = require('vinyl-source-stream'), + sourcemaps = require('gulp-sourcemaps'), + uglify = require('gulp-uglify'), + buffer = require('vinyl-buffer'), + browserify = require('browserify'), + watchify = require('watchify'), + handleErrors = require('../util/handleErrors'); + +// TODO - Concat license header to dev/prod build files. +function rebundle(devBundle) { + if (devBundle) { + gutil.log('Starting dev rebundle...'); + } + + var debug, min; + + debug = sourcemaps.init({loadMaps: true}); + debug.pipe(sourcemaps.write('./', {sourceRoot: './'})) + .pipe(gulp.dest(paths.out)); + + min = rename({ suffix: '.min' }); + min.pipe(sourcemaps.init({loadMaps: true})) + .pipe(uglify()) + .pipe(sourcemaps.write('./', {sourceRoot: './', addComment: true})) + .pipe(gulp.dest(paths.out)); + + var stream = this.bundle() + .on('error', handleErrors.handler) + .pipe(handleErrors()) + .pipe(source(paths.outFile)) + .pipe(buffer()); + + if (devBundle) { + return stream.pipe(debug).once('end', function () { + gutil.log('Dev rebundle complete.'); + }); + } + else { + return stream.pipe(mirror(debug, min)); + } +} + +function createBundler(args) { + args = args || {}; + args.debug = true; + + return browserify(paths.jsEntry, args); +} + +function watch(onUpdate) { + var bundler = watchify(createBundler(watchify.args)); + + bundler.on('update', function () { + var bundle = rebundle.call(this, true); + + if (onUpdate) { + bundle.on('end', onUpdate); + } + }); + + return rebundle.call(bundler); +} + +module.exports = function bundle() { + return rebundle.call(createBundler()); +}; + +module.exports.watch = watch; +module.exports.rebundle = rebundle; +module.exports.createBundler = createBundler; diff --git a/gulp/util/handleErrors.js b/gulp/util/handleErrors.js new file mode 100644 index 0000000..34dc1d0 --- /dev/null +++ b/gulp/util/handleErrors.js @@ -0,0 +1,26 @@ +var gutil = require('gulp-util'), + plumber = require('gulp-plumber'), + ERROR = gutil.colors.red('[ERROR]'); + +function errorHandler(err) { + var msg = err.toString(); + + if (msg === '[object Object]') { + msg = err; + } + + gutil.log(ERROR, err); + + if (err.stack) { + gutil.log(ERROR, err.stack); + } + + // Keep gulp from hanging on this task + this.emit('end'); +} + +module.exports = function () { + return plumber(errorHandler); +}; + +module.exports.handler = errorHandler; diff --git a/gulp/util/jsdoc.conf.json b/gulp/util/jsdoc.conf.json new file mode 100644 index 0000000..4069317 --- /dev/null +++ b/gulp/util/jsdoc.conf.json @@ -0,0 +1,55 @@ +{ + "tags": { + "allowUnknownTags": false + }, + "source": { + "include": [ + "./src/" + ], + "exclude": [ + "./src/polyfill/" + ], + "includePattern": ".+\\.js(doc)?$", + "excludePattern": "(^|\\/|\\\\)_" + }, + "plugins": [ + "plugins/markdown" + ], + "templates": { + "cleverLinks" : false, + "monospaceLinks": false, + "default" : { + "outputSourceFiles" : true + }, + "applicationName": "PIXI", + "footer" : "Made with ♥ by Goodboy Digital", + "copyright" : "PIXI Copyright © 2013-2015 Mat Groves.", + "disqus": "", + "googleAnalytics": "", + "openGraph": { + "title": "", + "type": "website", + "image": "", + "site_name": "", + "url": "" + }, + "meta": { + "title": "", + "description": "", + "keyword": "" + }, + "linenums" : true + }, + "markdown" : { + "parser" : "gfm", + "hardwrap" : true + }, + "opts": { + "encoding" : "utf8", + "recurse" : true, + "private" : false, + "lenient" : true, + "destination" : "./docs", + "template" : "./node_modules/jaguarjs-jsdoc" + } +} diff --git a/gulpfile.js b/gulpfile.js new file mode 100644 index 0000000..342e2db --- /dev/null +++ b/gulpfile.js @@ -0,0 +1,33 @@ +/* + * gulpfile.js + * =========== + * + * Rather than manage one giant configuration file responsible + * for creating multiple tasks, each task has been broken out into + * its own file in gulp/tasks. Any files in that directory get + * automatically required below. + * + * To add a new task, simply add a new task file in that directory. + * gulp/tasks/default.js specifies the default set of tasks to run + * when you run `gulp`. + * + */ + +var gulp = require('gulp'), + requireDir = require('require-dir'); + +// Specify game project paths for tasks. +global.paths = { + src: './src', + out: './bin', + outFile: 'pixi-display.js', + + get scripts() { return this.src + '/**/*.js'; }, + get jsEntry() { return this.src + '/index'; } +}; + +// Require all tasks in gulp/tasks, including subfolders +requireDir('./gulp/tasks', { recurse: true }); + +// default task +gulp.task('default', ['jshint', 'build']); diff --git a/package.json b/package.json new file mode 100644 index 0000000..abe8785 --- /dev/null +++ b/package.json @@ -0,0 +1,67 @@ +{ + "name": "pixi-display", + "version": "1.0.0", + "description": "Pixi.js plugin, allows to change rendering order of containers without changing the scene graph.", + "author": "Ivan Popelyshev", + "contributors": [ + "Ivan Popelyshev " + ], + "main": "./src/index.js", + "homepage": "http://www.pixijs.com/", + "bugs": "https://github.com/gameofbombs/pixi-display/issues", + "license": "MIT", + "repository": { + "type": "git", + "url": "https://github.com/gameofbombs/pixi-display.git" + }, + "scripts": { + "start": "gulp && gulp watch", + "test": "gulp && testem ci", + "build": "gulp", + "docs": "jsdoc -c ./gulp/util/jsdoc.conf.json -R README.md" + }, + "files": [ + "bin/", + "src/", + "LICENSE", + "package.json", + "README.md" + ], + "dependencies": { + "glslify": "^5.0.2" + }, + "devDependencies": { + "browserify": "^11.1.0", + "browserify-versionify": "^1.0.6", + "chai": "^3.2.0", + "del": "^2.0.2", + "gulp": "^3.9.0", + "gulp-cached": "^1.1.0", + "gulp-concat": "^2.6.0", + "gulp-debug": "^2.1.0", + "gulp-jshint": "^2.0.0", + "gulp-mirror": "^1.0.0", + "gulp-plumber": "^1.0.1", + "gulp-rename": "^1.2.2", + "gulp-sourcemaps": "^1.5.2", + "gulp-uglify": "^1.5.1", + "gulp-util": "^3.0.6", + "jaguarjs-jsdoc": "git+https://github.com/davidshimjs/jaguarjs-jsdoc.git", + "jsdoc": "^3.4.0", + "jshint": "^2.9.1", + "jshint-summary": "^0.4.0", + "minimist": "^1.2.0", + "mocha": "^2.4.5", + "require-dir": "^0.3.0", + "run-sequence": "^1.1.2", + "testem": "^0.9.4", + "vinyl-buffer": "^1.0.0", + "vinyl-source-stream": "^1.1.0", + "watchify": "^3.7.0" + }, + "browserify": { + "transform": [ + "glslify" + ] + } +} diff --git a/src/Const.js b/src/Const.js new file mode 100644 index 0000000..73e7e26 --- /dev/null +++ b/src/Const.js @@ -0,0 +1,25 @@ +var Const = { + /** + * controls RenderList behaviour. AUTO_ will be assigned by renderlist itself + */ + DISPLAY_FLAG: { + /** + * pass through, recursively go into children + */ + AUTO_CHILDREN: 0, + /** + * container will handle it itself + */ + AUTO_CONTAINER: 1, + /** + * like DisplayObject, no children + */ + AUTO_OBJECT: 2, + /** + * Container will always handle rendering itself, no need to go inside + */ + MANUAL_CONTAINER: 3 + } +}; + +module.exports = Const; diff --git a/src/ContainerMixin.js b/src/ContainerMixin.js new file mode 100644 index 0000000..3780827 --- /dev/null +++ b/src/ContainerMixin.js @@ -0,0 +1,14 @@ +var ContainerMixin = { + /** + * + * @type {PIXI.DisplayList} + */ + displayList: null, + + /** + * + */ + displayFlag: 0 +}; + +module.exports = ContainerMixin; diff --git a/src/DisplayGroup.js b/src/DisplayGroup.js new file mode 100644 index 0000000..43f4291 --- /dev/null +++ b/src/DisplayGroup.js @@ -0,0 +1,14 @@ +/** + * A shared component for multiple DisplayObject's allows to specify rendering order for them + * + * @class + * @extends EventEmitter + * @memberof PIXI + */ +function DisplayGroup() { + /** + * Children that were rendered in last run + * @type {Array} + */ + this.computedChildren = []; +} diff --git a/src/DisplayObjectMixin.js b/src/DisplayObjectMixin.js new file mode 100644 index 0000000..c5cac41 --- /dev/null +++ b/src/DisplayObjectMixin.js @@ -0,0 +1,14 @@ +var DisplayObjectMixin = { + /** + * + * @type {PIXI.DisplayGroup} + */ + displayGroup: null, + + /** + * + */ + displayFlag: 0 +}; + +module.exports = DisplayObjectMixin; diff --git a/src/index.js b/src/index.js new file mode 100644 index 0000000..b125ba1 --- /dev/null +++ b/src/index.js @@ -0,0 +1,36 @@ +// PIXI +// +// PIXI.DisplayGroup - фактически zIndex. +// +// displayObject.displayGroup = new PIXI.DisplayGroup(0); - z-index , как shared компонента +// +// container.displayList = new PIXI.DisplayList(); - штука которая внутри использует эти DisplayList , как компонента +// +// container.displayOrder - номер апдейта контейнера в рендере +// +// worldDisplayGroup - берётся displaygroup от родителя +// +// displayFlag - 0 1 или 2. если 0,1 или 2 то автоматически меняется, если 3 то фиксирован +// +// событие display позволяет отследить всю хрень + +var plugin = { + DisplayGroup: require('./DisplayGroup'), + Const: require('./Const'), + DisplayObjectMixin: require('./DisplayObjectMixin'), + ContainerMixin: require('./ContainerMixin') +}; + +var pluginMixin = { + DisplayGroup: plugin.DisplayGroup +}; + +Object.assign(pluginMixin, plugin.Const); + +Object.assign(PIXI.DisplayObject.prototype, plugin.DisplayObjectMixin); + +Object.assign(PIXI.Container.prototype, plugin.ContainerMixin); + +Object.assign(PIXI, pluginMixin); + +module.exports = plugin;