diff --git a/README.md b/README.md
index 2210e23a..9e1148d7 100644
--- a/README.md
+++ b/README.md
@@ -81,7 +81,7 @@ Canvas fallback is 5x slower than vanilla rpgmaker. WebGL version is faster and
* [WebGL Retina Demo](https://pixijs.io/tilemap/examples/?resolution=2)
* [60% Scale](https://pixijs.io/tilemap/examples/?resolution=2&scale=0.6)
* [140% Scale](https://pixijs.io/tilemap/examples/?resolution=2&scale=1.4)
-* [Canvas Demo](https://pixijs.io/tilemap/examples/?canvas)
+* [WebGPU Demo](https://pixijs.io/tilemap/examples/?preference=webgpu)
## More Tutorials
diff --git a/examples/assets/atlas.png b/examples/assets/atlas.png
index 8534c227..9d45ffdb 100644
Binary files a/examples/assets/atlas.png and b/examples/assets/atlas.png differ
diff --git a/examples/assets/brick.png b/examples/assets/brick.png
index 4a5f1aea..1a3345d0 100644
Binary files a/examples/assets/brick.png and b/examples/assets/brick.png differ
diff --git a/examples/assets/brick_wall.png b/examples/assets/brick_wall.png
index 1cd6eed9..81e20260 100644
Binary files a/examples/assets/brick_wall.png and b/examples/assets/brick_wall.png differ
diff --git a/examples/assets/button.png b/examples/assets/button.png
index 65181d6b..25058667 100644
Binary files a/examples/assets/button.png and b/examples/assets/button.png differ
diff --git a/examples/assets/chest.png b/examples/assets/chest.png
index 3639838b..acf1c305 100644
Binary files a/examples/assets/chest.png and b/examples/assets/chest.png differ
diff --git a/examples/assets/grass.png b/examples/assets/grass.png
index e911c947..01c05aed 100644
Binary files a/examples/assets/grass.png and b/examples/assets/grass.png differ
diff --git a/examples/assets/red_chest.png b/examples/assets/red_chest.png
index 29d38da0..3b18cee0 100644
Binary files a/examples/assets/red_chest.png and b/examples/assets/red_chest.png differ
diff --git a/examples/assets/tough.png b/examples/assets/tough.png
index 5c1f0aa1..46966da5 100644
Binary files a/examples/assets/tough.png and b/examples/assets/tough.png differ
diff --git a/examples/basic.html b/examples/basic.html
index ac8447c8..8e2a75e5 100644
--- a/examples/basic.html
+++ b/examples/basic.html
@@ -1,13 +1,13 @@
-
+
PIXI-TILEMAP minimal test
-
+
diff --git a/examples/css/main.css b/examples/css/main.css
index 43245854..97b14cb9 100644
--- a/examples/css/main.css
+++ b/examples/css/main.css
@@ -1,3378 +1,10 @@
-@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%;
+ background: black;
+ margin: 0;
+ overflow: hidden;
+}
+canvas {
+ margin: 0;
+ padding: 0;
+ display: block;
}
diff --git a/examples/demo/basic.js b/examples/demo/basic.js
index c7d58854..80b7ccff 100644
--- a/examples/demo/basic.js
+++ b/examples/demo/basic.js
@@ -1,14 +1,13 @@
/* global PIXI */
-const use_webgpu = new URLSearchParams(window.location.search).get('webgpu') !== null;
-
(async () =>
{
+ const searchParams = new URLSearchParams(window.location.search);
const app = new PIXI.Application();
await app.init({
width: 800,
height: 600,
- preference: use_webgpu ? 'webgpu' : 'webgl',
+ preference: searchParams.get('preference') || 'webgl',
hello: true
});
const tilemap = new PIXI.tilemap.CompositeTilemap();
diff --git a/examples/demo/main.js b/examples/demo/main.js
index 0a1b7d78..4383e396 100644
--- a/examples/demo/main.js
+++ b/examples/demo/main.js
@@ -1,101 +1,88 @@
-/* eslint-disable */
-/**
- * Created by Liza on 30.10.2015.
- */
-
-function getOptionValue(name) {
- var params = location.search.slice(1).split('&');
- for (var i=0;i
-
-
+=
Tiles demo
-
+
-
-
+
+
diff --git a/examples/rpgmaker/img/Dungeon_A1.png b/examples/rpgmaker/img/Dungeon_A1.png
index 793c623b..07dc1136 100644
Binary files a/examples/rpgmaker/img/Dungeon_A1.png and b/examples/rpgmaker/img/Dungeon_A1.png differ
diff --git a/examples/rpgmaker/img/Dungeon_A2.png b/examples/rpgmaker/img/Dungeon_A2.png
index 5705c878..3c49f567 100644
Binary files a/examples/rpgmaker/img/Dungeon_A2.png and b/examples/rpgmaker/img/Dungeon_A2.png differ
diff --git a/examples/rpgmaker/img/Dungeon_A4.png b/examples/rpgmaker/img/Dungeon_A4.png
index 9d240bae..6bdcfd61 100644
Binary files a/examples/rpgmaker/img/Dungeon_A4.png and b/examples/rpgmaker/img/Dungeon_A4.png differ
diff --git a/examples/rpgmaker/img/Dungeon_A5.png b/examples/rpgmaker/img/Dungeon_A5.png
index 20d2cec0..0263d3ce 100644
Binary files a/examples/rpgmaker/img/Dungeon_A5.png and b/examples/rpgmaker/img/Dungeon_A5.png differ
diff --git a/examples/rpgmaker/img/Dungeon_B.png b/examples/rpgmaker/img/Dungeon_B.png
index 3d8437e8..08e82876 100644
Binary files a/examples/rpgmaker/img/Dungeon_B.png and b/examples/rpgmaker/img/Dungeon_B.png differ
diff --git a/examples/rpgmaker/img/Dungeon_C.png b/examples/rpgmaker/img/Dungeon_C.png
index 162a4101..625e617b 100644
Binary files a/examples/rpgmaker/img/Dungeon_C.png and b/examples/rpgmaker/img/Dungeon_C.png differ
diff --git a/examples/rpgmaker/img/Inside_A1.png b/examples/rpgmaker/img/Inside_A1.png
index 6ec66773..304fa35f 100644
Binary files a/examples/rpgmaker/img/Inside_A1.png and b/examples/rpgmaker/img/Inside_A1.png differ
diff --git a/examples/rpgmaker/img/Inside_A2.png b/examples/rpgmaker/img/Inside_A2.png
index 77b8c0a6..7826a730 100644
Binary files a/examples/rpgmaker/img/Inside_A2.png and b/examples/rpgmaker/img/Inside_A2.png differ
diff --git a/examples/rpgmaker/img/Inside_A4.png b/examples/rpgmaker/img/Inside_A4.png
index 5e37e444..6cf753d7 100644
Binary files a/examples/rpgmaker/img/Inside_A4.png and b/examples/rpgmaker/img/Inside_A4.png differ
diff --git a/examples/rpgmaker/img/Inside_A5.png b/examples/rpgmaker/img/Inside_A5.png
index fd7890d5..fa446c2d 100644
Binary files a/examples/rpgmaker/img/Inside_A5.png and b/examples/rpgmaker/img/Inside_A5.png differ
diff --git a/examples/rpgmaker/img/Inside_B.png b/examples/rpgmaker/img/Inside_B.png
index cb102519..6ca787aa 100644
Binary files a/examples/rpgmaker/img/Inside_B.png and b/examples/rpgmaker/img/Inside_B.png differ
diff --git a/examples/rpgmaker/img/Inside_C.png b/examples/rpgmaker/img/Inside_C.png
index 5ffb3ec5..0c0457da 100644
Binary files a/examples/rpgmaker/img/Inside_C.png and b/examples/rpgmaker/img/Inside_C.png differ
diff --git a/examples/rpgmaker/img/Outside_A1.png b/examples/rpgmaker/img/Outside_A1.png
index 95966db4..3eb4997b 100644
Binary files a/examples/rpgmaker/img/Outside_A1.png and b/examples/rpgmaker/img/Outside_A1.png differ
diff --git a/examples/rpgmaker/img/Outside_A2.png b/examples/rpgmaker/img/Outside_A2.png
index 14c029a9..ebf6ea03 100644
Binary files a/examples/rpgmaker/img/Outside_A2.png and b/examples/rpgmaker/img/Outside_A2.png differ
diff --git a/examples/rpgmaker/img/Outside_A3.png b/examples/rpgmaker/img/Outside_A3.png
index 0f192a18..3224c904 100644
Binary files a/examples/rpgmaker/img/Outside_A3.png and b/examples/rpgmaker/img/Outside_A3.png differ
diff --git a/examples/rpgmaker/img/Outside_A4.png b/examples/rpgmaker/img/Outside_A4.png
index c9af5cfa..ffadb442 100644
Binary files a/examples/rpgmaker/img/Outside_A4.png and b/examples/rpgmaker/img/Outside_A4.png differ
diff --git a/examples/rpgmaker/img/Outside_A5.png b/examples/rpgmaker/img/Outside_A5.png
index c5ac2fd7..7ff41d4e 100644
Binary files a/examples/rpgmaker/img/Outside_A5.png and b/examples/rpgmaker/img/Outside_A5.png differ
diff --git a/examples/rpgmaker/img/Outside_B.png b/examples/rpgmaker/img/Outside_B.png
index c907136e..3ac051f5 100644
Binary files a/examples/rpgmaker/img/Outside_B.png and b/examples/rpgmaker/img/Outside_B.png differ
diff --git a/examples/rpgmaker/img/Outside_C.png b/examples/rpgmaker/img/Outside_C.png
index fe203ed7..d4fa9253 100644
Binary files a/examples/rpgmaker/img/Outside_C.png and b/examples/rpgmaker/img/Outside_C.png differ
diff --git a/examples/rpgmaker/img/SF_Inside_A4.png b/examples/rpgmaker/img/SF_Inside_A4.png
index 4c995071..8ced4076 100644
Binary files a/examples/rpgmaker/img/SF_Inside_A4.png and b/examples/rpgmaker/img/SF_Inside_A4.png differ
diff --git a/examples/rpgmaker/img/SF_Inside_B.png b/examples/rpgmaker/img/SF_Inside_B.png
index cd7cfc82..71e53c6c 100644
Binary files a/examples/rpgmaker/img/SF_Inside_B.png and b/examples/rpgmaker/img/SF_Inside_B.png differ
diff --git a/examples/rpgmaker/img/SF_Inside_C.png b/examples/rpgmaker/img/SF_Inside_C.png
index abc6f3aa..469f722e 100644
Binary files a/examples/rpgmaker/img/SF_Inside_C.png and b/examples/rpgmaker/img/SF_Inside_C.png differ
diff --git a/examples/rpgmaker/img/SF_Outside_A3.png b/examples/rpgmaker/img/SF_Outside_A3.png
index e324bd7d..2458b324 100644
Binary files a/examples/rpgmaker/img/SF_Outside_A3.png and b/examples/rpgmaker/img/SF_Outside_A3.png differ
diff --git a/examples/rpgmaker/img/SF_Outside_A4.png b/examples/rpgmaker/img/SF_Outside_A4.png
index 593120b1..6fe2c8cd 100644
Binary files a/examples/rpgmaker/img/SF_Outside_A4.png and b/examples/rpgmaker/img/SF_Outside_A4.png differ
diff --git a/examples/rpgmaker/img/SF_Outside_A5.png b/examples/rpgmaker/img/SF_Outside_A5.png
index a34c96ce..3735b90a 100644
Binary files a/examples/rpgmaker/img/SF_Outside_A5.png and b/examples/rpgmaker/img/SF_Outside_A5.png differ
diff --git a/examples/rpgmaker/img/SF_Outside_B.png b/examples/rpgmaker/img/SF_Outside_B.png
index 07da2b8c..20a2ae76 100644
Binary files a/examples/rpgmaker/img/SF_Outside_B.png and b/examples/rpgmaker/img/SF_Outside_B.png differ
diff --git a/examples/rpgmaker/img/SF_Outside_C.png b/examples/rpgmaker/img/SF_Outside_C.png
index 23eac09c..b7e3e8ac 100644
Binary files a/examples/rpgmaker/img/SF_Outside_C.png and b/examples/rpgmaker/img/SF_Outside_C.png differ
diff --git a/examples/rpgmaker/img/World_A1.png b/examples/rpgmaker/img/World_A1.png
index 3d3332cd..6ce02ce2 100644
Binary files a/examples/rpgmaker/img/World_A1.png and b/examples/rpgmaker/img/World_A1.png differ
diff --git a/examples/rpgmaker/img/World_A2.png b/examples/rpgmaker/img/World_A2.png
index 8bf35c23..3ce70f6c 100644
Binary files a/examples/rpgmaker/img/World_A2.png and b/examples/rpgmaker/img/World_A2.png differ
diff --git a/examples/rpgmaker/img/World_B.png b/examples/rpgmaker/img/World_B.png
index efe1b8f0..1a001c85 100644
Binary files a/examples/rpgmaker/img/World_B.png and b/examples/rpgmaker/img/World_B.png differ
diff --git a/examples/rpgmaker/img/World_C.png b/examples/rpgmaker/img/World_C.png
index 46ef185e..1badcc9a 100644
Binary files a/examples/rpgmaker/img/World_C.png and b/examples/rpgmaker/img/World_C.png differ