Files

5437 lines
113 KiB
CSS

@charset "UTF-8";/*!
Magic - http://minimamente.com
Licensed under the MIT license
Copyright (c) 2014 Christian Pucci
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.
*/
.magictime {
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
-ms-animation-duration: 1s;
-o-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-ms-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
}
.magic {
-webkit-animation-name: magic;
-moz-animation-name: magic;
-ms-animation-name: magic;
-o-animation-name: magic;
animation-name: magic;
}
.openDownLeft {
-webkit-animation-name: openDownLeft;
-moz-animation-name: openDownLeft;
-ms-animation-name: openDownLeft;
-o-animation-name: openDownLeft;
animation-name: openDownLeft;
}
.openDownRight {
-webkit-animation-name: openDownRight;
-moz-animation-name: openDownRight;
-ms-animation-name: openDownRight;
-o-animation-name: openDownRight;
animation-name: openDownRight;
}
.openUpLeft {
-webkit-animation-name: openUpLeft;
-moz-animation-name: openUpLeft;
-ms-animation-name: openUpLeft;
-o-animation-name: openUpLeft;
animation-name: openUpLeft;
}
.openUpRight {
-webkit-animation-name: openUpRight;
-moz-animation-name: openUpRight;
-ms-animation-name: openUpRight;
-o-animation-name: openUpRight;
animation-name: openUpRight;
}
.openDownLeftRetourn {
-webkit-animation-name: openDownLeftRetourn;
-moz-animation-name: openDownLeftRetourn;
-ms-animation-name: openDownLeftRetourn;
-o-animation-name: openDownLeftRetourn;
animation-name: openDownLeftRetourn;
}
.openDownRightRetourn {
-webkit-animation-name: openDownRightRetourn;
-moz-animation-name: openDownRightRetourn;
-ms-animation-name: openDownRightRetourn;
-o-animation-name: openDownRightRetourn;
animation-name: openDownRightRetourn;
}
.openUpLeftRetourn {
-webkit-animation-name: openUpLeftRetourn;
-moz-animation-name: openUpLeftRetourn;
-ms-animation-name: openUpLeftRetourn;
-o-animation-name: openUpLeftRetourn;
animation-name: openUpLeftRetourn;
}
.openUpRightRetourn {
-webkit-animation-name: openUpRightRetourn;
-moz-animation-name: openUpRightRetourn;
-ms-animation-name: openUpRightRetourn;
-o-animation-name: openUpRightRetourn;
animation-name: openUpRightRetourn;
}
.openDownLeftOut {
-webkit-animation-name: openDownLeftOut;
-moz-animation-name: openDownLeftOut;
-ms-animation-name: openDownLeftOut;
-o-animation-name: openDownLeftOut;
animation-name: openDownLeftOut;
}
.openDownRightOut {
-webkit-animation-name: openDownRightOut;
-moz-animation-name: openDownRightOut;
-ms-animation-name: openDownRightOut;
-o-animation-name: openDownRightOut;
animation-name: openDownRightOut;
}
.openUpLeftOut {
-webkit-animation-name: openUpLeftOut;
-moz-animation-name: openUpLeftOut;
-ms-animation-name: openUpLeftOut;
-o-animation-name: openUpLeftOut;
animation-name: openUpLeftOut;
}
.openUpRightOut {
-webkit-animation-name: openUpRightOut;
-moz-animation-name: openUpRightOut;
-ms-animation-name: openUpRightOut;
-o-animation-name: openUpRightOut;
animation-name: openUpRightOut;
}
.perspectiveDown {
-webkit-backface-visibility: visible !important;
-moz-backface-visibility: visible !important;
-ms-backface-visibility: visible !important;
-o-backface-visibility: visible !important;
backface-visibility: visible !important;
-webkit-animation-name: perspectiveDown;
-moz-animation-name: perspectiveDown;
-ms-animation-name: perspectiveDown;
-o-animation-name: perspectiveDown;
animation-name: perspectiveDown;
}
.perspectiveLeft {
-webkit-backface-visibility: visible !important;
-moz-backface-visibility: visible !important;
-ms-backface-visibility: visible !important;
-o-backface-visibility: visible !important;
backface-visibility: visible !important;
-webkit-animation-name: perspectiveLeft;
-moz-animation-name: perspectiveLeft;
-ms-animation-name: perspectiveLeft;
-o-animation-name: perspectiveLeft;
animation-name: perspectiveLeft;
}
.perspectiveRight {
-webkit-backface-visibility: visible !important;
-moz-backface-visibility: visible !important;
-ms-backface-visibility: visible !important;
-o-backface-visibility: visible !important;
backface-visibility: visible !important;
-webkit-animation-name: perspectiveRight;
-moz-animation-name: perspectiveRight;
-ms-animation-name: perspectiveRight;
-o-animation-name: perspectiveRight;
animation-name: perspectiveRight;
}
.perspectiveUp {
-webkit-backface-visibility: visible !important;
-moz-backface-visibility: visible !important;
-ms-backface-visibility: visible !important;
-o-backface-visibility: visible !important;
backface-visibility: visible !important;
-webkit-animation-name: perspectiveUp;
-moz-animation-name: perspectiveUp;
-ms-animation-name: perspectiveUp;
-o-animation-name: perspectiveUp;
animation-name: perspectiveUp;
}
.perspectiveDownRetourn {
-webkit-backface-visibility: visible !important;
-moz-backface-visibility: visible !important;
-ms-backface-visibility: visible !important;
-o-backface-visibility: visible !important;
backface-visibility: visible !important;
-webkit-animation-name: perspectiveDownRetourn;
-moz-animation-name: perspectiveDownRetourn;
-ms-animation-name: perspectiveDownRetourn;
-o-animation-name: perspectiveDownRetourn;
animation-name: perspectiveDownRetourn;
}
.perspectiveLeftRetourn {
-webkit-backface-visibility: visible !important;
-moz-backface-visibility: visible !important;
-ms-backface-visibility: visible !important;
-o-backface-visibility: visible !important;
backface-visibility: visible !important;
-webkit-animation-name: perspectiveLeftRetourn;
-moz-animation-name: perspectiveLeftRetourn;
-ms-animation-name: perspectiveLeftRetourn;
-o-animation-name: perspectiveLeftRetourn;
animation-name: perspectiveLeftRetourn;
}
.perspectiveRightRetourn {
-webkit-backface-visibility: visible !important;
-moz-backface-visibility: visible !important;
-ms-backface-visibility: visible !important;
-o-backface-visibility: visible !important;
backface-visibility: visible !important;
-webkit-animation-name: perspectiveRightRetourn;
-moz-animation-name: perspectiveRightRetourn;
-ms-animation-name: perspectiveRightRetourn;
-o-animation-name: perspectiveRightRetourn;
animation-name: perspectiveRightRetourn;
}
.perspectiveUpRetourn {
-webkit-backface-visibility: visible !important;
-moz-backface-visibility: visible !important;
-ms-backface-visibility: visible !important;
-o-backface-visibility: visible !important;
backface-visibility: visible !important;
-webkit-animation-name: perspectiveUpRetourn;
-moz-animation-name: perspectiveUpRetourn;
-ms-animation-name: perspectiveUpRetourn;
-o-animation-name: perspectiveUpRetourn;
animation-name: perspectiveUpRetourn;
}
.puffIn {
-webkit-animation-name: puffIn;
-moz-animation-name: puffIn;
-ms-animation-name: puffIn;
-o-animation-name: puffIn;
animation-name: puffIn;
}
.puffOut {
-webkit-animation-name: puffOut;
-moz-animation-name: puffOut;
-ms-animation-name: puffOut;
-o-animation-name: puffOut;
animation-name: puffOut;
}
.rotateDown {
-webkit-backface-visibility: visible !important;
-moz-backface-visibility: visible !important;
-ms-backface-visibility: visible !important;
-o-backface-visibility: visible !important;
backface-visibility: visible !important;
-webkit-animation-name: rotateDown;
-moz-animation-name: rotateDown;
-ms-animation-name: rotateDown;
-o-animation-name: rotateDown;
animation-name: rotateDown;
}
.rotateLeft {
-webkit-backface-visibility: visible !important;
-moz-backface-visibility: visible !important;
-ms-backface-visibility: visible !important;
-o-backface-visibility: visible !important;
backface-visibility: visible !important;
-webkit-animation-name: rotateLeft;
-moz-animation-name: rotateLeft;
-ms-animation-name: rotateLeft;
-o-animation-name: rotateLeft;
animation-name: rotateLeft;
}
.rotateRight {
-webkit-backface-visibility: visible !important;
-moz-backface-visibility: visible !important;
-ms-backface-visibility: visible !important;
-o-backface-visibility: visible !important;
backface-visibility: visible !important;
-webkit-animation-name: rotateRight;
-moz-animation-name: rotateRight;
-ms-animation-name: rotateRight;
-o-animation-name: rotateRight;
animation-name: rotateRight;
}
.rotateUp {
-webkit-backface-visibility: visible !important;
-moz-backface-visibility: visible !important;
-ms-backface-visibility: visible !important;
-o-backface-visibility: visible !important;
backface-visibility: visible !important;
-webkit-animation-name: rotateUp;
-moz-animation-name: rotateUp;
-ms-animation-name: rotateUp;
-o-animation-name: rotateUp;
animation-name: rotateUp;
}
.slideDown {
-webkit-animation-name: slideDown;
-moz-animation-name: slideDown;
-ms-animation-name: slideDown;
-o-animation-name: slideDown;
animation-name: slideDown;
}
.slideLeft {
-webkit-animation-name: slideLeft;
-moz-animation-name: slideLeft;
-ms-animation-name: slideLeft;
-o-animation-name: slideLeft;
animation-name: slideLeft;
}
.slideRight {
-webkit-animation-name: slideRight;
-moz-animation-name: slideRight;
-ms-animation-name: slideRight;
-o-animation-name: slideRight;
animation-name: slideRight;
}
.slideUp {
-webkit-animation-name: slideUp;
-moz-animation-name: slideUp;
-ms-animation-name: slideUp;
-o-animation-name: slideUp;
animation-name: slideUp;
}
.slideDownRetourn {
-webkit-animation-name: slideDownRetourn;
-moz-animation-name: slideDownRetourn;
-ms-animation-name: slideDownRetourn;
-o-animation-name: slideDownRetourn;
animation-name: slideDownRetourn;
}
.slideLeftRetourn {
-webkit-animation-name: slideLeftRetourn;
-moz-animation-name: slideLeftRetourn;
-ms-animation-name: slideLeftRetourn;
-o-animation-name: slideLeftRetourn;
animation-name: slideLeftRetourn;
}
.slideRightRetourn {
-webkit-animation-name: slideRightRetourn;
-moz-animation-name: slideRightRetourn;
-ms-animation-name: slideRightRetourn;
-o-animation-name: slideRightRetourn;
animation-name: slideRightRetourn;
}
.slideUpRetourn {
-webkit-animation-name: slideUpRetourn;
-moz-animation-name: slideUpRetourn;
-ms-animation-name: slideUpRetourn;
-o-animation-name: slideUpRetourn;
animation-name: slideUpRetourn;
}
.swap {
-webkit-animation-name: swap;
-moz-animation-name: swap;
-ms-animation-name: swap;
-o-animation-name: swap;
animation-name: swap;
}
.twisterInDown {
-webkit-animation-name: twisterInDown;
-moz-animation-name: twisterInDown;
-ms-animation-name: twisterInDown;
-o-animation-name: twisterInDown;
animation-name: twisterInDown;
}
.twisterInUp {
-webkit-animation-name: twisterInUp;
-moz-animation-name: twisterInUp;
-ms-animation-name: twisterInUp;
-o-animation-name: twisterInUp;
animation-name: twisterInUp;
}
.vanishIn {
-webkit-animation-name: vanishIn;
-moz-animation-name: vanishIn;
-ms-animation-name: vanishIn;
-o-animation-name: vanishIn;
animation-name: vanishIn;
}
.vanishOut {
-webkit-animation-name: vanishOut;
-moz-animation-name: vanishOut;
-ms-animation-name: vanishOut;
-o-animation-name: vanishOut;
animation-name: vanishOut;
}
.swashOut {
-webkit-animation-name: swashOut;
-moz-animation-name: swashOut;
-ms-animation-name: swashOut;
-o-animation-name: swashOut;
animation-name: swashOut;
}
.swashIn {
-webkit-animation-name: swashIn;
-moz-animation-name: swashIn;
-ms-animation-name: swashIn;
-o-animation-name: swashIn;
animation-name: swashIn;
}
.foolishOut {
-webkit-animation-name: foolishOut;
-moz-animation-name: foolishOut;
-ms-animation-name: foolishOut;
-o-animation-name: foolishOut;
animation-name: foolishOut;
}
.foolishIn {
-webkit-animation-name: foolishIn;
-moz-animation-name: foolishIn;
-ms-animation-name: foolishIn;
-o-animation-name: foolishIn;
animation-name: foolishIn;
}
.holeOut {
-webkit-animation-name: holeOut;
-moz-animation-name: holeOut;
-ms-animation-name: holeOut;
-o-animation-name: holeOut;
animation-name: holeOut;
}
.tinRightOut {
-webkit-animation-name: tinRightOut;
-moz-animation-name: tinRightOut;
-ms-animation-name: tinRightOut;
-o-animation-name: tinRightOut;
animation-name: tinRightOut;
}
.tinLeftOut {
-webkit-animation-name: tinLeftOut;
-moz-animation-name: tinLeftOut;
-ms-animation-name: tinLeftOut;
-o-animation-name: tinLeftOut;
animation-name: tinLeftOut;
}
.tinUpOut {
-webkit-animation-name: tinUpOut;
-moz-animation-name: tinUpOut;
-ms-animation-name: tinUpOut;
-o-animation-name: tinUpOut;
animation-name: tinUpOut;
}
.tinDownOut {
-webkit-animation-name: tinDownOut;
-moz-animation-name: tinDownOut;
-ms-animation-name: tinDownOut;
-o-animation-name: tinDownOut;
animation-name: tinDownOut;
}
.tinRightIn {
-webkit-animation-name: tinRightIn;
-moz-animation-name: tinRightIn;
-ms-animation-name: tinRightIn;
-o-animation-name: tinRightIn;
animation-name: tinRightIn;
}
.tinLeftIn {
-webkit-animation-name: tinLeftIn;
-moz-animation-name: tinLeftIn;
-ms-animation-name: tinLeftIn;
-o-animation-name: tinLeftIn;
animation-name: tinLeftIn;
}
.tinUpIn {
-webkit-animation-name: tinUpIn;
-moz-animation-name: tinUpIn;
-ms-animation-name: tinUpIn;
-o-animation-name: tinUpIn;
animation-name: tinUpIn;
}
.tinDownIn {
-webkit-animation-name: tinDownIn;
-moz-animation-name: tinDownIn;
-ms-animation-name: tinDownIn;
-o-animation-name: tinDownIn;
animation-name: tinDownIn;
}
.bombRightOut {
-webkit-animation-name: bombRightOut;
-moz-animation-name: bombRightOut;
-ms-animation-name: bombRightOut;
-o-animation-name: bombRightOut;
animation-name: bombRightOut;
}
.bombLeftOut {
-webkit-animation-name: bombLeftOut;
-moz-animation-name: bombLeftOut;
-ms-animation-name: bombLeftOut;
-o-animation-name: bombLeftOut;
animation-name: bombLeftOut;
}
.boingInUp {
-webkit-animation-name: boingInUp;
-moz-animation-name: boingInUp;
-ms-animation-name: boingInUp;
-o-animation-name: boingInUp;
animation-name: boingInUp;
}
.boingOutDown {
-webkit-animation-name: boingOutDown;
-moz-animation-name: boingOutDown;
-ms-animation-name: boingOutDown;
-o-animation-name: boingOutDown;
animation-name: boingOutDown;
}
.spaceOutUp {
-webkit-animation-name: spaceOutUp;
-moz-animation-name: spaceOutUp;
-ms-animation-name: spaceOutUp;
-o-animation-name: spaceOutUp;
animation-name: spaceOutUp;
}
.spaceOutRight {
-webkit-animation-name: spaceOutRight;
-moz-animation-name: spaceOutRight;
-ms-animation-name: spaceOutRight;
-o-animation-name: spaceOutRight;
animation-name: spaceOutRight;
}
.spaceOutDown {
-webkit-animation-name: spaceOutDown;
-moz-animation-name: spaceOutDown;
-ms-animation-name: spaceOutDown;
-o-animation-name: spaceOutDown;
animation-name: spaceOutDown;
}
.spaceOutLeft {
-webkit-animation-name: spaceOutLeft;
-moz-animation-name: spaceOutLeft;
-ms-animation-name: spaceOutLeft;
-o-animation-name: spaceOutLeft;
animation-name: spaceOutLeft;
}
.spaceInUp {
-webkit-animation-name: spaceInUp;
-moz-animation-name: spaceInUp;
-ms-animation-name: spaceInUp;
-o-animation-name: spaceInUp;
animation-name: spaceInUp;
}
.spaceInRight {
-webkit-animation-name: spaceInRight;
-moz-animation-name: spaceInRight;
-ms-animation-name: spaceInRight;
-o-animation-name: spaceInRight;
animation-name: spaceInRight;
}
.spaceInDown {
-webkit-animation-name: spaceInDown;
-moz-animation-name: spaceInDown;
-ms-animation-name: spaceInDown;
-o-animation-name: spaceInDown;
animation-name: spaceInDown;
}
.spaceInLeft {
-webkit-animation-name: spaceInLeft;
-moz-animation-name: spaceInLeft;
-ms-animation-name: spaceInLeft;
-o-animation-name: spaceInLeft;
animation-name: spaceInLeft;
}
@-moz-keyframes magic {
0% {
opacity: 1;
-moz-transform-origin: 100% 200%;
-moz-transform: scale(1, 1) rotate(0deg);
}
100% {
opacity: 0;
-moz-transform-origin: 200% 500%;
-moz-transform: scale(0, 0) rotate(270deg);
}
}
@-webkit-keyframes magic {
0% {
opacity: 1;
-webkit-transform-origin: 100% 200%;
-webkit-transform: scale(1, 1) rotate(0deg);
}
100% {
opacity: 0;
-webkit-transform-origin: 200% 500%;
-webkit-transform: scale(0, 0) rotate(270deg);
}
}
@-o-keyframes magic {
0% {
opacity: 1;
-o-transform-origin: 100% 200%;
-o-transform: scale(1, 1) rotate(0deg);
}
100% {
opacity: 0;
-o-transform-origin: 200% 500%;
-o-transform: scale(0, 0) rotate(270deg);
}
}
@-ms-keyframes magic {
0% {
opacity: 1;
-ms-transform-origin: 100% 200%;
-ms-transform: scale(1, 1) rotate(0deg);
}
100% {
opacity: 0;
-ms-transform-origin: 200% 500%;
-ms-transform: scale(0, 0) rotate(270deg);
}
}
@keyframes magic {
0% {
opacity: 1;
transform-origin: 100% 200%;
transform: scale(1, 1) rotate(0deg);
}
100% {
opacity: 0;
transform-origin: 200% 500%;
transform: scale(0, 0) rotate(270deg);
}
}
@-moz-keyframes openDownLeft {
0% {
-moz-transform-origin: bottom left;
-moz-transform: rotate(0deg);
-moz-animation-timing-function: ease-out;
}
100% {
-moz-transform-origin: bottom left;
-moz-transform: rotate(-110deg);
-moz-animation-timing-function: ease-in-out;
}
}
@-webkit-keyframes openDownLeft {
0% {
-webkit-transform-origin: bottom left;
-webkit-transform: rotate(0deg);
-webkit-animation-timing-function: ease-out;
}
100% {
-webkit-transform-origin: bottom left;
-webkit-transform: rotate(-110deg);
-webkit-animation-timing-function: ease-in-out;
}
}
@-o-keyframes openDownLeft {
0% {
-o-transform-origin: bottom left;
-o-transform: rotate(0deg);
-o-animation-timing-function: ease-out;
}
100% {
-o-transform-origin: bottom left;
-o-transform: rotate(-110deg);
-o-animation-timing-function: ease-in-out;
}
}
@-ms-keyframes openDownLeft {
0% {
-ms-transform-origin: bottom left;
-ms-transform: rotate(0deg);
-ms-animation-timing-function: ease-out;
}
100% {
-ms-transform-origin: bottom left;
-ms-transform: rotate(-110deg);
-ms-animation-timing-function: ease-in-out;
}
}
@keyframes openDownLeft {
0% {
transform-origin: bottom left;
transform: rotate(0deg);
animation-timing-function: ease-out;
}
100% {
transform-origin: bottom left;
transform: rotate(-110deg);
animation-timing-function: ease-in-out;
}
}
@-moz-keyframes openDownRight {
0% {
-moz-transform-origin: bottom right;
-moz-transform: rotate(0deg);
-moz-animation-timing-function: ease-out;
}
100% {
-moz-transform-origin: bottom right;
-moz-transform: rotate(110deg);
-moz-animation-timing-function: ease-in-out;
}
}
@-webkit-keyframes openDownRight {
0% {
-webkit-transform-origin: bottom right;
-webkit-transform: rotate(0deg);
-webkit-animation-timing-function: ease-out;
}
100% {
-webkit-transform-origin: bottom right;
-webkit-transform: rotate(110deg);
-webkit-animation-timing-function: ease-in-out;
}
}
@-o-keyframes openDownRight {
0% {
-o-transform-origin: bottom right;
-o-transform: rotate(0deg);
-o-animation-timing-function: ease-out;
}
100% {
-o-transform-origin: bottom right;
-o-transform: rotate(110deg);
-o-animation-timing-function: ease-in-out;
}
}
@-ms-keyframes openDownRight {
0% {
-ms-transform-origin: bottom right;
-ms-transform: rotate(0deg);
-ms-animation-timing-function: ease-out;
}
100% {
-ms-transform-origin: bottom right;
-ms-transform: rotate(110deg);
-ms-animation-timing-function: ease-in-out;
}
}
@keyframes openDownRight {
0% {
transform-origin: bottom right;
transform: rotate(0deg);
animation-timing-function: ease-out;
}
100% {
transform-origin: bottom right;
transform: rotate(110deg);
animation-timing-function: ease-in-out;
}
}
@-moz-keyframes openUpLeft {
0% {
-moz-transform-origin: top left;
-moz-transform: rotate(0deg);
-moz-animation-timing-function: ease-out;
}
100% {
-moz-transform-origin: top left;
-moz-transform: rotate(110deg);
-moz-animation-timing-function: ease-in-out;
}
}
@-webkit-keyframes openUpLeft {
0% {
-webkit-transform-origin: top left;
-webkit-transform: rotate(0deg);
-webkit-animation-timing-function: ease-out;
}
100% {
-webkit-transform-origin: top left;
-webkit-transform: rotate(110deg);
-webkit-animation-timing-function: ease-in-out;
}
}
@-o-keyframes openUpLeft {
0% {
-o-transform-origin: top left;
-o-transform: rotate(0deg);
-o-animation-timing-function: ease-out;
}
100% {
-o-transform-origin: top left;
-o-transform: rotate(110deg);
-o-animation-timing-function: ease-in-out;
}
}
@-ms-keyframes openUpLeft {
0% {
-ms-transform-origin: top left;
-ms-transform: rotate(0deg);
-ms-animation-timing-function: ease-out;
}
100% {
-ms-transform-origin: top left;
-ms-transform: rotate(110deg);
-ms-animation-timing-function: ease-in-out;
}
}
@keyframes openUpLeft {
0% {
transform-origin: top left;
transform: rotate(0deg);
animation-timing-function: ease-out;
}
100% {
transform-origin: top left;
transform: rotate(110deg);
animation-timing-function: ease-in-out;
}
}
@-moz-keyframes openUpRight {
0% {
-moz-transform-origin: top right;
-moz-transform: rotate(0deg);
-moz-animation-timing-function: ease-out;
}
100% {
-moz-transform-origin: top right;
-moz-transform: rotate(-110deg);
-moz-animation-timing-function: ease-in-out;
}
}
@-webkit-keyframes openUpRight {
0% {
-webkit-transform-origin: top right;
-webkit-transform: rotate(0deg);
-webkit-animation-timing-function: ease-out;
}
100% {
-webkit-transform-origin: top right;
-webkit-transform: rotate(-110deg);
-webkit-animation-timing-function: ease-in-out;
}
}
@-o-keyframes openUpRight {
0% {
-o-transform-origin: top right;
-o-transform: rotate(0deg);
-o-animation-timing-function: ease-out;
}
100% {
-o-transform-origin: top right;
-o-transform: rotate(-110deg);
-o-animation-timing-function: ease-in-out;
}
}
@-ms-keyframes openUpRight {
0% {
-ms-transform-origin: top right;
-ms-transform: rotate(0deg);
-ms-animation-timing-function: ease-out;
}
100% {
-ms-transform-origin: top right;
-ms-transform: rotate(-110deg);
-ms-animation-timing-function: ease-in-out;
}
}
@keyframes openUpRight {
0% {
transform-origin: top right;
transform: rotate(0deg);
animation-timing-function: ease-out;
}
100% {
transform-origin: top right;
transform: rotate(-110deg);
animation-timing-function: ease-in-out;
}
}
@-moz-keyframes openDownLeftRetourn {
0% {
-moz-transform-origin: bottom left;
-moz-transform: rotate(-110deg);
-moz-animation-timing-function: ease-in-out;
}
100% {
-moz-transform-origin: bottom left;
-moz-transform: rotate(0deg);
-moz-animation-timing-function: ease-out;
}
}
@-webkit-keyframes openDownLeftRetourn {
0% {
-webkit-transform-origin: bottom left;
-webkit-transform: rotate(-110deg);
-webkit-animation-timing-function: ease-in-out;
}
100% {
-webkit-transform-origin: bottom left;
-webkit-transform: rotate(0deg);
-webkit-animation-timing-function: ease-out;
}
}
@-o-keyframes openDownLeftRetourn {
0% {
-o-transform-origin: bottom left;
-o-transform: rotate(-110deg);
-o-animation-timing-function: ease-in-out;
}
100% {
-o-transform-origin: bottom left;
-o-transform: rotate(0deg);
-o-animation-timing-function: ease-out;
}
}
@-ms-keyframes openDownLeftRetourn {
0% {
-ms-transform-origin: bottom left;
-ms-transform: rotate(-110deg);
-ms-animation-timing-function: ease-in-out;
}
100% {
-ms-transform-origin: bottom left;
-ms-transform: rotate(0deg);
-ms-animation-timing-function: ease-out;
}
}
@keyframes openDownLeftRetourn {
0% {
transform-origin: bottom left;
transform: rotate(-110deg);
animation-timing-function: ease-in-out;
}
100% {
transform-origin: bottom left;
transform: rotate(0deg);
animation-timing-function: ease-out;
}
}
@-moz-keyframes openDownRightRetourn {
0% {
-moz-transform-origin: bottom right;
-moz-transform: rotate(110deg);
-moz-animation-timing-function: ease-in-out;
}
100% {
-moz-transform-origin: bottom right;
-moz-transform: rotate(0deg);
-moz-animation-timing-function: ease-out;
}
}
@-webkit-keyframes openDownRightRetourn {
0% {
-webkit-transform-origin: bottom right;
-webkit-transform: rotate(110deg);
-webkit-animation-timing-function: ease-in-out;
}
100% {
-webkit-transform-origin: bottom right;
-webkit-transform: rotate(0deg);
-webkit-animation-timing-function: ease-out;
}
}
@-o-keyframes openDownRightRetourn {
0% {
-o-transform-origin: bottom right;
-o-transform: rotate(110deg);
-o-animation-timing-function: ease-in-out;
}
100% {
-o-transform-origin: bottom right;
-o-transform: rotate(0deg);
-o-animation-timing-function: ease-out;
}
}
@-ms-keyframes openDownRightRetourn {
0% {
-ms-transform-origin: bottom right;
-ms-transform: rotate(110deg);
-ms-animation-timing-function: ease-in-out;
}
100% {
-ms-transform-origin: bottom right;
-ms-transform: rotate(0deg);
-ms-animation-timing-function: ease-out;
}
}
@keyframes openDownRightRetourn {
0% {
transform-origin: bottom right;
transform: rotate(110deg);
animation-timing-function: ease-in-out;
}
100% {
transform-origin: bottom right;
transform: rotate(0deg);
animation-timing-function: ease-out;
}
}
@-moz-keyframes openUpLeftRetourn {
0% {
-moz-transform-origin: top left;
-moz-transform: rotate(110deg);
-moz-animation-timing-function: ease-in-out;
}
100% {
-moz-transform-origin: top left;
-moz-transform: rotate(0deg);
-moz-animation-timing-function: ease-out;
}
}
@-webkit-keyframes openUpLeftRetourn {
0% {
-webkit-transform-origin: top left;
-webkit-transform: rotate(110deg);
-webkit-animation-timing-function: ease-in-out;
}
100% {
-webkit-transform-origin: top left;
-webkit-transform: rotate(0deg);
-webkit-animation-timing-function: ease-out;
}
}
@-o-keyframes openUpLeftRetourn {
0% {
-o-transform-origin: top left;
-o-transform: rotate(110deg);
-o-animation-timing-function: ease-in-out;
}
100% {
-o-transform-origin: top left;
-o-transform: rotate(0deg);
-o-animation-timing-function: ease-out;
}
}
@-ms-keyframes openUpLeftRetourn {
0% {
-ms-transform-origin: top left;
-ms-transform: rotate(110deg);
-ms-animation-timing-function: ease-in-out;
}
100% {
-ms-transform-origin: top left;
-ms-transform: rotate(0deg);
-ms-animation-timing-function: ease-out;
}
}
@keyframes openUpLeftRetourn {
0% {
transform-origin: top left;
transform: rotate(110deg);
animation-timing-function: ease-in-out;
}
100% {
transform-origin: top left;
transform: rotate(0deg);
animation-timing-function: ease-out;
}
}
@-moz-keyframes openUpRightRetourn {
0% {
-moz-transform-origin: top right;
-moz-transform: rotate(-110deg);
-moz-animation-timing-function: ease-in-out;
}
100% {
-moz-transform-origin: top right;
-moz-transform: rotate(0deg);
-moz-animation-timing-function: ease-out;
}
}
@-webkit-keyframes openUpRightRetourn {
0% {
-webkit-transform-origin: top right;
-webkit-transform: rotate(-110deg);
-webkit-animation-timing-function: ease-in-out;
}
100% {
-webkit-transform-origin: top right;
-webkit-transform: rotate(0deg);
-webkit-animation-timing-function: ease-out;
}
}
@-o-keyframes openUpRightRetourn {
0% {
-o-transform-origin: top right;
-o-transform: rotate(-110deg);
-o-animation-timing-function: ease-in-out;
}
100% {
-o-transform-origin: top right;
-o-transform: rotate(0deg);
-o-animation-timing-function: ease-out;
}
}
@-ms-keyframes openUpRightRetourn {
0% {
-ms-transform-origin: top right;
-ms-transform: rotate(-110deg);
-ms-animation-timing-function: ease-in-out;
}
100% {
-ms-transform-origin: top right;
-ms-transform: rotate(0deg);
-ms-animation-timing-function: ease-out;
}
}
@keyframes openUpRightRetourn {
0% {
transform-origin: top right;
transform: rotate(-110deg);
animation-timing-function: ease-in-out;
}
100% {
transform-origin: top right;
transform: rotate(0deg);
animation-timing-function: ease-out;
}
}
@-moz-keyframes openDownLeftOut {
0% {
opacity: 1;
-moz-transform-origin: bottom left;
-moz-transform: rotate(0deg);
-moz-animation-timing-function: ease-out;
}
100% {
opacity: 0;
-moz-transform-origin: bottom left;
-moz-transform: rotate(-110deg);
-moz-animation-timing-function: ease-in-out;
}
}
@-webkit-keyframes openDownLeftOut {
0% {
opacity: 1;
-webkit-transform-origin: bottom left;
-webkit-transform: rotate(0deg);
-webkit-animation-timing-function: ease-out;
}
100% {
opacity: 0;
-webkit-transform-origin: bottom left;
-webkit-transform: rotate(-110deg);
-webkit-animation-timing-function: ease-in-out;
}
}
@-o-keyframes openDownLeftOut {
0% {
opacity: 1;
-o-transform-origin: bottom left;
-o-transform: rotate(0deg);
-o-animation-timing-function: ease-out;
}
100% {
opacity: 0;
-o-transform-origin: bottom left;
-o-transform: rotate(-110deg);
-o-animation-timing-function: ease-in-out;
}
}
@-ms-keyframes openDownLeftOut {
0% {
opacity: 1;
-ms-transform-origin: bottom left;
-ms-transform: rotate(0deg);
-ms-animation-timing-function: ease-out;
}
100% {
opacity: 0;
-ms-transform-origin: bottom left;
-ms-transform: rotate(-110deg);
-ms-animation-timing-function: ease-in-out;
}
}
@keyframes openDownLeftOut {
0% {
opacity: 1;
transform-origin: bottom left;
transform: rotate(0deg);
animation-timing-function: ease-out;
}
100% {
opacity: 0;
transform-origin: bottom left;
transform: rotate(-110deg);
animation-timing-function: ease-in-out;
}
}
@-moz-keyframes openDownRightOut {
0% {
opacity: 1;
-moz-transform-origin: bottom right;
-moz-transform: rotate(0deg);
-moz-animation-timing-function: ease-out;
}
100% {
opacity: 0;
-moz-transform-origin: bottom right;
-moz-transform: rotate(110deg);
-moz-animation-timing-function: ease-in-out;
}
}
@-webkit-keyframes openDownRightOut {
0% {
opacity: 1;
-webkit-transform-origin: bottom right;
-webkit-transform: rotate(0deg);
-webkit-animation-timing-function: ease-out;
}
100% {
opacity: 0;
-webkit-transform-origin: bottom right;
-webkit-transform: rotate(110deg);
-webkit-animation-timing-function: ease-in-out;
}
}
@-o-keyframes openDownRightOut {
0% {
opacity: 1;
-o-transform-origin: bottom right;
-o-transform: rotate(0deg);
-o-animation-timing-function: ease-out;
}
100% {
opacity: 0;
-o-transform-origin: bottom right;
-o-transform: rotate(110deg);
-o-animation-timing-function: ease-in-out;
}
}
@-ms-keyframes openDownRightOut {
0% {
opacity: 1;
-ms-transform-origin: bottom right;
-ms-transform: rotate(0deg);
-ms-animation-timing-function: ease-out;
}
100% {
opacity: 0;
-ms-transform-origin: bottom right;
-ms-transform: rotate(110deg);
-ms-animation-timing-function: ease-in-out;
}
}
@keyframes openDownRightOut {
0% {
opacity: 1;
transform-origin: bottom right;
transform: rotate(0deg);
animation-timing-function: ease-out;
}
100% {
opacity: 0;
transform-origin: bottom right;
transform: rotate(110deg);
animation-timing-function: ease-in-out;
}
}
@-moz-keyframes openUpLeftOut {
0% {
opacity: 1;
-moz-transform-origin: top left;
-moz-transform: rotate(0deg);
-moz-animation-timing-function: ease-out;
}
100% {
opacity: 0;
-moz-transform-origin: top left;
-moz-transform: rotate(110deg);
-moz-animation-timing-function: ease-in-out;
}
}
@-webkit-keyframes openUpLeftOut {
0% {
opacity: 1;
-webkit-transform-origin: top left;
-webkit-transform: rotate(0deg);
-webkit-animation-timing-function: ease-out;
}
100% {
opacity: 0;
-webkit-transform-origin: top left;
-webkit-transform: rotate(110deg);
-webkit-animation-timing-function: ease-in-out;
}
}
@-o-keyframes openUpLeftOut {
0% {
opacity: 1;
-o-transform-origin: top left;
-o-transform: rotate(0deg);
-o-animation-timing-function: ease-out;
}
100% {
opacity: 0;
-o-transform-origin: top left;
-o-transform: rotate(110deg);
-o-animation-timing-function: ease-in-out;
}
}
@-ms-keyframes openUpLeftOut {
0% {
opacity: 1;
-ms-transform-origin: top left;
-ms-transform: rotate(0deg);
-ms-animation-timing-function: ease-out;
}
100% {
opacity: 0;
-ms-transform-origin: top left;
-ms-transform: rotate(110deg);
-ms-animation-timing-function: ease-in-out;
}
}
@keyframes openUpLeftOut {
0% {
opacity: 1;
transform-origin: top left;
transform: rotate(0deg);
animation-timing-function: ease-out;
}
100% {
opacity: 0;
transform-origin: top left;
transform: rotate(110deg);
animation-timing-function: ease-in-out;
}
}
@-moz-keyframes openUpRightOut {
0% {
opacity: 1;
-moz-transform-origin: top right;
-moz-transform: rotate(0deg);
-moz-animation-timing-function: ease-out;
}
100% {
opacity: 0;
-moz-transform-origin: top right;
-moz-transform: rotate(-110deg);
-moz-animation-timing-function: ease-in-out;
}
}
@-webkit-keyframes openUpRightOut {
0% {
opacity: 1;
-webkit-transform-origin: top right;
-webkit-transform: rotate(0deg);
-webkit-animation-timing-function: ease-out;
}
100% {
opacity: 0;
-webkit-transform-origin: top right;
-webkit-transform: rotate(-110deg);
-webkit-animation-timing-function: ease-in-out;
}
}
@-o-keyframes openUpRightOut {
0% {
opacity: 1;
-o-transform-origin: top right;
-o-transform: rotate(0deg);
-o-animation-timing-function: ease-out;
}
100% {
opacity: 0;
-o-transform-origin: top right;
-o-transform: rotate(-110deg);
-o-animation-timing-function: ease-in-out;
}
}
@-ms-keyframes openUpRightOut {
0% {
opacity: 1;
-ms-transform-origin: top right;
-ms-transform: rotate(0deg);
-ms-animation-timing-function: ease-out;
}
100% {
opacity: 0;
-ms-transform-origin: top right;
-ms-transform: rotate(-110deg);
-ms-animation-timing-function: ease-in-out;
}
}
@keyframes openUpRightOut {
0% {
opacity: 1;
transform-origin: top right;
transform: rotate(0deg);
animation-timing-function: ease-out;
}
100% {
opacity: 0;
transform-origin: top right;
transform: rotate(-110deg);
animation-timing-function: ease-in-out;
}
}
@-moz-keyframes perspectiveDown {
0% {
-moz-transform-origin: 0 100%;
-moz-transform: perspective(800px) rotateX(0deg);
}
100% {
-moz-transform-origin: 0 100%;
-moz-transform: perspective(800px) rotateX(-180deg);
}
}
@-webkit-keyframes perspectiveDown {
0% {
-webkit-transform-origin: 0 100%;
-webkit-transform: perspective(800px) rotateX(0deg);
}
100% {
-webkit-transform-origin: 0 100%;
-webkit-transform: perspective(800px) rotateX(-180deg);
}
}
@-o-keyframes perspectiveDown {
0% {
-o-transform-origin: 0 100%;
-o-transform: perspective(800px) rotateX(0deg);
}
100% {
-o-transform-origin: 0 100%;
-o-transform: perspective(800px) rotateX(-180deg);
}
}
@-ms-keyframes perspectiveDown {
0% {
-ms-transform-origin: 0 100%;
-ms-transform: perspective(800px) rotateX(0deg);
}
100% {
-ms-transform-origin: 0 100%;
-ms-transform: perspective(800px) rotateX(-180deg);
}
}
@keyframes perspectiveDown {
0% {
transform-origin: 0 100%;
transform: perspective(800px) rotateX(0deg);
}
100% {
transform-origin: 0 100%;
transform: perspective(800px) rotateX(-180deg);
}
}
@-moz-keyframes perspectiveLeft {
0% {
-moz-transform-origin: 0 0;
-moz-transform: perspective(800px) rotateY(0deg);
}
100% {
-moz-transform-origin: 0 0;
-moz-transform: perspective(800px) rotateY(-180deg);
}
}
@-webkit-keyframes perspectiveLeft {
0% {
-webkit-transform-origin: 0 0;
-webkit-transform: perspective(800px) rotateY(0deg);
}
100% {
-webkit-transform-origin: 0 0;
-webkit-transform: perspective(800px) rotateY(-180deg);
}
}
@-o-keyframes perspectiveLeft {
0% {
-o-transform-origin: 0 0;
-o-transform: perspective(800px) rotateY(0deg);
}
100% {
-o-transform-origin: 0 0;
-o-transform: perspective(800px) rotateY(-180deg);
}
}
@-ms-keyframes perspectiveLeft {
0% {
-ms-transform-origin: 0 0;
-ms-transform: perspective(800px) rotateY(0deg);
}
100% {
-ms-transform-origin: 0 0;
-ms-transform: perspective(800px) rotateY(-180deg);
}
}
@keyframes perspectiveLeft {
0% {
transform-origin: 0 0;
transform: perspective(800px) rotateY(0deg);
}
100% {
transform-origin: 0 0;
transform: perspective(800px) rotateY(-180deg);
}
}
@-moz-keyframes perspectiveRight {
0% {
-moz-transform-origin: 100% 0;
-moz-transform: perspective(800px) rotateY(0deg);
}
100% {
-moz-transform-origin: 100% 0;
-moz-transform: perspective(800px) rotateY(180deg);
}
}
@-webkit-keyframes perspectiveRight {
0% {
-webkit-transform-origin: 100% 0;
-webkit-transform: perspective(800px) rotateY(0deg);
}
100% {
-webkit-transform-origin: 100% 0;
-webkit-transform: perspective(800px) rotateY(180deg);
}
}
@-o-keyframes perspectiveRight {
0% {
-o-transform-origin: 100% 0;
-o-transform: perspective(800px) rotateY(0deg);
}
100% {
-o-transform-origin: 100% 0;
-o-transform: perspective(800px) rotateY(180deg);
}
}
@-ms-keyframes perspectiveRight {
0% {
-ms-transform-origin: 100% 0;
-ms-transform: perspective(800px) rotateY(0deg);
}
100% {
-ms-transform-origin: 100% 0;
-ms-transform: perspective(800px) rotateY(180deg);
}
}
@keyframes perspectiveRight {
0% {
transform-origin: 100% 0;
transform: perspective(800px) rotateY(0deg);
}
100% {
transform-origin: 100% 0;
transform: perspective(800px) rotateY(180deg);
}
}
@-moz-keyframes perspectiveUp {
0% {
-moz-transform-origin: 0 0;
-moz-transform: perspective(800px) rotateX(0deg);
}
100% {
-moz-transform-origin: 0 0;
-moz-transform: perspective(800px) rotateX(180deg);
}
}
@-webkit-keyframes perspectiveUp {
0% {
-webkit-transform-origin: 0 0;
-webkit-transform: perspective(800px) rotateX(0deg);
}
100% {
-webkit-transform-origin: 0 0;
-webkit-transform: perspective(800px) rotateX(180deg);
}
}
@-o-keyframes perspectiveUp {
0% {
-o-transform-origin: 0 0;
-o-transform: perspective(800px) rotateX(0deg);
}
100% {
-o-transform-origin: 0 0;
-o-transform: perspective(800px) rotateX(180deg);
}
}
@-ms-keyframes perspectiveUp {
0% {
-ms-transform-origin: 0 0;
-ms-transform: perspective(800px) rotateX(0deg);
}
100% {
-ms-transform-origin: 0 0;
-ms-transform: perspective(800px) rotateX(180deg);
}
}
@keyframes perspectiveUp {
0% {
transform-origin: 0 0;
transform: perspective(800px) rotateX(0deg);
}
100% {
transform-origin: 0 0;
transform: perspective(800px) rotateX(180deg);
}
}
@-moz-keyframes perspectiveDownRetourn {
0% {
-moz-transform-origin: 0 100%;
-moz-transform: perspective(800px) rotateX(-180deg);
}
100% {
-moz-transform-origin: 0 100%;
-moz-transform: perspective(800px) rotateX(0deg);
}
}
@-webkit-keyframes perspectiveDownRetourn {
0% {
-webkit-transform-origin: 0 100%;
-webkit-transform: perspective(800px) rotateX(-180deg);
}
100% {
-webkit-transform-origin: 0 100%;
-webkit-transform: perspective(800px) rotateX(0deg);
}
}
@-o-keyframes perspectiveDownRetourn {
0% {
-o-transform-origin: 0 100%;
-o-transform: perspective(800px) rotateX(-180deg);
}
100% {
-o-transform-origin: 0 100%;
-o-transform: perspective(800px) rotateX(0deg);
}
}
@-ms-keyframes perspectiveDownRetourn {
0% {
-ms-transform-origin: 0 100%;
-ms-transform: perspective(800px) rotateX(-180deg);
}
100% {
-ms-transform-origin: 0 100%;
-ms-transform: perspective(800px) rotateX(0deg);
}
}
@keyframes perspectiveDownRetourn {
0% {
transform-origin: 0 100%;
transform: perspective(800px) rotateX(-180deg);
}
100% {
transform-origin: 0 100%;
transform: perspective(800px) rotateX(0deg);
}
}
@-moz-keyframes perspectiveLeftRetourn {
0% {
-moz-transform-origin: 0 0;
-moz-transform: perspective(800px) rotateY(-180deg);
}
100% {
-moz-transform-origin: 0 0;
-moz-transform: perspective(800px) rotateY(0deg);
}
}
@-webkit-keyframes perspectiveLeftRetourn {
0% {
-webkit-transform-origin: 0 0;
-webkit-transform: perspective(800px) rotateY(-180deg);
}
100% {
-webkit-transform-origin: 0 0;
-webkit-transform: perspective(800px) rotateY(0deg);
}
}
@-o-keyframes perspectiveLeftRetourn {
0% {
-o-transform-origin: 0 0;
-o-transform: perspective(800px) rotateY(-180deg);
}
100% {
-o-transform-origin: 0 0;
-o-transform: perspective(800px) rotateY(0deg);
}
}
@-ms-keyframes perspectiveLeftRetourn {
0% {
-ms-transform-origin: 0 0;
-ms-transform: perspective(800px) rotateY(-180deg);
}
100% {
-ms-transform-origin: 0 0;
-ms-transform: perspective(800px) rotateY(0deg);
}
}
@keyframes perspectiveLeftRetourn {
0% {
transform-origin: 0 0;
transform: perspective(800px) rotateY(-180deg);
}
100% {
transform-origin: 0 0;
transform: perspective(800px) rotateY(0deg);
}
}
@-moz-keyframes perspectiveRightRetourn {
0% {
-moz-transform-origin: 100% 0;
-moz-transform: perspective(800px) rotateY(180deg);
}
100% {
-moz-transform-origin: 100% 0;
-moz-transform: perspective(800px) rotateY(0deg);
}
}
@-webkit-keyframes perspectiveRightRetourn {
0% {
-webkit-transform-origin: 100% 0;
-webkit-transform: perspective(800px) rotateY(180deg);
}
100% {
-webkit-transform-origin: 100% 0;
-webkit-transform: perspective(800px) rotateY(0deg);
}
}
@-o-keyframes perspectiveRightRetourn {
0% {
-o-transform-origin: 100% 0;
-o-transform: perspective(800px) rotateY(180deg);
}
100% {
-o-transform-origin: 100% 0;
-o-transform: perspective(800px) rotateY(0deg);
}
}
@-ms-keyframes perspectiveRightRetourn {
0% {
-ms-transform-origin: 100% 0;
-ms-transform: perspective(800px) rotateY(180deg);
}
100% {
-ms-transform-origin: 100% 0;
-ms-transform: perspective(800px) rotateY(0deg);
}
}
@keyframes perspectiveRightRetourn {
0% {
transform-origin: 100% 0;
transform: perspective(800px) rotateY(180deg);
}
100% {
transform-origin: 100% 0;
transform: perspective(800px) rotateY(0deg);
}
}
@-moz-keyframes perspectiveUpRetourn {
0% {
-moz-transform-origin: 0 0;
-moz-transform: perspective(800px) rotateX(180deg);
}
100% {
-moz-transform-origin: 0 0;
-moz-transform: perspective(800px) rotateX(0deg);
}
}
@-webkit-keyframes perspectiveUpRetourn {
0% {
-webkit-transform-origin: 0 0;
-webkit-transform: perspective(800px) rotateX(180deg);
}
100% {
-webkit-transform-origin: 0 0;
-webkit-transform: perspective(800px) rotateX(0deg);
}
}
@-o-keyframes perspectiveUpRetourn {
0% {
-o-transform-origin: 0 0;
-o-transform: perspective(800px) rotateX(180deg);
}
100% {
-o-transform-origin: 0 0;
-o-transform: perspective(800px) rotateX(0deg);
}
}
@-ms-keyframes perspectiveUpRetourn {
0% {
-ms-transform-origin: 0 0;
-ms-transform: perspective(800px) rotateX(180deg);
}
100% {
-ms-transform-origin: 0 0;
-ms-transform: perspective(800px) rotateX(0deg);
}
}
@keyframes perspectiveUpRetourn {
0% {
transform-origin: 0 0;
transform: perspective(800px) rotateX(180deg);
}
100% {
transform-origin: 0 0;
transform: perspective(800px) rotateX(0deg);
}
}
@-moz-keyframes puffIn {
0% {
opacity: 0;
-moz-transform-origin: 50% 50%;
-moz-transform: scale(2,2);
-moz-filter: blur(2px);
}
100% {
opacity: 1;
-moz-transform-origin: 50% 50%;
-moz-transform: scale(1,1);
-moz-filter: blur(0px);
}
}
@-webkit-keyframes puffIn {
0% {
opacity: 0;
-webkit-transform-origin: 50% 50%;
-webkit-transform: scale(2,2);
-webkit-filter: blur(2px);
}
100% {
opacity: 1;
-webkit-transform-origin: 50% 50%;
-webkit-transform: scale(1,1);
-webkit-filter: blur(0px);
}
}
@-o-keyframes puffIn {
0% {
opacity: 0;
-o-transform-origin: 50% 50%;
-o-transform: scale(2,2);
-webkit-filter: blur(2px);
}
100% {
opacity: 1;
-o-transform-origin: 50% 50%;
-o-transform: scale(1,1);
-webkit-filter: blur(0px);
}
}
@-ms-keyframes puffIn {
0% {
opacity: 0;
filter: alpha(opacity=0);
-ms-transform-origin: 50% 50%;
-ms-transform: scale(2,2);
filter: blur(2px);
}
100% {
opacity: 1;
filter: alpha(opacity=100);
-ms-transform-origin: 50% 50%;
-ms-transform: scale(1,1);
filter: blur(0px);
}
}
@keyframes puffIn {
0% {
opacity: 0;
transform-origin: 50% 50%;
transform: scale(2,2);
filter: blur(2px);
}
100% {
opacity: 1;
transform-origin: 50% 50%;
transform: scale(1,1);
filter: blur(0px);
}
}
@-moz-keyframes puffOut {
0% {
opacity: 1;
-moz-transform-origin: 50% 50%;
-moz-transform: scale(1,1);
-moz-filter: blur(0px);
}
100% {
opacity: 0;
-moz-transform-origin: 50% 50%;
-moz-transform: scale(2,2);
-moz-filter: blur(2px);
}
}
@-webkit-keyframes puffOut {
0% {
opacity: 1;
-webkit-transform-origin: 50% 50%;
-webkit-transform: scale(1,1);
-webkit-filter: blur(0px);
}
100% {
opacity: 0;
-webkit-transform-origin: 50% 50%;
-webkit-transform: scale(2,2);
-webkit-filter: blur(2px);
}
}
@-o-keyframes puffOut {
0% {
opacity: 1;
-o-transform-origin: 50% 50%;
-o-transform: scale(1,1);
-webkit-filter: blur(0px);
}
100% {
opacity: 0;
-o-transform-origin: 50% 50%;
-o-transform: scale(2,2);
-webkit-filter: blur(2px);
}
}
@-ms-keyframes puffOut {
0% {
opacity: 1;
filter: alpha(opacity=100);
-ms-transform-origin: 50% 50%;
-ms-transform: scale(1,1);
filter: blur(0px);
}
100% {
opacity: 0;
filter: alpha(opacity=0);
-ms-transform-origin: 50% 50%;
-ms-transform: scale(2, 2);
filter: blur(2px);
}
}
@keyframes puffOut {
0% {
opacity: 1;
transform-origin: 50% 50%;
transform: scale(1,1);
-webkit-filter: blur(0px);
}
100% {
opacity: 0;
transform-origin: 50% 50%;
transform: scale(2,2);
-webkit-filter: blur(2px);
}
}
@-moz-keyframes rotateDown {
0% {
opacity: 1;
-moz-transform-origin: 0 0;
-moz-transform: perspective(800px) rotateX(0deg) translateZ(0px);
}
100% {
opacity: 0;
-moz-transform-origin: 50% 100%;
-moz-transform: perspective(800px) rotateX(-180deg) translateZ(300px);
}
}
@-webkit-keyframes rotateDown {
0% {
opacity: 1;
-webkit-transform-origin: 0 0;
-webkit-transform: perspective(800px) rotateX(0deg) translateZ(0px);
}
100% {
opacity: 0;
-webkit-transform-origin: 50% 100%;
-webkit-transform: perspective(800px) rotateX(-180deg) translateZ(300px);
}
}
@-o-keyframes rotateDown {
0% {
opacity: 1;
-o-transform-origin: 0 0;
-o-transform: perspective(800px) rotateX(0deg) translateZ(0px);
}
100% {
opacity: 0;
-o-transform-origin: 50% 100%;
-o-transform: perspective(800px) rotateX(-180deg) translateZ(300px);
}
}
@-ms-keyframes rotateDown {
0% {
opacity: 1;
filter: alpha(opacity=100);
-ms-transform-origin: 0 0;
-ms-transform: perspective(800px) rotateX(0deg) translateZ(0px);
}
100% {
opacity: 0;
filter: alpha(opacity=0);
-ms-transform-origin: 50% 100%;
-ms-transform: perspective(800px) rotateX(-180deg) translateZ(300px);
}
}
@keyframes rotateDown {
0% {
opacity: 1;
transform-origin: 0 0;
transform: perspective(800px) rotateX(0deg) translateZ(0px);
}
100% {
opacity: 0;
transform-origin: 50% 100%;
transform: perspective(800px) rotateX(-180deg) translateZ(300px);
}
}
@-moz-keyframes rotateLeft {
0% {
opacity: 1;
-moz-transform-origin: 0 0;
-moz-transform: perspective(800px) rotateY(0deg) translateZ(0px);
}
100% {
opacity: 0;
-moz-transform-origin: 50% 0;
-moz-transform: perspective(800px) rotateY(180deg) translateZ(300px);
}
}
@-webkit-keyframes rotateLeft {
0% {
opacity: 1;
-webkit-transform-origin: 0 0;
-webkit-transform: perspective(800px) rotateY(0deg) translateZ(0px);
}
100% {
opacity: 0;
-webkit-transform-origin: 50% 0;
-webkit-transform: perspective(800px) rotateY(180deg) translateZ(300px);
}
}
@-o-keyframes rotateLeft {
0% {
opacity: 1;
-o-transform-origin: 0 0;
-o-transform: perspective(800px) rotateY(0deg) translateZ(0px);
}
100% {
opacity: 0;
-o-transform-origin: 50% 0;
-o-transform: perspective(800px) rotateY(180deg) translateZ(300px);
}
}
@-ms-keyframes rotateLeft {
0% {
opacity: 1;
filter: alpha(opacity=100);
-ms-transform-origin: 0 0;
-ms-transform: perspective(800px) rotateY(0deg) translateZ(0px);
}
100% {
opacity: 0;
filter: alpha(opacity=0);
-ms-transform-origin: 50% 0;
-ms-transform: perspective(800px) rotateY(180deg) translateZ(300px);
}
}
@keyframes rotateLeft {
0% {
opacity: 1;
transform-origin: 0 0;
transform: perspective(800px) rotateY(0deg) translateZ(0px);
}
100% {
opacity: 0;
transform-origin: 50% 0;
transform: perspective(800px) rotateY(180deg) translateZ(300px);
}
}
@-moz-keyframes rotateRight {
0% {
opacity: 1;
-moz-transform-origin: 0 0;
-moz-transform: perspective(800px) rotateY(0deg) translate3d(0px);
}
100% {
opacity: 0;
-moz-transform-origin: 50% 0;
-moz-transform: perspective(800px) rotateY(-180deg) translateZ(150px);
}
}
@-webkit-keyframes rotateRight {
0% {
opacity: 1;
-webkit-transform-origin: 0 0;
-webkit-transform: perspective(800px) rotateY(0deg) translate3d(0px);
}
100% {
opacity: 0;
-webkit-transform-origin: 50% 0;
-webkit-transform: perspective(800px) rotateY(-180deg) translateZ(150px);
}
}
@-o-keyframes rotateRight {
0% {
opacity: 1;
-o-transform-origin: 0 0;
-o-transform: perspective(800px) rotateY(0deg) translate3d(0px);
}
100% {
opacity: 0;
-o-transform-origin: 50% 0;
-o-transform: perspective(800px) rotateY(-180deg) translateZ(150px);
}
}
@-ms-keyframes rotateRight {
0% {
opacity: 1;
filter: alpha(opacity=100);
-ms-transform-origin: 0 0;
-ms-transform: perspective(800px) rotateY(0deg) translate3d(0px);
}
100% {
opacity: 0;
filter: alpha(opacity=0);
-ms-transform-origin: 50% 0;
-ms-transform: perspective(800px) rotateY(-180deg) translateZ(150px);
}
}
@keyframes rotateRight {
0% {
opacity: 1;
transform-origin: 0 0;
transform: perspective(800px) rotateY(0deg) translate3d(0px);
}
100% {
opacity: 0;
transform-origin: 50% 0;
transform: perspective(800px) rotateY(-180deg) translateZ(150px);
}
}
@-moz-keyframes rotateUp {
0% {
opacity: 1;
-moz-transform-origin: 0 0;
-moz-transform: perspective(800px) rotateX(0deg) translateZ(0px);
}
100% {
opacity: 0;
-moz-transform-origin: 50% 0;
-moz-transform: perspective(800px) rotateX(180deg) translateZ(100px);
}
}
@-webkit-keyframes rotateUp {
0% {
opacity: 1;
-webkit-transform-origin: 0 0;
-webkit-transform: perspective(800px) rotateX(0deg) translateZ(0px);
}
100% {
opacity: 0;
-webkit-transform-origin: 50% 0;
-webkit-transform: perspective(800px) rotateX(180deg) translateZ(100px);
}
}
@-o-keyframes rotateUp {
0% {
opacity: 1;
-o-transform-origin: 0 0;
-o-transform: perspective(800px) rotateX(0deg) translateZ(0px);
}
100% {
opacity: 0;
-o-transform-origin: 50% 0;
-o-transform: perspective(800px) rotateX(180deg) translateZ(100px);
}
}
@-ms-keyframes rotateUp {
0% {
opacity: 1;
filter: alpha(opacity=100);
-ms-transform-origin: 0 0;
-ms-transform: perspective(800px) rotateX(0deg) translateZ(0px);
}
100% {
opacity: 0;
filter: alpha(opacity=0);
-ms-transform-origin: 50% 0;
-ms-transform: perspective(800px) rotateX(180deg) translateZ(100px);
}
}
@keyframes rotateUp {
0% {
opacity: 1;
transform-origin: 0 0;
transform: perspective(800px) rotateX(0deg) translateZ(0px);
}
100% {
opacity: 0;
transform-origin: 50% 0;
transform: perspective(800px) rotateX(180deg) translateZ(100px);
}
}
@-moz-keyframes slideDown {
0% {
-moz-transform-origin: 0 0;
-moz-transform: translateY(0%);
}
100% {
-moz-transform-origin: 0 0;
-moz-transform: translateY(100%);
}
}
@-webkit-keyframes slideDown {
0% {
-webkit-transform-origin: 0 0;
-webkit-transform: translateY(0%);
}
100% {
-webkit-transform-origin: 0 0;
-webkit-transform: translateY(100%);
}
}
@-o-keyframes slideDown {
0% {
-o-transform-origin: 0 0;
-o-transform: translateY(0%);
}
100% {
-o-transform-origin: 0 0;
-o-transform: translateY(100%);
}
}
@-ms-keyframes slideDown {
0% {
-ms-transform-origin: 0 0;
-ms-transform: translateY(0%);
}
100% {
-ms-transform-origin: 0 0;
-ms-transform: translateY(100%);
}
}
@keyframes slideDown {
0% {
transform-origin: 0 0;
transform: translateY(0%);
}
100% {
transform-origin: 0 0;
transform: translateY(100%);
}
}
@-moz-keyframes slideLeft {
0% {
-moz-transform-origin: 0 0;
-moz-transform: translateX(0%);
}
100% {
-moz-transform-origin: 0 0;
-moz-transform: translateX(-100%);
}
}
@-webkit-keyframes slideLeft {
0% {
-webkit-transform-origin: 0 0;;
-webkit-transform: translateX(0%);
}
100% {
-webkit-transform-origin: 0 0;
-webkit-transform: translateX(-100%);
}
}
@-o-keyframes slideLeft {
0% {
-o-transform-origin: 0 0;
-o-transform: translateX(0%);
}
100% {
-o-transform-origin: 0 0;
-o-transform: translateX(-100%);
}
}
@-ms-keyframes slideLeft {
0% {
-ms-transform-origin: 0 0;
-ms-transform: translateX(0%);
}
100% {
-ms-transform-origin: 0 0;
-ms-transform: translateX(-100%);
}
}
@keyframes slideLeft {
0% {
transform-origin: 0 0;
transform: translateX(0%);
}
100% {
transform-origin: 0 0;
transform: translateX(-100%);
}
}
@-moz-keyframes slideRight {
0% {
-moz-transform-origin: 0 0;
-moz-transform: translateX(0%);
}
100% {
-moz-transform-origin: 0 0;
-moz-transform: translateX(100%);
}
}
@-webkit-keyframes slideRight {
0% {
-webkit-transform-origin: 0 0;
-webkit-transform: translateX(0%);
}
100% {
-webkit-transform-origin: 0 0;
-webkit-transform: translateX(100%);
}
}
@-o-keyframes slideRight {
0% {
-o-transform-origin: 0 0;
-o-transform: translateX(0%);
}
100% {
-o-transform-origin: 0 0;
-o-transform: translateX(100%);
}
}
@-ms-keyframes slideRight {
0% {
-ms-transform-origin: 0 0;
-ms-transform: translateX(0%);
}
100% {
-ms-transform-origin: 0 0;
-ms-transform: translateX(100%);
}
}
@keyframes slideRight {
0% {
transform-origin: 0 0;
transform: translateX(0%);
}
100% {
transform-origin: 0 0;
transform: translateX(100%);
}
}
@-moz-keyframes slideUp {
0% {
-moz-transform-origin: 0 0;
-moz-transform: translateY(0%);
}
100% {
-moz-transform-origin: 0 0;
-moz-transform: translateY(-100%);
}
}
@-webkit-keyframes slideUp {
0% {
-webkit-transform-origin: 0 0;
-webkit-transform: translateY(0%);
}
100% {
-webkit-transform-origin: 0 0;
-webkit-transform: translateY(-100%);
}
}
@-o-keyframes slideUp {
0% {
-o-transform-origin: 0 0;
-o-transform: translateY(0%);
}
100% {
-o-transform-origin: 0 0;
-o-transform: translateY(-100%);
}
}
@-ms-keyframes slideUp {
0% {
-ms-transform-origin: 0 0;
-ms-transform: translateY(0%);
}
100% {
-ms-transform-origin: 0 0;
-ms-transform: translateY(-100%);
}
}
@keyframes slideUp {
0% {
transform-origin: 0 0;
transform: translateY(0%);
}
100% {
transform-origin: 0 0;
transform: translateY(-100%);
}
}
@-moz-keyframes slideDownRetourn {
0% {
-moz-transform-origin: 0 0;
-moz-transform: translateY(100%);
}
100% {
-moz-transform-origin: 0 0;
-moz-transform: translateY(0%);
}
}
@-webkit-keyframes slideDownRetourn {
0% {
-webkit-transform-origin: 0 0;
-webkit-transform: translateY(100%);
}
100% {
-webkit-transform-origin: 0 0;
-webkit-transform: translateY(0%);
}
}
@-o-keyframes slideDownRetourn {
0% {
-o-transform-origin: 0 0;
-o-transform: translateY(100%);
}
100% {
-o-transform-origin: 0 0;
-o-transform: translateY(0%);
}
}
@-ms-keyframes slideDownRetourn {
0% {
-ms-transform-origin: 0 0;
-ms-transform: translateY(100%);
}
100% {
-ms-transform-origin: 0 0;
-ms-transform: translateY(0%);
}
}
@keyframes slideDownRetourn {
0% {
transform-origin: 0 0;
transform: translateY(100%);
}
100% {
transform-origin: 0 0;
transform: translateY(0%);
}
}
@-moz-keyframes slideLeftRetourn {
0% {
-moz-transform-origin: 0 0;
-moz-transform: translateX(-100%);
}
100% {
-moz-transform-origin: 0 0;
-moz-transform: translateX(0%);
}
}
@-webkit-keyframes slideLeftRetourn {
0% {
-webkit-transform-origin: 0 0;
-webkit-transform: translateX(-100%);
}
100% {
-webkit-transform-origin: 0 0;
-webkit-transform: translateX(0%);
}
}
@-o-keyframes slideLeftRetourn {
0% {
-o-transform-origin: 0 0;
-o-transform: translateX(-100%);
}
100% {
-o-transform-origin: 0 0;
-o-transform: translateX(0%);
}
}
@-ms-keyframes slideLeftRetourn {
0% {
-ms-transform-origin: 0 0;
-ms-transform: translateX(-100%);
}
100% {
-ms-transform-origin: 0 0;
-ms-transform: translateX(0%);
}
}
@keyframes slideLeftRetourn {
0% {
transform-origin: 0 0;
transform: translateX(-100%);
}
100% {
transform-origin: 0 0;
transform: translateX(0%);
}
}
@-moz-keyframes slideRightRetourn {
0% {
-moz-transform-origin: 0 0;
-moz-transform: translateX(100%);
}
100% {
-moz-transform-origin: 0 0;
-moz-transform: translateX(0%);
}
}
@-webkit-keyframes slideRightRetourn {
0% {
-webkit-transform-origin: 0 0;
-webkit-transform: translateX(100%);
}
100% {
-webkit-transform-origin: 0 0;
-webkit-transform: translateX(0%);
}
}
@-o-keyframes slideRightRetourn {
0% {
-o-transform-origin: 0 0;
-o-transform: translateX(100%);
}
100% {
-o-transform-origin: 0 0;
-o-transform: translateX(0%);
}
}
@-ms-keyframes slideRightRetourn {
0% {
-ms-transform-origin: 0 0;
-ms-transform: translateX(100%);
}
100% {
-ms-transform-origin: 0 0;
-ms-transform: translateX(0%);
}
}
@keyframes slideRightRetourn {
0% {
transform-origin: 0 0;
transform: translateX(100%);
}
100% {
transform-origin: 0 0;
transform: translateX(0%);
}
}
@-moz-keyframes slideUpRetourn {
0% {
-moz-transform-origin: 0 0;
-moz-transform: translateY(-100%);
}
100% {
-moz-transform-origin: 0 0;
-moz-transform: translateY(0%);
}
}
@-webkit-keyframes slideUpRetourn {
0% {
-webkit-transform-origin: 0 0;
-webkit-transform: translateY(-100%);
}
100% {
-webkit-transform-origin: 0 0;
-webkit-transform: translateY(0%);
}
}
@-o-keyframes slideUpRetourn {
0% {
-o-transform-origin: 0 0;
-o-transform: translateY(-100%);
}
100% {
-o-transform-origin: 0 0;
-o-transform: translateY(0%);
}
}
@-ms-keyframes slideUpRetourn {
0% {
-ms-transform-origin: 0 0;
-ms-transform: translateY(-100%);
}
100% {
-ms-transform-origin: 0 0;
-ms-transform: translateY(0%);
}
}
@keyframes slideUpRetourn {
0% {
transform-origin: 0 0;
transform: translateY(-100%);
}
100% {
transform-origin: 0 0;
transform: translateY(0%);
}
}
@-moz-keyframes swap {
0% {
opacity: 0;
-moz-transform-origin: 0 100%;
-moz-transform: scale(0, 0) translate(-700px, 0px);
}
100% {
opacity: 1;
-moz-transform-origin: 100% 100%;
-moz-transform: scale(1, 1) translate(0px, 0px);
}
}
@-webkit-keyframes swap {
0% {
opacity: 0;
-webkit-transform-origin: 0 100%;
-webkit-transform: scale(0, 0) translate(-700px, 0px);
}
100% {
opacity: 1;
-webkit-transform-origin: 100% 100%;
-webkit-transform: scale(1, 1) translate(0px, 0px);;
}
}
@-o-keyframes swap {
0% {
opacity: 0;
-o-transform-origin: 0 100%;
-o-transform: scale(0, 0) translate(-700px, 0px);
}
100% {
opacity: 1;
-o-transform-origin: 100% 100%;
-o-transform: scale(1, 1) translate(0px, 0px);
}
}
@-ms-keyframes swap {
0% {
opacity: 0;
filter: alpha(opacity=0);
-ms-transform-origin: 0 100%;
-ms-transform: scale(0, 0) translate(-700px, 0px);
}
100% {
opacity: 1;
filter: alpha(opacity=100);
-ms-transform-origin: 100% 100%;
-ms-transform: scale(1, 1) translate(0px, 0px);
}
}
@keyframes swap {
0% {
opacity: 0;
transform-origin: 0 100%;
transform: scale(0, 0) translate(-700px, 0px);
}
100% {
opacity: 1;
transform-origin: 100% 100%;
transform: scale(1, 1) translate(0px, 0px);
}
}
@-moz-keyframes twisterInDown {
0% {
opacity: 0;
-moz-transform-origin: 0 100%;
-moz-transform: scale(0, 0) rotate(360deg) translateY(-100%);
}
30% {
-moz-transform-origin: 0 100%;
-moz-transform: scale(0, 0) rotate(360deg) translateY(-100%);
}
100% {
opacity: 1;
-moz-transform-origin: 100% 100%;
-moz-transform: scale(1, 1) rotate(0deg) translateY(0%);
}
}
@-webkit-keyframes twisterInDown {
0% {
opacity: 0;
-webkit-transform-origin: 0 100%;
-webkit-transform: scale(0, 0) rotate(360deg) translateY(-100%);
}
30% {
-webkit-transform-origin: 0 100%;
-webkit-transform: scale(0, 0) rotate(360deg) translateY(-100%);
}
100% {
opacity: 1;
-webkit-transform-origin: 100% 100%;
-webkit-transform: scale(1, 1) rotate(0deg) translateY(0%);
}
}
@-o-keyframes twisterInDown {
0% {
opacity: 0;
-o-transform-origin: 0 100%;
-o-transform: scale(0, 0) rotate(360deg) translateY(-100%);
}
30% {
-o-transform-origin: 0 100%;
-o-transform: scale(0, 0) rotate(360deg) translateY(-100%);
}
100% {
opacity: 1;
-o-transform-origin: 100% 100%;
-o-transform: scale(1, 1) rotate(0deg) translateY(0%);
}
}
@-ms-keyframes twisterInDown {
0% {
opacity: 0;
filter: alpha(opacity=0);
-ms-transform-origin: 0 100%;
-ms-transform: scale(0, 0) rotate(360deg) translateY(-100%);
}
30% {
-ms-transform-origin: 0 100%;
-ms-transform: scale(0, 0) rotate(360deg) translateY(-100%);
}
100% {
opacity: 1;
filter: alpha(opacity=100);
-ms-transform-origin: 100% 100%;
-ms-transform: scale(1, 1) rotate(0deg) translateY(0%);
}
}
@keyframes twisterInDown {
0% {
opacity: 0;
transform-origin: 0 100%;
transform: scale(0, 0) rotate(360deg) translateY(-100%);
}
30% {
transform-origin: 0 100%;
transform: scale(0, 0) rotate(360deg) translateY(-100%);
}
100% {
opacity: 1;
transform-origin: 100% 100%;
transform: scale(1, 1) rotate(0deg) translateY(0%);
}
}
@-moz-keyframes twisterInUp {
0% {
opacity: 0;
-moz-transform-origin: 100% 0;
-moz-transform: scale(0, 0) rotate(360deg) translateY(100%);
}
30% {
-moz-transform-origin: 100% 0;
-moz-transform: scale(0, 0) rotate(360deg) translateY(100%);
}
100% {
opacity: 1;
-moz-transform-origin: 0 0;
-moz-transform: scale(1, 1) rotate(0deg) translateY(0);
}
}
@-webkit-keyframes twisterInUp {
0% {
opacity: 0;
-webkit-transform-origin: 100% 0;
-webkit-transform: scale(0, 0) rotate(360deg) translateY(100%);
}
30% {
-webkit-transform-origin: 100% 0;
-webkit-transform: scale(0, 0) rotate(360deg) translateY(100%);
}
100% {
opacity: 1;
-webkit-transform-origin: 0 0;
-webkit-transform: scale(1, 1) rotate(0deg) translateY(0);
}
}
@-o-keyframes twisterInUp {
0% {
opacity: 0;
-o-transform-origin: 100% 0;
-o-transform: scale(0, 0) rotate(360deg) translateY(100%);
}
30% {
-o-transform-origin: 100% 0;
-o-transform: scale(0, 0) rotate(360deg) translateY(100%);
}
100% {
opacity: 1;
-o-transform-origin: 0 0;
-o-transform: scale(1, 1) rotate(0deg) translateY(0);
}
}
@-ms-keyframes twisterInUp {
0% {
opacity: 0;
filter: alpha(opacity=0);
-ms-transform-origin: 100% 0;
-ms-transform: scale(0, 0) rotate(360deg) translateY(100%);
}
30% {;
-ms-transform-origin: 100% 0;
-ms-transform: scale(0, 0) rotate(360deg) translateY(100%);
}
100% {
opacity: 1;
filter: alpha(opacity=100);
-ms-transform-origin: 0 0;
-ms-transform: scale(1, 1) rotate(0deg) translateY(0);
}
}
@keyframes twisterInUp {
0% {
opacity: 0;
transform-origin: 100% 0;
transform: scale(0, 0) rotate(360deg) translateY(100%);
}
30% {
transform-origin: 100% 0;
transform: scale(0, 0) rotate(360deg) translateY(100%);
}
100% {
opacity: 1;
transform-origin: 0 0;
transform: scale(1, 1) rotate(0deg) translateY(0);
}
}
@-moz-keyframes vanishIn {
0% {
opacity: 0;
-moz-transform-origin: 50% 50%;
-moz-transform: scale(2, 2);
-webkit-filter: blur(90px);
}
100% {
opacity: 1;
-moz-transform-origin: 50% 50%;
-moz-transform: scale(1, 1);
-webkit-filter: blur(0px);
}
}
@-webkit-keyframes vanishIn {
0% {
opacity: 0;
-webkit-transform-origin: 50% 50%;
-webkit-transform: scale(2, 2);
-webkit-filter: blur(90px);
}
100% {
opacity: 1;
-webkit-transform-origin: 50% 50%;
-webkit-transform: scale(1, 1);
-webkit-filter: blur(0px);
}
}
@-o-keyframes vanishIn {
0% {
opacity: 0;
-o-transform-origin: 50% 50%;
-o-transform: scale(2, 2);
-webkit-filter: blur(90px);
}
100% {
opacity: 1;
-o-transform-origin: 50% 50%;
-o-transform: scale(1, 1);
-webkit-filter: blur(0px);
}
}
@-ms-keyframes vanishIn {
0% {
opacity: 0;
filter: alpha(opacity=0);
-ms-transform-origin: 50% 50%;
-ms-transform: scale(2, 2);
-webkit-filter: blur(90px);
}
100% {
opacity: 1;
filter: alpha(opacity=100);
-ms-transform-origin: 50% 50%;
-ms-transform: scale(1, 1);
-webkit-filter: blur(0px);
}
}
@keyframes vanishIn {
0% {
opacity: 0;
transform-origin: 50% 50%;
transform: scale(2, 2);
-webkit-filter: blur(90px);
}
100% {
opacity: 1;
transform-origin: 50% 50%;
transform: scale(1, 1);
-webkit-filter: blur(0px);
}
}
@-moz-keyframes vanishOut {
0% {
opacity: 1;
-moz-transform-origin: 50% 50%;
-moz-transform: scale(1, 1);
-webkit-filter: blur(0px);
}
100% {
opacity: 0;
-moz-transform-origin: 50% 50%;
-moz-transform: scale(2, 2);
-webkit-filter: blur(20px);
}
}
@-webkit-keyframes vanishOut {
0% {
opacity: 1;
-webkit-transform-origin: 50% 50%;
-webkit-transform: scale(1, 1);
-webkit-filter: blur(0px);
}
100% {
opacity: 0;
-webkit-transform-origin: 50% 50%;
-webkit-transform: scale(2, 2);
-webkit-filter: blur(20px);
}
}
@-o-keyframes vanishOut {
0% {
opacity: 1;
-o-transform-origin: 50% 50%;
-o-transform: scale(1, 1);
-webkit-filter: blur(0px);
}
100% {
opacity: 0;
-o-transform-origin: 50% 50%;
-o-transform: scale(2, 2);
-webkit-filter: blur(20px);
}
}
@-ms-keyframes vanishOut {
0% {
opacity: 1;
filter: alpha(opacity=100);
-ms-transform-origin: 50% 50%;
-ms-transform: scale(1, 1);
-webkit-filter: blur(0px);
}
100% {
opacity: 0;
filter: alpha(opacity=0);
-ms-transform-origin: 50% 50%;
-ms-transform: scale(2, 2);
-webkit-filter: blur(20px);
}
}
@keyframes vanishOut {
0% {
opacity: 1;
transform-origin: 50% 50%;
transform: scale(1, 1);
-webkit-filter: blur(0px);
}
100% {
opacity: 0;
transform-origin: 50% 50%;
transform: scale(2, 2);
-webkit-filter: blur(20px);
}
}
@-moz-keyframes swashOut {
0% {
opacity: 1;
-moz-transform-origin: 50% 50%;
-moz-transform: scale(1, 1);
}
80% {
opacity: 1;
-moz-transform-origin: 50% 50%;
-moz-transform: scale(0.9, 0.9);
}
100% {
opacity: 0;
-moz-transform-origin: 50% 50%;
-moz-transform: scale(0, 0);
}
}
@-webkit-keyframes swashOut {
0% {
opacity: 1;
-webkit-transform-origin: 50% 50%;
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
80% {
opacity: 1;
-webkit-transform-origin: 50% 50%;
-webkit-transform: scale(0.9, 0.9);
}
100% {
opacity: 0;
-webkit-transform-origin: 50% 50%;
-webkit-transform: scale(0, 0);
}
}
@-o-keyframes swashOut {
0% {
opacity: 1;
-o-transform-origin: 50% 50%;
-o-transform: scale(1, 1);
}
80% {
opacity: 1;
-o-transform-origin: 50% 50%;
-o-transform: scale(0.9, 0.9);
}
100% {
opacity: 0;
-o-transform-origin: 50% 50%;
-o-transform: scale(0, 0);
}
}
@-ms-keyframes swashOut {
0% {
opacity: 1;
filter: alpha(opacity=100);
-ms-transform-origin: 50% 50%;
-ms-transform: scale(1, 1);
}
80% {
opacity: 1;
filter: alpha(opacity=100);
-ms-transform-origin: 50% 50%;
-ms-transform: scale(0.9, 0.9);
}
100% {
opacity: 0;
filter: alpha(opacity=0);
-ms-transform-origin: 50% 50%;
-ms-transform: scale(0, 0);
}
}
@keyframes swashOut {
0% {
opacity: 1;
transform-origin: 50% 50%;
transform: scale(1, 1);
}
80% {
opacity: 1;
transform-origin: 50% 50%;
transform: scale(0.9, 0.9);
}
100% {
opacity: 0;
transform-origin: 50% 50%;
transform: scale(0, 0);
}
}
@-moz-keyframes swashIn {
0% {
opacity: 0;
-moz-transform-origin: 50% 50%;
-moz-transform: scale(0, 0);
}
90% {
opacity: 1;
-moz-transform-origin: 50% 50%;
-moz-transform: scale(0.9, 0.9);
}
100% {
opacity: 1;
-moz-transform-origin: 50% 50%;
-moz-transform: scale(1, 1);
}
}
@-webkit-keyframes swashIn {
0% {
opacity: 0;
-webkit-transform-origin: 50% 50%;
-webkit-transform: scale(0, 0);
}
90% {
opacity: 1;
-webkit-transform-origin: 50% 50%;
-webkit-transform: scale(0.9, 0.9);
}
100% {
opacity: 1;
-webkit-transform-origin: 50% 50%;
-webkit-transform: scale(1, 1);
}
}
@-o-keyframes swashIn {
0% {
opacity: 0;
-o-transform-origin: 50% 50%;
-o-transform: scale(0, 0);
}
90% {
opacity: 1;
-o-transform-origin: 50% 50%;
-o-transform: scale(0.9, 0.9);
}
100% {
opacity: 1;
-o-transform-origin: 50% 50%;
-o-transform: scale(1, 1);
}
}
@-ms-keyframes swashIn {
0% {
opacity: 0;
filter: alpha(opacity=0);
-ms-transform-origin: 50% 50%;
-ms-transform: scale(0, 0);
}
90% {
opacity: 1;
filter: alpha(opacity=100);
-ms-transform-origin: 50% 50%;
-ms-transform: scale(0.9, 0.9);
}
100% {
opacity: 1;
filter: alpha(opacity=100);
-ms-transform-origin: 50% 50%;
-ms-transform: scale(1, 1);
}
}
@keyframes swashIn {
0% {
opacity: 0;
transform-origin: 50% 50%;
transform: scale(0, 0);
}
90% {
opacity: 1;
transform-origin: 50% 50%;
transform: scale(0.9, 0.9);
}
100% {
opacity: 1;
transform-origin: 50% 50%;
transform: scale(1, 1);
}
}
@-moz-keyframes foolishOut {
0% {
opacity: 1;
-moz-transform-origin: 50% 50%;
-moz-transform: scale(1, 1) rotate(360deg);
}
20% {
opacity: 1;
-moz-transform-origin: 0% 0%;
-moz-transform: scale(0.5, 0.5) rotate(0deg);
}
40% {
opacity: 1;
-moz-transform-origin: 100% 0%;
-moz-transform: scale(0.5, 0.5) rotate(0deg);
}
60% {
opacity: 1;
-moz-transform-origin: 0%;
-moz-transform: scale(0.5, 0.5) rotate(0deg);
}
80% {
opacity: 1;
-moz-transform-origin: 0% 100%;
-moz-transform: scale(0.5, 0.5) rotate(0deg);
}
100% {
opacity: 0;
-moz-transform-origin: 50% 50%;
-moz-transform: scale(0, 0) rotate(0deg);
}
}
@-webkit-keyframes foolishOut {
0% {
opacity: 1;
-webkit-transform-origin: 50% 50%;
-webkit-transform: scale(1, 1) rotate(360deg);
}
20% {
opacity: 1;
-webkit-transform-origin: 0% 0%;
-webkit-transform: scale(0.5, 0.5) rotate(0deg);
}
40% {
opacity: 1;
-webkit-transform-origin: 100% 0%;
-webkit-transform: scale(0.5, 0.5) rotate(0deg);
}
60% {
opacity: 1;
-webkit-transform-origin: 0%;
-webkit-transform: scale(0.5, 0.5) rotate(0deg);
}
80% {
opacity: 1;
-webkit-transform-origin: 0% 100%;
-webkit-transform: scale(0.5, 0.5) rotate(0deg);
}
100% {
opacity: 0;
-webkit-transform-origin: 50% 50%;
-webkit-transform: scale(0, 0) rotate(0deg);
}
}
@-o-keyframes foolishOut {
0% {
opacity: 1;
-o-transform-origin: 50% 50%;
-o-transform: scale(1, 1) rotate(360deg);
}
20% {
opacity: 1;
-o-transform-origin: 0% 0%;
-o-transform: scale(0.5, 0.5) rotate(0deg);
}
40% {
opacity: 1;
-o-transform-origin: 100% 0%;
-o-transform: scale(0.5, 0.5) rotate(0deg);
}
60% {
opacity: 1;
-o-transform-origin: 0%;
-o-transform: scale(0.5, 0.5) rotate(0deg);
}
80% {
opacity: 1;
-o-transform-origin: 0% 100%;
-o-transform: scale(0.5, 0.5) rotate(0deg);
}
100% {
opacity: 0;
-o-transform-origin: 50% 50%;
-o-transform: scale(0, 0) rotate(0deg);
}
}
@-ms-keyframes foolishOut {
0% {
opacity: 1;
filter: alpha(opacity=100);
-ms-transform-origin: 50% 50%;
-ms-transform: scale(1, 1) rotate(360deg);
}
20% {
opacity: 1;
filter: alpha(opacity=100);
-ms-transform-origin: 0% 0%;
-ms-transform: scale(0.5, 0.5) rotate(0deg);
}
40% {
opacity: 1;
filter: alpha(opacity=100);
-ms-transform-origin: 100% 0%;
-ms-transform: scale(0.5, 0.5) rotate(0deg);
}
60% {
opacity: 1;
filter: alpha(opacity=100);
-ms-transform-origin: 0%;
-ms-transform: scale(0.5, 0.5) rotate(0deg);
}
80% {
opacity: 1;
filter: alpha(opacity=100);
-ms-transform-origin: 0% 100%;
-ms-transform: scale(0.5, 0.5) rotate(0deg);
}
100% {
opacity: 0;
filter: alpha(opacity=0);
-ms-transform-origin: 50% 50%;
-ms-transform: scale(0, 0) rotate(0deg);
}
}
@keyframes foolishOut {
0% {
opacity: 1;
transform-origin: 50% 50%;
transform: scale(1, 1) rotate(360deg);
}
20% {
opacity: 1;
transform-origin: 0% 0%;
transform: scale(0.5, 0.5) rotate(0deg);
}
40% {
opacity: 1;
transform-origin: 100% 0%;
transform: scale(0.5, 0.5) rotate(0deg);
}
60% {
opacity: 1;
transform-origin: 0%;
transform: scale(0.5, 0.5) rotate(0deg);
}
80% {
opacity: 1;
transform-origin: 0% 100%;
transform: scale(0.5, 0.5) rotate(0deg);
}
100% {
opacity: 0;
transform-origin: 50% 50%;
transform: scale(0, 0) rotate(0deg);
}
}
@-moz-keyframes foolishIn {
0% {
opacity: 0;
-moz-transform-origin: 50% 50%;
-moz-transform: scale(0, 0) rotate(360deg);
}
20% {
opacity: 1;
-moz-transform-origin: 0% 100%;
-moz-transform: scale(0.5, 0.5) rotate(0deg);
}
40% {
opacity: 1;
-moz-transform-origin: 100% 100%;
-moz-transform: scale(0.5, 0.5) rotate(0deg);
}
60% {
opacity: 1;
-moz-transform-origin: 0%;
-moz-transform: scale(0.5, 0.5) rotate(0deg);
}
80% {
opacity: 1;
-moz-transform-origin: 0% 0%;
-moz-transform: scale(0.5, 0.5) rotate(0deg);
}
100% {
opacity: 1;
-moz-transform-origin: 50% 50%;
-moz-transform: scale(1, 1) rotate(0deg);
}
}
@-webkit-keyframes foolishIn {
0% {
opacity: 0;
-webkit-transform-origin: 50% 50%;
-webkit-transform: scale(0, 0) rotate(360deg);
}
20% {
opacity: 1;
-webkit-transform-origin: 0% 100%;
-webkit-transform: scale(0.5, 0.5) rotate(0deg);
}
40% {
opacity: 1;
-webkit-transform-origin: 100% 100%;
-webkit-transform: scale(0.5, 0.5) rotate(0deg);
}
60% {
opacity: 1;
-webkit-transform-origin: 0%;
-webkit-transform: scale(0.5, 0.5) rotate(0deg);
}
80% {
opacity: 1;
-webkit-transform-origin: 0% 0%;
-webkit-transform: scale(0.5, 0.5) rotate(0deg);
}
100% {
opacity: 1;
-webkit-transform-origin: 50% 50%;
-webkit-transform: scale(1, 1) rotate(0deg);
}
}
@-o-keyframes foolishIn {
0% {
opacity: 0;
-o-transform-origin: 50% 50%;
-o-transform: scale(0, 0) rotate(360deg);
}
20% {
opacity: 1;
-o-transform-origin: 0% 100%;
-o-transform: scale(0.5, 0.5) rotate(0deg);
}
40% {
opacity: 1;
-o-transform-origin: 100% 100%;
-o-transform: scale(0.5, 0.5) rotate(0deg);
}
60% {
opacity: 1;
-o-transform-origin: 0%;
-o-transform: scale(0.5, 0.5) rotate(0deg);
}
80% {
opacity: 1;
-o-transform-origin: 0% 0%;
-o-transform: scale(0.5, 0.5) rotate(0deg);
}
100% {
opacity: 1;
-o-transform-origin: 50% 50%;
-o-transform: scale(1, 1) rotate(0deg);
}
}
@-ms-keyframes foolishIn {
0% {
opacity: 0;
filter: alpha(opacity=0);
-ms-transform-origin: 50% 50%;
-ms-transform: scale(0, 0) rotate(360deg);
}
20% {
opacity: 1;
filter: alpha(opacity=100);
-ms-transform-origin: 0% 100%;
-ms-transform: scale(0.5, 0.5) rotate(0deg);
}
40% {
opacity: 1;
filter: alpha(opacity=100);
-ms-transform-origin: 100% 100%;
-ms-transform: scale(0.5, 0.5) rotate(0deg);
}
60% {
opacity: 1;
filter: alpha(opacity=100);
-ms-transform-origin: 0%;
-ms-transform: scale(0.5, 0.5) rotate(0deg);
}
80% {
opacity: 1;
filter: alpha(opacity=100);
-ms-transform-origin: 0% 0%;
-ms-transform: scale(0.5, 0.5) rotate(0deg);
}
100% {
opacity: 1;
filter: alpha(opacity=100);
-ms-transform-origin: 50% 50%;
-ms-transform: scale(1, 1) rotate(0deg);
}
}
@keyframes foolishIn {
0% {
opacity: 0;
transform-origin: 50% 50%;
transform: scale(0, 0) rotate(360deg);
}
20% {
opacity: 1;
transform-origin: 0% 100%;
transform: scale(0.5, 0.5) rotate(0deg);
}
40% {
opacity: 1;
transform-origin: 100% 100%;
transform: scale(0.5, 0.5) rotate(0deg);
}
60% {
opacity: 1;
transform-origin: 0%;
transform: scale(0.5, 0.5) rotate(0deg);
}
80% {
opacity: 1;
transform-origin: 0% 0%;
transform: scale(0.5, 0.5) rotate(0deg);
}
100% {
opacity: 1;
transform-origin: 50% 50%;
transform: scale(1, 1) rotate(0deg);
}
}
@-moz-keyframes holeOut {
0% {
opacity: 1;
-moz-transform-origin: 50% 50%;
-moz-transform: scale(1, 1) rotateY(0deg);
}
100% {
opacity: 0;
-moz-transform-origin: 50% 50%;
-moz-transform: scale(0, 0) rotateY(180deg);
}
}
@-webkit-keyframes holeOut {
0% {
opacity: 1;
-webkit-transform-origin: 50% 50%;
-webkit-transform: scale(1, 1) rotateY(0deg);
}
100% {
opacity: 0;
-webkit-transform-origin: 50% 50%;
-webkit-transform: scale(0, 0) rotateY(180deg);
}
}
@-o-keyframes holeOut {
0% {
opacity: 1;
-o-transform-origin: 50% 50%;
-o-transform: scale(1, 1) rotateY(0deg);
}
100% {
opacity: 0;
-o-transform-origin: 50% 50%;
-o-transform: scale(0, 0) rotateY(180deg);
}
}
@-ms-keyframes holeOut {
0% {
opacity: 1;
filter: alpha(opacity=100);
-ms-transform-origin: 50% 50%;
-ms-transform: scale(1, 1) rotateY(0deg);
}
100% {
opacity: 0;
filter: alpha(opacity=0);
-ms-transform-origin: 50% 50%;
-ms-transform: scale(0, 0) rotateY(180deg);
}
}
@keyframes holeOut {
0% {
opacity: 1;
transform-origin: 50% 50%;
transform: scale(1, 1) rotateY(0deg);
}
100% {
opacity: 0;
transform-origin: 50% 50%;
transform: scale(0, 0) rotateY(180deg);
}
}
@-moz-keyframes tinRightOut {
0%, 20%, 40%, 50% {
opacity: 1;
-moz-transform: scale(1, 1) translateX(0);
}
10%, 30% {
opacity: 1;
-moz-transform: scale(1.1, 1.1) translateX(0);
}
100% {
opacity: 0;
-moz-transform: scale(1, 1) translateX(900%);
}
}
@-webkit-keyframes tinRightOut {
0%, 20%, 40%, 50% {
opacity: 1;
-webkit-transform: scale(1, 1) translateX(0);
}
10%, 30% {
opacity: 1;
-webkit-transform: scale(1.1, 1.1) translateX(0);
}
100% {
opacity: 0;
-webkit-transform: scale(1, 1) translateX(900%);
}
}
@-o-keyframes tinRightOut {
0%, 20%, 40%, 50% {
opacity: 1;
-o-transform: scale(1, 1) translateX(0);
}
10%, 30% {
opacity: 1;
-o-transform: scale(1.1, 1.1) translateX(0);
}
100% {
opacity: 0;
-o-transform: scale(1, 1) translateX(900%);
}
}
@-ms-keyframes tinRightOut {
0%, 20%, 40%, 50% {
opacity: 1;
filter: alpha(opacity=100);
-ms-transform: scale(1, 1) translateX(0);
}
10%, 30% {
opacity: 1;
filter: alpha(opacity=100);
-ms-transform: scale(1.1, 1.1) translateX(0);
}
100% {
opacity: 0;
filter: alpha(opacity=0);
-ms-transform: scale(1, 1) translateX(900%);
}
}
@keyframes tinRightOut {
0%, 20%, 40%, 50% {
opacity: 1;
transform: scale(1, 1) translateX(0);
}
10%, 30% {
opacity: 1;
transform: scale(1.1, 1.1) translateX(0);
}
100% {
opacity: 0;
transform: scale(1, 1) translateX(900%);
}
}
@-moz-keyframes tinLeftOut {
0%, 20%, 40%, 50% {
opacity: 1;
-moz-transform: scale(1, 1) translateX(0);
}
10%, 30% {
opacity: 1;
-moz-transform: scale(1.1, 1.1) translateX(0);
}
100% {
opacity: 0;
-moz-transform: scale(1, 1) translateX(-900%);
}
}
@-webkit-keyframes tinLeftOut {
0%, 20%, 40%, 50% {
opacity: 1;
-webkit-transform: scale(1, 1) translateX(0);
}
10%, 30% {
opacity: 1;
-webkit-transform: scale(1.1, 1.1) translateX(0);
}
100% {
opacity: 0;
-webkit-transform: scale(1, 1) translateX(-900%);
}
}
@-o-keyframes tinLeftOut {
0%, 20%, 40%, 50% {
opacity: 1;
-o-transform: scale(1, 1) translateX(0);
}
10%, 30% {
opacity: 1;
-o-transform: scale(1.1, 1.1) translateX(0);
}
100% {
opacity: 0;
-o-transform: scale(1, 1) translateX(-900%);
}
}
@-ms-keyframes tinLeftOut {
0%, 20%, 40%, 50% {
opacity: 1;
filter: alpha(opacity=100);
-ms-transform: scale(1, 1) translateX(0);
}
10%, 30% {
opacity: 1;
filter: alpha(opacity=100);
-ms-transform: scale(1.1, 1.1) translateX(0);
}
100% {
opacity: 0;
filter: alpha(opacity=0);
-ms-transform: scale(1, 1) translateX(-900%);
}
}
@keyframes tinLeftOut {
0%, 20%, 40%, 50% {
opacity: 1;
transform: scale(1, 1) translateX(0);
}
10%, 30% {
opacity: 1;
transform: scale(1.1, 1.1) translateX(0);
}
100% {
opacity: 0;
transform: scale(1, 1) translateX(-900%);
}
}
@-moz-keyframes tinUpOut {
0%, 20%, 40%, 50% {
opacity: 1;
-moz-transform: scale(1, 1) translateY(0);
}
10%, 30% {
opacity: 1;
-moz-transform: scale(1.1, 1.1) translateY(0);
}
100% {
opacity: 0;
-moz-transform: scale(1, 1) translateY(-900%);
}
}
@-webkit-keyframes tinUpOut {
0%, 20%, 40%, 50% {
opacity: 1;
-webkit-transform: scale(1, 1) translateY(0);
}
10%, 30% {
opacity: 1;
-webkit-transform: scale(1.1, 1.1) translateY(0);
}
100% {
opacity: 0;
-webkit-transform: scale(1, 1) translateY(-900%);
}
}
@-o-keyframes tinUpOut {
0%, 20%, 40%, 50% {
opacity: 1;
-o-transform: scale(1, 1) translateY(0);
}
10%, 30% {
opacity: 1;
-o-transform: scale(1.1, 1.1) translateY(0);
}
100% {
opacity: 0;
-o-transform: scale(1, 1) translateY(-900%);
}
}
@-ms-keyframes tinUpOut {
0%, 20%, 40%, 50% {
opacity: 1;
filter: alpha(opacity=100);
-ms-transform: scale(1, 1) translateY(0);
}
10%, 30% {
opacity: 1;
filter: alpha(opacity=100);
-ms-transform: scale(1.1, 1.1) translateY(0);
}
100% {
opacity: 0;
filter: alpha(opacity=0);
-ms-transform: scale(1, 1) translateY(-900%);
}
}
@keyframes tinUpOut {
0%, 20%, 40%, 50% {
opacity: 1;
transform: scale(1, 1) translateY(0);
}
10%, 30% {
opacity: 1;
transform: scale(1.1, 1.1) translateY(0);
}
100% {
opacity: 0;
transform: scale(1, 1) translateY(-900%);
}
}
@-moz-keyframes tinDownOut {
0%, 20%, 40%, 50% {
opacity: 1;
-moz-transform: scale(1, 1) translateY(0);
}
10%, 30% {
opacity: 1;
-moz-transform: scale(1.1, 1.1) translateY(0);
}
100% {
opacity: 0;
-moz-transform: scale(1, 1) translateY(900%);
}
}
@-webkit-keyframes tinDownOut {
0%, 20%, 40%, 50% {
opacity: 1;
-webkit-transform: scale(1, 1) translateY(0);
}
10%, 30% {
opacity: 1;
-webkit-transform: scale(1.1, 1.1) translateY(0);
}
100% {
opacity: 0;
-webkit-transform: scale(1, 1) translateY(900%);
}
}
@-o-keyframes tinDownOut {
0%, 20%, 40%, 50% {
opacity: 1;
-o-transform: scale(1, 1) translateY(0);
}
10%, 30% {
opacity: 1;
-o-transform: scale(1.1, 1.1) translateY(0);
}
100% {
opacity: 0;
-o-transform: scale(1, 1) translateY(900%);
}
}
@-ms-keyframes tinDownOut {
0%, 20%, 40%, 50% {
opacity: 1;
filter: alpha(opacity=100);
-ms-transform: scale(1, 1) translateY(0);
}
10%, 30% {
opacity: 1;
filter: alpha(opacity=100);
-ms-transform: scale(1.1, 1.1) translateY(0);
}
100% {
opacity: 0;
filter: alpha(opacity=0);
-ms-transform: scale(1, 1) translateY(900%);
}
}
@keyframes tinDownOut {
0%, 20%, 40%, 50% {
opacity: 1;
transform: scale(1, 1) translateY(0);
}
10%, 30% {
opacity: 1;
transform: scale(1.1, 1.1) translateY(0);
}
100% {
opacity: 0;
transform: scale(1, 1) translateY(900%);
}
}
@-moz-keyframes tinRightIn {
0% {
opacity: 0;
-moz-transform: scale(1, 1) translateX(900%);
}
50%, 70%, 90% {
opacity: 1;
-moz-transform: scale(1.1, 1.1) translateX(0);
}
60%, 80%, 100% {
opacity: 1;
-moz-transform: scale(1, 1) translateX(0);
}
}
@-webkit-keyframes tinRightIn {
0% {
opacity: 0;
-webkit-transform: scale(1, 1) translateX(900%);
}
50%, 70%, 90% {
opacity: 1;
-webkit-transform: scale(1.1, 1.1) translateX(0);
}
60%, 80%, 100% {
opacity: 1;
-webkit-transform: scale(1, 1) translateX(0);
}
}
@-o-keyframes tinRightIn {
0% {
opacity: 0;
-o-transform: scale(1, 1) translateX(900%);
}
50%, 70%, 90% {
opacity: 1;
-o-transform: scale(1.1, 1.1) translateX(0);
}
60%, 80%, 100% {
opacity: 1;
-o-transform: scale(1, 1) translateX(0);
}
}
@-ms-keyframes tinRightIn {
0% {
opacity: 0;
filter: alpha(opacity=0);
-ms-transform: scale(1, 1) translateX(900%);
}
50%, 70%, 90% {
opacity: 1;
filter: alpha(opacity=100);
-ms-transform: scale(1.1, 1.1) translateX(0);
}
60%, 80%, 100% {
opacity: 1;
filter: alpha(opacity=100);
-ms-transform: scale(1, 1) translateX(0);
}
}
@keyframes tinRightIn {
0% {
opacity: 0;
transform: scale(1, 1) translateX(900%);
}
50%, 70%, 90% {
opacity: 1;
transform: scale(1.1, 1.1) translateX(0);
}
60%, 80%, 100% {
opacity: 1;
transform: scale(1, 1) translateX(0);
}
}
@-moz-keyframes tinLeftIn {
0% {
opacity: 0;
-moz-transform: scale(1, 1) translateX(-900%);
}
50%, 70%, 90% {
opacity: 1;
-moz-transform: scale(1.1, 1.1) translateX(0);
}
60%, 80%, 100% {
opacity: 1;
-moz-transform: scale(1, 1) translateX(0);
}
}
@-webkit-keyframes tinLeftIn {
0% {
opacity: 0;
-webkit-transform: scale(1, 1) translateX(-900%);
}
50%, 70%, 90% {
opacity: 1;
-webkit-transform: scale(1.1, 1.1) translateX(0);
}
60%, 80%, 100% {
opacity: 1;
-webkit-transform: scale(1, 1) translateX(0);
}
}
@-o-keyframes tinLeftIn {
0% {
opacity: 0;
-o-transform: scale(1, 1) translateX(-900%);
}
50%, 70%, 90% {
opacity: 1;
-o-transform: scale(1.1, 1.1) translateX(0);
}
60%, 80%, 100% {
opacity: 1;
-o-transform: scale(1, 1) translateX(0);
}
}
@-ms-keyframes tinLeftIn {
0% {
opacity: 0;
filter: alpha(opacity=0);
-ms-transform: scale(1, 1) translateX(-900%);
}
50%, 70%, 90% {
opacity: 1;
filter: alpha(opacity=100);
-ms-transform: scale(1.1, 1.1) translateX(0);
}
60%, 80%, 100% {
opacity: 1;
filter: alpha(opacity=100);
-ms-transform: scale(1, 1) translateX(0);
}
}
@keyframes tinLeftIn {
0% {
opacity: 0;
transform: scale(1, 1) translateX(-900%);
}
50%, 70%, 90% {
opacity: 1;
transform: scale(1.1, 1.1) translateX(0);
}
60%, 80%, 100% {
opacity: 1;
transform: scale(1, 1) translateX(0);
}
}
@-moz-keyframes tinUpIn {
0% {
opacity: 0;
-moz-transform: scale(1, 1) translateY(-900%);
}
50%, 70%, 90% {
opacity: 1;
-moz-transform: scale(1.1, 1.1) translateY(0);
}
60%, 80%, 100% {
opacity: 1;
-moz-transform: scale(1, 1) translateY(0);
}
}
@-webkit-keyframes tinUpIn {
0% {
opacity: 0;
-webkit-transform: scale(1, 1) translateY(-900%);
}
50%, 70%, 90% {
opacity: 1;
-webkit-transform: scale(1.1, 1.1) translateY(0);
}
60%, 80%, 100% {
opacity: 1;
-webkit-transform: scale(1, 1) translateY(0);
}
}
@-o-keyframes tinUpIn {
0% {
opacity: 0;
-o-transform: scale(1, 1) translateY(-900%);
}
50%, 70%, 90% {
opacity: 1;
-o-transform: scale(1.1, 1.1) translateY(0);
}
60%, 80%, 100% {
opacity: 1;
-o-transform: scale(1, 1) translateY(0);
}
}
@-ms-keyframes tinUpIn {
0% {
opacity: 0;
filter: alpha(opacity=0);
-ms-transform: scale(1, 1) translateY(-900%);
}
50%, 70%, 90% {
opacity: 1;
filter: alpha(opacity=100);
-ms-transform: scale(1.1, 1.1) translateY(0);
}
60%, 80%, 100% {
opacity: 1;
filter: alpha(opacity=100);
-ms-transform: scale(1, 1) translateY(0);
}
}
@keyframes tinUpIn {
0% {
opacity: 0;
transform: scale(1, 1) translateY(-900%);
}
50%, 70%, 90% {
opacity: 1;
transform: scale(1.1, 1.1) translateY(0);
}
60%, 80%, 100% {
opacity: 1;
transform: scale(1, 1) translateY(0);
}
}
@-moz-keyframes tinDownIn {
0% {
opacity: 0;
-moz-transform: scale(1, 1) translateY(900%);
}
50%, 70%, 90% {
opacity: 1;
-moz-transform: scale(1.1, 1.1) translateY(0);
}
60%, 80%, 100% {
opacity: 1;
-moz-transform: scale(1, 1) translateY(0);
}
}
@-webkit-keyframes tinDownIn {
0% {
opacity: 0;
-webkit-transform: scale(1, 1) translateY(900%);
}
50%, 70%, 90% {
opacity: 1;
-webkit-transform: scale(1.1, 1.1) translateY(0);
}
60%, 80%, 100% {
opacity: 1;
-webkit-transform: scale(1, 1) translateY(0);
}
}
@-o-keyframes tinDownIn {
0% {
opacity: 0;
-o-transform: scale(1, 1) translateY(900%);
}
50%, 70%, 90% {
opacity: 1;
-o-transform: scale(1.1, 1.1) translateY(0);
}
60%, 80%, 100% {
opacity: 1;
-o-transform: scale(1, 1) translateY(0);
}
}
@-ms-keyframes tinDownIn {
0% {
opacity: 0;
filter: alpha(opacity=0);
-ms-transform: scale(1, 1) translateY(900%);
}
50%, 70%, 90% {
opacity: 1;
filter: alpha(opacity=100);
-ms-transform: scale(1.1, 1.1) translateY(0);
}
60%, 80%, 100% {
opacity: 1;
filter: alpha(opacity=100);
-ms-transform: scale(1, 1) translateY(0);
}
}
@keyframes tinDownIn {
0% {
opacity: 0;
transform: scale(1, 1) translateY(900%);
}
50%, 70%, 90% {
opacity: 1;
transform: scale(1.1, 1.1) translateY(0);
}
60%, 80%, 100% {
opacity: 1;
transform: scale(1, 1) translateY(0);
}
}
@-moz-keyframes bombRightOut {
0% {
opacity: 1;
-moz-transform-origin: 50% 50%;
-moz-transform: rotate(0deg);
-webkit-filter: blur(0px);
}
50% {
opacity: 1;
-moz-transform-origin: 200% 50%;
-moz-transform: rotate(160deg);
-webkit-filter: blur(0px);
}
100% {
opacity: 0;
-moz-transform-origin: 200% 50%;
-moz-transform: rotate(160deg);
-webkit-filter: blur(20px);
}
}
@-webkit-keyframes bombRightOut {
0% {
opacity: 1;
-webkit-transform-origin: 50% 50%;
-webkit-transform: rotate(0deg);
-webkit-filter: blur(0px);
}
50% {
opacity: 1;
-webkit-transform-origin: 200% 50%;
-webkit-transform: rotate(160deg);
-webkit-filter: blur(0px);
}
100% {
opacity: 0;
-webkit-transform-origin: 200% 50%;
-webkit-transform: rotate(160deg);
-webkit-filter: blur(20px);
}
}
@-o-keyframes bombRightOut {
0% {
opacity: 1;
-o-transform-origin: 50% 50%;
-o-transform: rotate(0deg);
-webkit-filter: blur(0px);
}
50% {
opacity: 1;
-o-transform-origin: 200% 50%;
-o-transform: rotate(160deg);
-webkit-filter: blur(0px);
}
100% {
opacity: 0;
-o-transform-origin: 200% 50%;
-o-transform: rotate(160deg);
-webkit-filter: blur(20px);
}
}
@-ms-keyframes bombRightOut {
0% {
opacity: 1;
filter: alpha(opacity=100);
-ms-transform-origin: 50% 50%;
-ms-transform: rotate(0deg);
-webkit-filter: blur(0px);
}
50% {
opacity: 1;
filter: alpha(opacity=100);
-ms-transform-origin: 200% 50%;
-ms-transform: rotate(160deg);
-webkit-filter: blur(0px);
}
100% {
opacity: 0;
filter: alpha(opacity=0);
-ms-transform-origin: 200% 50%;
-ms-transform: rotate(160deg);
-webkit-filter: blur(20px);
}
}
@keyframes bombRightOut {
0% {
opacity: 1;
transform-origin: 50% 50%;
transform: rotate(0deg);
-webkit-filter: blur(0px);
}
50% {
opacity: 1;
transform-origin: 200% 50%;
transform: rotate(160deg);
-webkit-filter: blur(0px);
}
100% {
opacity: 0;
transform-origin: 200% 50%;
transform: rotate(160deg);
-webkit-filter: blur(20px);
}
}
@-moz-keyframes bombLeftOut {
0% {
opacity: 1;
-moz-transform-origin: 50% 50%;
-moz-transform: rotate(0deg);
-webkit-filter: blur(0px);
}
50% {
opacity: 1;
-moz-transform-origin: -100% 50%;
-moz-transform: rotate(-160deg);
-webkit-filter: blur(0px);
}
100% {
opacity: 0;
-moz-transform-origin: -100% 50%;
-moz-transform: rotate(-160deg);
-webkit-filter: blur(20px);
}
}
@-webkit-keyframes bombLeftOut {
0% {
opacity: 1;
-webkit-transform-origin: 50% 50%;
-webkit-transform: rotate(0deg);
-webkit-filter: blur(0px);
}
50% {
opacity: 1;
-webkit-transform-origin: -100% 50%;
-webkit-transform: rotate(-160deg);
-webkit-filter: blur(0px);
}
100% {
opacity: 0;
-webkit-transform-origin: -100% 50%;
-webkit-transform: rotate(-160deg);
-webkit-filter: blur(20px);
}
}
@-o-keyframes bombLeftOut {
0% {
opacity: 1;
-o-transform-origin: 50% 50%;
-o-transform: rotate(0deg);
-webkit-filter: blur(0px);
}
50% {
opacity: 1;
-o-transform-origin: -100% 50%;
-o-transform: rotate(-160deg);
-webkit-filter: blur(0px);
}
100% {
opacity: 0;
-o-transform-origin: -100% 50%;
-o-transform: rotate(-160deg);
-webkit-filter: blur(20px);
}
}
@-ms-keyframes bombLeftOut {
0% {
opacity: 1;
filter: alpha(opacity=100);
-ms-transform-origin: 50% 50%;
-ms-transform: rotate(0deg);
-webkit-filter: blur(0px);
}
50% {
opacity: 1;
filter: alpha(opacity=100);
-ms-transform-origin: -100% 50%;
-ms-transform: rotate(-160deg);
-webkit-filter: blur(0px);
}
100% {
opacity: 0;
filter: alpha(opacity=0);
-ms-transform-origin: -100% 50%;
-ms-transform: rotate(-160deg);
-webkit-filter: blur(20px);
}
}
@keyframes bombLeftOut {
0% {
opacity: 1;
transform-origin: 50% 50%;
transform: rotate(0deg);
-webkit-filter: blur(0px);
}
50% {
opacity: 1;
transform-origin: -100% 50%;
transform: rotate(-160deg);
-webkit-filter: blur(0px);
}
100% {
opacity: 0;
transform-origin: -100% 50%;
transform: rotate(-160deg);
-webkit-filter: blur(20px);
}
}
@-moz-keyframes boingInUp {
0% {
opacity: 0;
-moz-transform-origin: 50% 0%;
-moz-transform: perspective(800px) rotateX(-90deg);
}
50% {
opacity: 1;
-moz-transform-origin: 50% 0%;
-moz-transform: perspective(800px) rotateX(50deg);
}
100% {
opacity: 1;
-moz-transform-origin: 50% 0%;
-moz-transform: perspective(800px) rotateX(0deg);
}
}
@-webkit-keyframes boingInUp {
0% {
opacity: 0;
-webkit-transform-origin: 50% 0%;
-webkit-transform: perspective(800px) rotateX(-90deg);
}
50% {
opacity: 1;
-webkit-transform-origin: 50% 0%;
-webkit-transform: perspective(800px) rotateX(50deg);
}
100% {
opacity: 1;
-webkit-transform-origin: 50% 0%;
-webkit-transform: perspective(800px) rotateX(0deg);
}
}
@-o-keyframes boingInUp {
0% {
opacity: 0;
-o-transform-origin: 50% 0%;
-o-transform: perspective(800px) rotateX(-90deg);
}
50% {
opacity: 1;
-o-transform-origin: 50% 0%;
-o-transform: perspective(800px) rotateX(50deg);
}
100% {
opacity: 1;
-o-transform-origin: 50% 0%;
-o-transform: perspective(800px) rotateX(0deg);
}
}
@-ms-keyframes boingInUp {
0% {
opacity: 0;
-ms-transform-origin: 50% 0%;
-ms-transform: perspective(800px) rotateX(-90deg);
}
50% {
opacity: 1;
-ms-transform-origin: 50% 0%;
-ms-transform: perspective(800px) rotateX(50deg);
}
100% {
opacity: 1;
-ms-transform-origin: 50% 0%;
-ms-transform: perspective(800px) rotateX(0deg);
}
}
@keyframes boingInUp {
0% {
opacity: 0;
transform-origin: 50% 0%;
transform: perspective(800px) rotateX(-90deg);
}
50% {
opacity: 1;
transform-origin: 50% 0%;
transform: perspective(800px) rotateX(50deg);
}
100% {
opacity: 1;
transform-origin: 50% 0%;
transform: perspective(800px) rotateX(0deg);
}
}
@-moz-keyframes boingOutDown {
0% {
opacity: 1;
-moz-transform-origin: 100% 100%;
-moz-transform: perspective(800px) rotateX(0deg) rotateY(0deg);
}
20% {
opacity: 1;
-moz-transform-origin: 100% 100%;
-moz-transform: perspective(800px) rotateX(0deg) rotateY(10deg);
}
30% {
opacity: 1;
-moz-transform-origin: 0% 100%;
-moz-transform: perspective(800px) rotateX(0deg) rotateY(0deg);
}
40% {
opacity: 1;
-moz-transform-origin: 0% 100%;
-moz-transform: perspective(800px) rotateX(10deg) rotateY(10deg);
}
100% {
opacity: 0;
-moz-transform-origin: 100% 100%;
-moz-transform: perspective(800px) rotateX(90deg) rotateY(0deg);
}
}
@-webkit-keyframes boingOutDown {
0% {
opacity: 1;
-webkit-transform-origin: 100% 100%;
-webkit-transform: perspective(800px) rotateX(0deg) rotateY(0deg);
}
20% {
opacity: 1;
-webkit-transform-origin: 100% 100%;
-webkit-transform: perspective(800px) rotateX(0deg) rotateY(10deg);
}
30% {
opacity: 1;
-webkit-transform-origin: 0% 100%;
-webkit-transform: perspective(800px) rotateX(0deg) rotateY(0deg);
}
40% {
opacity: 1;
-webkit-transform-origin: 0% 100%;
-webkit-transform: perspective(800px) rotateX(10deg) rotateY(10deg);
}
100% {
opacity: 0;
-webkit-transform-origin: 100% 100%;
-webkit-transform: perspective(800px) rotateX(90deg) rotateY(0deg);
}
}
@-o-keyframes boingOutDown {
0% {
opacity: 1;
-o-transform-origin: 100% 100%;
-o-transform: perspective(800px) rotateX(0deg) rotateY(0deg);
}
20% {
opacity: 1;
-o-transform-origin: 100% 100%;
-o-transform: perspective(800px) rotateX(0deg) rotateY(10deg);
}
30% {
opacity: 1;
-o-transform-origin: 0% 100%;
-o-transform: perspective(800px) rotateX(0deg) rotateY(0deg);
}
40% {
opacity: 1;
-o-transform-origin: 0% 100%;
-o-transform: perspective(800px) rotateX(10deg) rotateY(10deg);
}
100% {
opacity: 0;
-o-transform-origin: 100% 100%;
-o-transform: perspective(800px) rotateX(90deg) rotateY(0deg);
}
}
@-ms-keyframes boingOutDown {
0% {
opacity: 1;
-ms-transform-origin: 100% 100%;
-ms-transform: perspective(800px) rotateX(0deg) rotateY(0deg);
}
20% {
opacity: 1;
-ms-transform-origin: 100% 100%;
-ms-transform: perspective(800px) rotateX(0deg) rotateY(10deg);
}
30% {
opacity: 1;
-ms-transform-origin: 0% 100%;
-ms-transform: perspective(800px) rotateX(0deg) rotateY(0deg);
}
40% {
opacity: 1;
-ms-transform-origin: 0% 100%;
-ms-transform: perspective(800px) rotateX(10deg) rotateY(10deg);
}
100% {
opacity: 0;
-ms-transform-origin: 100% 100%;
-ms-transform: perspective(800px) rotateX(90deg) rotateY(0deg);
}
}
@keyframes boingOutDown {
0% {
opacity: 1;
transform-origin: 100% 100%;
transform: perspective(800px) rotateX(0deg) rotateY(0deg);
}
20% {
opacity: 1;
transform-origin: 100% 100%;
transform: perspective(800px) rotateX(0deg) rotateY(10deg);
}
30% {
opacity: 1;
transform-origin: 0% 100%;
transform: perspective(800px) rotateX(0deg) rotateY(0deg);
}
40% {
opacity: 1;
transform-origin: 0% 100%;
transform: perspective(800px) rotateX(10deg) rotateY(10deg);
}
100% {
opacity: 0;
transform-origin: 100% 100%;
transform: perspective(800px) rotateX(90deg) rotateY(0deg);
}
}
@-moz-keyframes spaceOutUp {
0% {
opacity: 1;
-moz-transform-origin: 50% 0%;
-moz-transform: scale(1) translate(0%, 0%);
}
100% {
opacity: 0;
-moz-transform-origin: 50% 0%;
-moz-transform: scale(.2) translate(0%, -200%);
}
}
@-webkit-keyframes spaceOutUp {
0% {
opacity: 1;
-webkit-transform-origin: 50% 0%;
-webkit-transform: scale(1) translate(0%, 0%);
}
100% {
opacity: 0;
-webkit-transform-origin: 50% 0%;
-webkit-transform: scale(.2) translate(0%, -200%);
}
}
@-o-keyframes spaceOutUp {
0% {
opacity: 1;
-o-transform-origin: 50% 0%;
-o-transform: scale(1) translate(0%, 0%);
}
100% {
opacity: 0;
-o-transform-origin: 50% 0%;
-o-transform: scale(.2) translate(0%, -200%);
}
}
@-ms-keyframes spaceOutUp {
0% {
opacity: 1;
-ms-transform-origin: 50% 0%;
-ms-transform: scale(1) translate(0%, 0%);
}
100% {
opacity: 0;
-ms-transform-origin: 50% 0%;
-ms-transform: scale(.2) translate(0%, -200%);
}
}
@keyframes spaceOutUp {
0% {
opacity: 1;
transform-origin: 50% 0%;
transform: scale(1) translate(0%, 0%);
}
100% {
opacity: 0;
transform-origin: 50% 0%;
transform: scale(.2) translate(0%, -200%);
}
}
@-moz-keyframes spaceOutRight {
0% {
opacity: 1;
-moz-transform-origin: 100% 50%;
-moz-transform: scale(1) translate(0%, 0%);
}
100% {
opacity: 0;
-moz-transform-origin: 100% 50%;
-moz-transform: scale(.2) translate(200%, 0%);
}
}
@-webkit-keyframes spaceOutRight {
0% {
opacity: 1;
-webkit-transform-origin: 100% 50%;
-webkit-transform: scale(1) translate(0%, 0%);
}
100% {
opacity: 0;
-webkit-transform-origin: 100% 50%;
-webkit-transform: scale(.2) translate(200%, 0%);
}
}
@-o-keyframes spaceOutRight {
0% {
opacity: 1;
-o-transform-origin: 100% 50%;
-o-transform: scale(1) translate(0%, 0%);
}
100% {
opacity: 0;
-o-transform-origin: 100% 50%;
-o-transform: scale(.2) translate(200%, 0%);
}
}
@-ms-keyframes spaceOutRight {
0% {
opacity: 1;
-ms-transform-origin: 100% 50%;
-ms-transform: scale(1) translate(0%, 0%);
}
100% {
opacity: 0;
-ms-transform-origin: 100% 50%;
-ms-transform: scale(.2) translate(200%, 0%);
}
}
@keyframes spaceOutRight {
0% {
opacity: 1;
transform-origin: 100% 50%;
transform: scale(1) translate(0%, 0%);
}
100% {
opacity: 0;
transform-origin: 100% 50%;
transform: scale(.2) translate(200%, 0%);
}
}
@-moz-keyframes spaceOutDown {
0% {
opacity: 1;
-moz-transform-origin: 50% 100%;
-moz-transform: scale(1) translate(0%, 0%);
}
100% {
opacity: 0;
-moz-transform-origin: 50% 100%;
-moz-transform: scale(.2) translate(0%, 200%);
}
}
@-webkit-keyframes spaceOutDown {
0% {
opacity: 1;
-webkit-transform-origin: 50% 100%;
-webkit-transform: scale(1) translate(0%, 0%);
}
100% {
opacity: 0;
-webkit-transform-origin: 50% 100%;
-webkit-transform: scale(.2) translate(0%, 200%);
}
}
@-o-keyframes spaceOutDown {
0% {
opacity: 1;
-o-transform-origin: 50% 100%;
-o-transform: scale(1) translate(0%, 0%);
}
100% {
opacity: 0;
-o-transform-origin: 50% 100%;
-o-transform: scale(.2) translate(0%, 200%);
}
}
@-ms-keyframes spaceOutDown {
0% {
opacity: 1;
-ms-transform-origin: 50% 100%;
-ms-transform: scale(1) translate(0%, 0%);
}
100% {
opacity: 0;
-ms-transform-origin: 50% 100%;
-ms-transform: scale(.2) translate(0%, 200%);
}
}
@keyframes spaceOutDown {
0% {
opacity: 1;
transform-origin: 50% 100%;
transform: scale(1) translate(0%, 0%);
}
100% {
opacity: 0;
transform-origin: 50% 100%;
transform: scale(.2) translate(0%, 200%);
}
}
@-moz-keyframes spaceOutLeft {
0% {
opacity: 1;
-moz-transform-origin: 0% 50%;
-moz-transform: scale(1) translate(0%, 0%);
}
100% {
opacity: 0;
-moz-transform-origin: 0% 50%;
-moz-transform: scale(.2) translate(-200%, 0%);
}
}
@-webkit-keyframes spaceOutLeft {
0% {
opacity: 1;
-webkit-transform-origin: 0% 50%;
-webkit-transform: scale(1) translate(0%, 0%);
}
100% {
opacity: 0;
-webkit-transform-origin: 0% 50%;
-webkit-transform: scale(.2) translate(-200%, 0%);
}
}
@-o-keyframes spaceOutLeft {
0% {
opacity: 1;
-o-transform-origin: 0% 50%;
-o-transform: scale(1) translate(0%, 0%);
}
100% {
opacity: 0;
-o-transform-origin: 0% 50%;
-o-transform: scale(.2) translate(-200%, 0%);
}
}
@-ms-keyframes spaceOutLeft {
0% {
opacity: 1;
-ms-transform-origin: 0% 50%;
-ms-transform: scale(1) translate(0%, 0%);
}
100% {
opacity: 0;
-ms-transform-origin: 0% 50%;
-ms-transform: scale(.2) translate(-200%, 0%);
}
}
@keyframes spaceOutLeft {
0% {
opacity: 1;
transform-origin: 0% 50%;
transform: scale(1) translate(0%, 0%);
}
100% {
opacity: 0;
transform-origin: 0% 50%;
transform: scale(.2) translate(-200%, 0%);
}
}
@-moz-keyframes spaceInUp {
0% {
opacity: 0;
-moz-transform-origin: 50% 0%;
-moz-transform: scale(.2) translate(0%, -200%);
}
100% {
opacity: 1;
-moz-transform-origin: 50% 0%;
-moz-transform: scale(1) translate(0%, 0%);
}
}
@-webkit-keyframes spaceInUp {
0% {
opacity: 0;
-webkit-transform-origin: 50% 0%;
-webkit-transform: scale(.2) translate(0%, -200%);
}
100% {
opacity: 1;
-webkit-transform-origin: 50% 0%;
-webkit-transform: scale(1) translate(0%, 0%);
}
}
@-o-keyframes spaceInUp {
0% {
opacity: 0;
-o-transform-origin: 50% 0%;
-o-transform: scale(.2) translate(0%, -200%);
}
100% {
opacity: 1;
-o-transform-origin: 50% 0%;
-o-transform: scale(1) translate(0%, 0%);
}
}
@-ms-keyframes spaceInUp {
0% {
opacity: 0;
-ms-transform-origin: 50% 0%;
-ms-transform: scale(.2) translate(0%, -200%);
}
100% {
opacity: 1;
-ms-transform-origin: 50% 0%;
-ms-transform: scale(1) translate(0%, 0%);
}
}
@keyframes spaceInUp {
0% {
opacity: 0;
transform-origin: 50% 0%;
transform: scale(.2) translate(0%, -200%);
}
100% {
opacity: 1;
transform-origin: 50% 0%;
transform: scale(1) translate(0%, 0%);
}
}
@-moz-keyframes spaceInRight {
0% {
opacity: 0;
-moz-transform-origin: 100% 50%;
-moz-transform: scale(.2) translate(200%, 0%);
}
100% {
opacity: 1;
-moz-transform-origin: 100% 50%;
-moz-transform: scale(1) translate(0%, 0%);
}
}
@-webkit-keyframes spaceInRight {
0% {
opacity: 0;
-webkit-transform-origin: 100% 50%;
-webkit-transform: scale(.2) translate(200%, 0%);
}
100% {
opacity: 1;
-webkit-transform-origin: 100% 50%;
-webkit-transform: scale(1) translate(0%, 0%);
}
}
@-o-keyframes spaceInRight {
0% {
opacity: 0;
-o-transform-origin: 100% 50%;
-o-transform: scale(.2) translate(200%, 0%);
}
100% {
opacity: 1;
-o-transform-origin: 100% 50%;
-o-transform: scale(1) translate(0%, 0%);
}
}
@-ms-keyframes spaceInRight {
0% {
opacity: 0;
-ms-transform-origin: 100% 50%;
-ms-transform: scale(.2) translate(200%, 0%);
}
100% {
opacity: 1;
-ms-transform-origin: 100% 50%;
-ms-transform: scale(1) translate(0%, 0%);
}
}
@keyframes spaceInRight {
0% {
opacity: 0;
transform-origin: 100% 50%;
transform: scale(.2) translate(200%, 0%);
}
100% {
opacity: 1;
transform-origin: 100% 50%;
transform: scale(1) translate(0%, 0%);
}
}
@-moz-keyframes spaceInDown {
0% {
opacity: 0;
-moz-transform-origin: 50% 100%;
-moz-transform: scale(.2) translate(0%, 200%);
}
100% {
opacity: 1;
-moz-transform-origin: 50% 100%;
-moz-transform: scale(1) translate(0%, 0%);
}
}
@-webkit-keyframes spaceInDown {
0% {
opacity: 0;
-webkit-transform-origin: 50% 100%;
-webkit-transform: scale(.2) translate(0%, 200%);
}
100% {
opacity: 1;
-webkit-transform-origin: 50% 100%;
-webkit-transform: scale(1) translate(0%, 0%);
}
}
@-o-keyframes spaceInDown {
0% {
opacity: 0;
-o-transform-origin: 50% 100%;
-o-transform: scale(.2) translate(0%, 200%);
}
100% {
opacity: 1;
-o-transform-origin: 50% 100%;
-o-transform: scale(1) translate(0%, 0%);
}
}
@-ms-keyframes spaceInDown {
0% {
opacity: 0;
-ms-transform-origin: 50% 100%;
-ms-transform: scale(.2) translate(0%, 200%);
}
100% {
opacity: 1;
-ms-transform-origin: 50% 100%;
-ms-transform: scale(1) translate(0%, 0%);
}
}
@keyframes spaceInDown {
0% {
opacity: 0;
transform-origin: 50% 100%;
transform: scale(.2) translate(0%, 200%);
}
100% {
opacity: 1;
transform-origin: 50% 100%;
transform: scale(1) translate(0%, 0%);
}
}
@-moz-keyframes spaceInLeft {
0% {
opacity: 0;
-moz-transform-origin: 0% 50%;
-moz-transform: scale(.2) translate(-200%, 0%);
}
100% {
opacity: 1;
-moz-transform-origin: 0% 50%;
-moz-transform: scale(1) translate(0%, 0%);
}
}
@-webkit-keyframes spaceInLeft {
0% {
opacity: 0;
-webkit-transform-origin: 0% 50%;
-webkit-transform: scale(.2) translate(-200%, 0%);
}
100% {
opacity: 1;
-webkit-transform-origin: 0% 50%;
-webkit-transform: scale(1) translate(0%, 0%);
}
}
@-o-keyframes spaceInLeft {
0% {
opacity: 0;
-o-transform-origin: 0% 50%;
-o-transform: scale(.2) translate(-200%, 0%);
}
100% {
opacity: 1;
-o-transform-origin: 0% 50%;
-o-transform: scale(1) translate(0%, 0%);
}
}
@-ms-keyframes spaceInLeft {
0% {
opacity: 0;
-ms-transform-origin: 0% 50%;
-ms-transform: scale(.2) translate(-200%, 0%);
}
100% {
opacity: 1;
-ms-transform-origin: 0% 50%;
-ms-transform: scale(1) translate(0%, 0%);
}
}
@keyframes spaceInLeft {
0% {
opacity: 0;
transform-origin: 0% 50%;
transform: scale(.2) translate(-200%, 0%);
}
100% {
opacity: 1;
transform-origin: 0% 50%;
transform: scale(1) translate(0%, 0%);
}
}