// Magic css3 animations - Ver 1.1.0 - http://minimamente.com
// Licensed under the MIT license
// Copyright (c) 2014 Christian Pucci

// Magic Effects
//=============================================
& when (@animate-magic) {
    @-webkit-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));
        }
    }
    @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));
        }
    }
    .magic {
        .animation-name(magic);
    }
}
& when (@animate-twisterInDown) {
    @-webkit-keyframes twisterInDown {
        0% {
            opacity : 0;
            .transform-origin(0 100%);
            .transform(scale(0, 0) rotate(360deg) translate(0, -100%));
        }
        30% {
            .transform-origin(0 100%);
            .transform(scale(0, 0) rotate(360deg) translate(0, -100%));
        }
        100% {
            opacity : 1;
            .transform-origin(100% 100%);
            .transform(scale(1, 1) rotate(0deg) translate(0, 0));
        }
    }
    @keyframes twisterInDown {
        0% {
            opacity : 0;
            .transform-origin(0 100%);
            .transform(scale(0, 0) rotate(360deg) translate(0, -100%));
        }
        30% {
            .transform-origin(0 100%);
            .transform(scale(0, 0) rotate(360deg) translate(0, -100%));
        }
        100% {
            opacity : 1;
            .transform-origin(100% 100%);
            .transform(scale(1, 1) rotate(0deg) translate(0, 0));
        }
    }
    .twisterInDown {
        .animation-name(twisterInDown);
    }
}
& when (@animate-twisterInUp) {
    @-webkit-keyframes twisterInUp {
        0% {
            opacity : 0;
            .transform-origin(100% 0);
            .transform(scale(0, 0) rotate(360deg) translate(0, 100%));
        }
        30% {
            .transform-origin(100% 0);
            .transform(scale(0, 0) rotate(360deg) translate(0, 100%));
        }
        100% {
            opacity : 1;
            .transform-origin(100% 100%);
            .transform(scale(1, 1) rotate(0deg) translate(0, 0));
        }
    }
    @keyframes twisterInUp {
        0% {
            opacity : 0;
            .transform-origin(100% 0);
            .transform(scale(0, 0) rotate(360deg) translate(0, 100%));
        }
        30% {
            .transform-origin(100% 0);
            .transform(scale(0, 0) rotate(360deg) translate(0, 100%));
        }
        100% {
            opacity : 1;
            .transform-origin(100% 100%);
            .transform(scale(1, 1) rotate(0deg) translate(0, 0));
        }
    }
    .twisterInUp {
        .animation-name(twisterInUp);
    }
}
& when (@animate-swap) {
    @-webkit-keyframes swap {
        0% {
            opacity : 0;
            .transform-origin(0 100%);
            .transform(scale(0, 0) translate(-700px, 0));
        }
        100% {
            opacity : 1;
            .transform-origin(100% 100%);
            .transform(scale(1, 1) translate(0, 0));
        }
    }
    @keyframes swap {
        0% {
            opacity : 0;
            .transform-origin(0 100%);
            .transform(scale(0, 0) translate(-700px, 0));
        }
        100% {
            opacity : 1;
            .transform-origin(100% 100%);
            .transform(scale(1, 1) translate(0, 0));
        }
    }
    .swap {
        .animation-name(swap);
    }
}

// Bling
//=============================================
& when (@animate-puffIn) {
    @-webkit-keyframes puffIn {
        0% {
            opacity : 0;
            .transform-origin(50% 50%);
            .scale(2, 2);
        }
        100% {
            opacity : 1;
            .transform-origin(50% 50%);
            .scale(1, 1);
        }
    }
    @keyframes puffIn {
        0% {
            opacity : 0;
            .transform-origin(50% 50%);
            .scale(2, 2);
        }
        100% {
            opacity : 1;
            .transform-origin(50% 50%);
            .scale(1, 1);
        }
    }
    .puffIn {
        .animation-name(puffIn);
    }
}
& when (@animate-puffOut) {
    @-webkit-keyframes puffOut {
        0% {
            opacity : 1;
            .transform-origin(50% 50%);
            .scale(1, 1);
        }
        100% {
            opacity : 0;
            .transform-origin(50% 50%);
            .scale(2, 2);
        }
    }
    @keyframes puffOut {
        0% {
            opacity : 1;
            .transform-origin(50% 50%);
            .scale(1, 1);
        }
        100% {
            opacity : 0;
            .transform-origin(50% 50%);
            .scale(2, 2);
        }
    }
    .puffOut {
        .animation-name(puffOut);
    }
}

// Static Effects
//=============================================
& when (@animate-openDownLeft) {
    @-webkit-keyframes openDownLeft {
        0% {
            .transform-origin(bottom left);
            .rotate(0deg);
            .animation-timing-function(ease-out);
        }
        100% {
            .transform-origin(bottom left);
            .rotate(-110deg);
            .animation-timing-function(ease-in-out);
        }
    }
    @keyframes openDownLeft {
        0% {
            .transform-origin(bottom left);
            .rotate(0deg);
            .animation-timing-function(ease-out);
        }
        100% {
            .transform-origin(bottom left);
            .rotate(-110deg);
            .animation-timing-function(ease-in-out);
        }
    }
    .openDownLeft {
        .animation-name(openDownLeft);
    }
}
& when (@animate-openDownRight) {
    @-webkit-keyframes openDownRight {
        0% {
            .transform-origin(bottom right);
            .rotate(0deg);
            .animation-timing-function(ease-out);
        }
        100% {
            .transform-origin(bottom right);
            .rotate(110deg);
            .animation-timing-function(ease-in-out);
        }
    }
    @keyframes openDownRight {
        0% {
            .transform-origin(bottom right);
            .rotate(0deg);
            .animation-timing-function(ease-out);
        }
        100% {
            .transform-origin(bottom right);
            .rotate(110deg);
            .animation-timing-function(ease-in-out);
        }
    }
    .openDownRight {
        .animation-name(openDownRight);
    }
}
& when (@animate-openUpLeft) {
    @-webkit-keyframes openUpLeft {
        0% {
            .transform-origin(top left);
            .rotate(0deg);
            .animation-timing-function(ease-out);
        }

        100% {
            .transform-origin(top left);
            .rotate(110deg);
            .animation-timing-function(ease-in-out);
        }
    }
    @keyframes openUpLeft {
        0% {
            .transform-origin(top left);
            .rotate(0deg);
            .animation-timing-function(ease-out);
        }

        100% {
            .transform-origin(top left);
            .rotate(110deg);
            .animation-timing-function(ease-in-out);
        }
    }
    .openUpLeft {
        .animation-name(openUpLeft);
    }
}
& when (@animate-openUpRight) {
    @-webkit-keyframes openUpRight {
        0% {
            .transform-origin(top right);
            .rotate(0deg);
            .animation-timing-function(ease-out);
        }
        100% {
            .transform-origin(top right);
            .rotate(-110deg);
            .animation-timing-function(ease-in-out);
        }
    }
    @keyframes openUpRight {
        0% {
            .transform-origin(top right);
            .rotate(0deg);
            .animation-timing-function(ease-out);
        }
        100% {
            .transform-origin(top right);
            .rotate(-110deg);
            .animation-timing-function(ease-in-out);
        }
    }
    .openUpRight {
        .animation-name(openUpRight);
    }
}
& when (@animate-openDownLeftReturn) {
    @-webkit-keyframes openDownLeftReturn {
        0% {
            .transform-origin(bottom left);
            .rotate(-110deg);
            .animation-timing-function(ease-in-out);
        }
        100% {
            .transform-origin(bottom left);
            .rotate(0deg);
            .animation-timing-function(ease-out);
        }
    }
    @keyframes openDownLeftReturn {
        0% {
            .transform-origin(bottom left);
            .rotate(-110deg);
            .animation-timing-function(ease-in-out);
        }
        100% {
            .transform-origin(bottom left);
            .rotate(0deg);
            .animation-timing-function(ease-out);
        }
    }
    .openDownLeftReturn {
        .animation-name(openDownLeftReturn);
    }
}
& when (@animate-openDownRightReturn) {
    @-webkit-keyframes openDownRightReturn {
        0% {
            .transform-origin(bottom left);
            .rotate(110deg);
            .animation-timing-function(ease-in-out);
        }
        100% {
            .transform-origin(bottom left);
            .rotate(0deg);
            .animation-timing-function(ease-out);
        }
    }
    @keyframes openDownRightReturn {
        0% {
            .transform-origin(bottom left);
            .rotate(110deg);
            .animation-timing-function(ease-in-out);
        }
        100% {
            .transform-origin(bottom left);
            .rotate(0deg);
            .animation-timing-function(ease-out);
        }
    }
    .openDownRightReturn {
        .animation-name(openDownRightReturn);
    }
}
& when (@animate-openUpLeftReturn) {
    @-webkit-keyframes openUpLeftReturn {
        0% {
            .transform-origin(top left);
            .rotate(110deg);
            .animation-timing-function(ease-in-out);
        }
        100% {
            .transform-origin(top left);
            .rotate(0deg);
            .animation-timing-function(ease-out);
        }
    }
    @keyframes openUpLeftReturn {
        0% {
            .transform-origin(top left);
            .rotate(110deg);
            .animation-timing-function(ease-in-out);
        }
        100% {
            .transform-origin(top left);
            .rotate(0deg);
            .animation-timing-function(ease-out);
        }
    }
    .openUpLeftReturn {
        .animation-name(openUpLeftReturn);
    }
}
& when (@animate-openUpRightReturn) {
    @-webkit-keyframes openUpRightReturn {
        0% {
            .transform-origin(top right);
            .rotate(-110deg);
            .animation-timing-function(ease-in-out);
        }
        100% {
            .transform-origin(top right);
            .rotate(0deg);
            .animation-timing-function(ease-out);
        }
    }
    @keyframes openUpRightReturn {
        0% {
            .transform-origin(top right);
            .rotate(-110deg);
            .animation-timing-function(ease-in-out);
        }
        100% {
            .transform-origin(top right);
            .rotate(0deg);
            .animation-timing-function(ease-out);
        }
    }
    .openUpRightReturn {
        .animation-name(openUpRightReturn);
    }
}

// Perspective
//=============================================
& when (@animate-perspectiveDown) {
    @-webkit-keyframes perspectiveDown {
        0% {
            .transform-origin(0 100%);
            .transform(perspective(800px) rotateX(0deg));
        }
        100% {
            .transform-origin(0 100%);
            .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));
        }
    }
    .perspectiveDown {
        .animation-name(perspectiveDown);
    }
}
& when (@animate-perspectiveUp) {
    @-webkit-keyframes perspectiveUp {
        0% {
            .transform-origin(0 0);
            .transform(perspective(800px) rotateX(0deg));
        }
        100% {
            .transform-origin(0 0);
            .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));
        }
    }
    .perspectiveUp {
        .animation-name(perspectiveUp);
    }
}
& when (@animate-perspectiveLeft) {
    @-webkit-keyframes perspectiveLeft {
        0% {
            .transform-origin(0 0);
            .transform(perspective(800px) rotateY(0deg));
        }
        100% {
            .transform-origin(0 0);
            .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));
        }
    }
    .perspectiveLeft {
        .animation-name(perspectiveLeft);
    }
}
& when (@animate-perspectiveRight) {
    @-webkit-keyframes perspectiveRight {
        0% {
            .transform-origin(100% 0);
            .transform(perspective(800px) rotateX(0deg));
        }
        100% {
            .transform-origin(100% 0);
            .transform(perspective(800px) rotateX(180deg));
        }
    }
    @keyframes perspectiveRight {
        0% {
            .transform-origin(100% 0);
            .transform(perspective(800px) rotateX(0deg));
        }
        100% {
            .transform-origin(100% 0);
            .transform(perspective(800px) rotateX(180deg));
        }
    }
    .perspectiveRight {
        .animation-name(perspectiveRight);
    }
}
& when (@animate-perspectiveDownReturn) {
    @-webkit-keyframes perspectiveDownReturn {
        0% {
            .transform-origin(0 100%);
            .transform(perspective(800px) rotateX(-180deg));
        }
        100% {
            .transform-origin(0 100%);
            .transform(perspective(800px) rotateX(0deg));
        }
    }
    @keyframes perspectiveDownReturn {
        0% {
            .transform-origin(0 100%);
            .transform(perspective(800px) rotateX(-180deg));
        }
        100% {
            .transform-origin(0 100%);
            .transform(perspective(800px) rotateX(0deg));
        }
    }
    .perspectiveDownReturn {
        .animation-name(perspectiveDownReturn);
    }
}
& when (@animate-perspectiveUpReturn) {
    @-webkit-keyframes perspectiveUpReturn {
        0% {
            .transform-origin(0 0);
            .transform(perspective(800px) rotateX(180deg));
        }
        100% {
            .transform-origin(0 0);
            .transform(perspective(800px) rotateX(0deg));
        }
    }
    @keyframes perspectiveUpReturn {
        0% {
            .transform-origin(0 0);
            .transform(perspective(800px) rotateX(180deg));
        }
        100% {
            .transform-origin(0 0);
            .transform(perspective(800px) rotateX(0deg));
        }
    }
    .perspectiveUpReturn {
        .animation-name(perspectiveUpReturn);
    }
}
& when (@animate-perspectiveLeftReturn) {
    @-webkit-keyframes perspectiveLeftReturn {
        0% {
            .transform-origin(0 0);
            .transform(perspective(800px) rotateX(-180deg));
        }
        100% {
            .transform-origin(0 0);
            .transform(perspective(800px) rotateX(0deg));
        }
    }
    @keyframes perspectiveLeftReturn {
        0% {
            .transform-origin(0 0);
            .transform(perspective(800px) rotateX(-180deg));
        }
        100% {
            .transform-origin(0 0);
            .transform(perspective(800px) rotateX(0deg));
        }
    }
    .perspectiveLeftReturn {
        .animation-name(perspectiveLeftReturn);
    }
}
& when (@animate-perspectiveRightReturn) {
    @-webkit-keyframes perspectiveRightReturn {
        0% {
            .transform-origin(100% 0);
            .transform(perspective(800px) rotateX(180deg));
        }
        100% {
            .transform-origin(100% 0);
            .transform(perspective(800px) rotateX(0deg));
        }
    }
    @keyframes perspectiveRightReturn {
        0% {
            .transform-origin(100% 0);
            .transform(perspective(800px) rotateX(180deg));
        }
        100% {
            .transform-origin(100% 0);
            .transform(perspective(800px) rotateX(0deg));
        }
    }
    .perspectiveRightReturn {
        .animation-name(perspectiveRightReturn);
    }
}

// Static Effects Out
//=============================================
& when (@animate-openDownLeftOut) {
    @-webkit-keyframes openDownLeftOut {
        0% {
            opacity : 1;
            .transform-origin(bottom left);
            .animation-timing-function(ease-out);
        }
        100% {
            opacity : 0;
            .transform-origin(bottom left);
            .rotate(-110deg);
            .animation-timing-function(ease-in-out);
        }
    }
    @keyframes openDownLeftOut {
        0% {
            opacity : 1;
            .transform-origin(bottom left);
            .animation-timing-function(ease-out);
        }
        100% {
            opacity : 0;
            .transform-origin(bottom left);
            .rotate(-110deg);
            .animation-timing-function(ease-in-out);
        }
    }
    .openDownLeftOut {
        .animation-name(openDownLeftOut);
    }
}
& when (@animate-openDownRightOut) {
    @-webkit-keyframes openDownRightOut {
        0% {
            opacity : 1;
            .transform-origin(bottom right);
            .rotate(0deg);
            .animation-timing-function(ease-out);
        }
        100% {
            opacity : 0;
            .transform-origin(bottom right);
            .rotate(110deg);
            .animation-timing-function(ease-in-out);
        }
    }
    @keyframes openDownRightOut {
        0% {
            opacity : 1;
            .transform-origin(bottom right);
            .rotate(0deg);
            .animation-timing-function(ease-out);
        }
        100% {
            opacity : 0;
            .transform-origin(bottom right);
            .rotate(110deg);
            .animation-timing-function(ease-in-out);
        }
    }
    .openDownRightOut {
        .animation-name(openDownRightOut);
    }
}
& when (@animate-openUpLeftOut) {
    @-webkit-keyframes openUpLeftOut {
        0% {
            opacity : 1;
            .transform-origin(top left);
            .rotate(0deg);
            .animation-timing-function(ease-out);
        }
        100% {
            opacity : 0;
            .transform-origin(top left);
            .rotate(110deg);
            .animation-timing-function(ease-in-out);
        }
    }
    @keyframes openUpLeftOut {
        0% {
            opacity : 1;
            .transform-origin(top left);
            .rotate(0deg);
            .animation-timing-function(ease-out);
        }
        100% {
            opacity : 0;
            .transform-origin(top left);
            .rotate(110deg);
            .animation-timing-function(ease-in-out);
        }
    }
    .openUpLeftOut {
        .animation-name(openUpLeftOut);
    }
}
& when (@animate-openUpRightOut) {
    @-webkit-keyframes openUpRightOut {
        0% {
            opacity : 1;
            .transform-origin(top right);
            .rotate(0deg);
            .animation-timing-function(ease-out);
        }
        100% {
            opacity : 0;
            .transform-origin(top right);
            .rotate(-110deg);
            .animation-timing-function(ease-in-out);
        }
    }
    @keyframes openUpRightOut {
        0% {
            opacity : 1;
            .transform-origin(top right);
            .rotate(0deg);
            .animation-timing-function(ease-out);
        }
        100% {
            opacity : 0;
            .transform-origin(top right);
            .rotate(-110deg);
            .animation-timing-function(ease-in-out);
        }
    }
    .openUpRightOut {
        .animation-name(openUpRightOut);
    }
}

// Rotate
//=============================================
& when (@animate-rotateDown) {
    @-webkit-keyframes rotateDown {
        0% {
            .transform-origin(0 0);
            .transform(perspective(800px) rotateX(0deg) translateZ(0));
        }
        100% {
            opacity : 0;
            .transform-origin(50% 100%);
            .transform(perspective(800px) rotateX(-180deg) translateZ(300px));
        }
    }
    @keyframes rotateDown {
        0% {
            .transform-origin(0 0);
            .transform(perspective(800px) rotateX(0deg) translateZ(0));
        }
        100% {
            opacity : 0;
            .transform-origin(50% 100%);
            .transform(perspective(800px) rotateX(-180deg) translateZ(300px));
        }
    }
    .rotateDown {
        .animation-name(rotateDown);
    }
}
& when (@animate-rotateUp) {
    @-webkit-keyframes rotateUp {
        0% {
            .transform-origin(0 0);
            .transform(perspective(800px) rotateX(0deg) translateZ(0));
        }
        100% {
            opacity : 0;
            .transform-origin(50% 0);
            .transform(perspective(800px) rotateX(180deg) translateZ(100px));
        }
    }
    @keyframes rotateUp {
        0% {
            .transform-origin(0 0);
            .transform(perspective(800px) rotateX(0deg) translateZ(0));
        }
        100% {
            opacity : 0;
            .transform-origin(50% 0);
            .transform(perspective(800px) rotateX(180deg) translateZ(100px));
        }
    }
    .rotateUp {
        .animation-name(rotateUp);
    }
}
& when (@animate-rotateLeft) {
    @-webkit-keyframes rotateLeft {
        0% {
            .transform-origin(0 0);
            .transform(perspective(800px) rotateY(0deg) translateZ(0));
        }
        100% {
            opacity : 0;
            .transform-origin(50% 0);
            .transform(perspective(800px) rotateY(180deg) translateZ(300px));
        }
    }
    @keyframes rotateLeft {
        0% {
            .transform-origin(0 0);
            .transform(perspective(800px) rotateY(0deg) translateZ(0));
        }
        100% {
            opacity : 0;
            .transform-origin(50% 0);
            .transform(perspective(800px) rotateY(180deg) translateZ(300px));
        }
    }
    .rotateLeft {
        .animation-name(rotateLeft);
    }
}
& when (@animate-rotateRight) {
    @-webkit-keyframes rotateRight {
        0% {
            .transform-origin(0 0);
            .transform(perspective(800px) rotateY(0deg) translate3d(0));
        }
        100% {
            opacity : 0;
            .transform-origin(50% 0);
            .transform(perspective(800px) rotateY(-180deg) translateZ(150px));
        }
    }
    @keyframes rotateRight {
        0% {
            .transform-origin(0 0);
            .transform(perspective(800px) rotateY(0deg) translate3d(0));
        }
        100% {
            opacity : 0;
            .transform-origin(50% 0);
            .transform(perspective(800px) rotateY(-180deg) translateZ(150px));
        }
    }
    .rotateRight {
        .animation-name(rotateRight);
    }
}

// Slide
//=============================================
& when (@animate-slideDown) {
    @-webkit-keyframes slideDown {
        0% {
            .transform-origin(0 0);
            .transform(translateY(0));
        }
        100% {
            .transform-origin(0 0);
            .transform(translateY(100%));
        }
    }
    @keyframes slideDown {
        0% {
            .transform-origin(0 0);
            .transform(translateY(0));
        }
        100% {
            .transform-origin(0 0);
            .transform(translateY(100%));
        }
    }
    .slideDown {
        .animation-name(slideDown);
    }
}
& when (@animate-slideUp) {
    @-webkit-keyframes slideUp {
        0% {
            .transform-origin(0 0);
            .transform(translateY(0));
        }
        100% {
            .transform-origin(0 0);
            .transform(translateY(-100%));
        }
    }
    @keyframes slideUp {
        0% {
            .transform-origin(0 0);
            .transform(translateY(0));
        }
        100% {
            .transform-origin(0 0);
            .transform(translateY(-100%));
        }
    }
    .slideUp {
        .animation-name(slideUp);
    }
}
& when (@animate-slideLeft) {
    @-webkit-keyframes slideLeft {
        0% {
            .transform-origin(0 0);
            .transform(translateX(0));
        }
        100% {
            .transform-origin(0 0);
            .transform(translateX(-100%));
        }
    }
    @keyframes slideLeft {
        0% {
            .transform-origin(0 0);
            .transform(translateX(0));
        }
        100% {
            .transform-origin(0 0);
            .transform(translateX(-100%));
        }
    }
    .slideLeft {
        .animation-name(slideLeft);
    }
}
& when (@animate-slideRight) {
    @-webkit-keyframes slideRight {
        0% {
            .transform-origin(0 0);
            .transform(translateX(0));
        }
        100% {
            .transform-origin(0 0);
            .transform(translateX(100%));
        }
    }
    @keyframes slideRight {
        0% {
            .transform-origin(0 0);
            .transform(translateX(0));
        }
        100% {
            .transform-origin(0 0);
            .transform(translateX(100%));
        }
    }
    .slideRight {
        .animation-name(slideRight);
    }
}
& when (@animate-slideDownReturn) {
    @-webkit-keyframes slideDownReturn {
        0% {
            .transform-origin(0 0);
            .transform(translateY(100%));
        }
        100% {
            .transform-origin(0 0);
            .transform(translateY(0));
        }
    }
    @keyframes slideDownReturn {
        0% {
            .transform-origin(0 0);
            .transform(translateY(100%));
        }
        100% {
            .transform-origin(0 0);
            .transform(translateY(0));
        }
    }
    .slideDownReturn {
        .animation-name(slideDownReturn);
    }
}
& when (@animate-slideUpReturn) {
    @-webkit-keyframes slideUpReturn {
        0% {
            .transform-origin(0 0);
            .transform(translateY(-100%));
        }
        100% {
            .transform-origin(0 0);
            .transform(translateY(0));
        }
    }
    @keyframes slideUpReturn {
        0% {
            .transform-origin(0 0);
            .transform(translateY(-100%));
        }
        100% {
            .transform-origin(0 0);
            .transform(translateY(0));
        }
    }
    .slideUpReturn {
        .animation-name(slideUpReturn);
    }
}
& when (@animate-slideLeftReturn) {
    @-webkit-keyframes slideLeftReturn {
        0% {
            .transform-origin(0 0);
            .transform(translateX(-100%));
        }
        100% {
            .transform-origin(0 0);
            .transform(translateX(0));
        }
    }
    @keyframes slideLeftReturn {
        0% {
            .transform-origin(0 0);
            .transform(translateX(-100%));
        }
        100% {
            .transform-origin(0 0);
            .transform(translateX(0));
        }
    }
    .slideLeftReturn {
        .animation-name(slideLeftReturn);
    }
}
& when (@animate-slideRightReturn) {
    @-webkit-keyframes slideRightReturn {
        0% {
            .transform-origin(0 0);
            .transform(translateX(100%));
        }
        100% {
            .transform-origin(0 0);
            .transform(translateX(0));
        }
    }
    @keyframes slideRightReturn {
        0% {
            .transform-origin(0 0);
            .transform(translateX(100%));
        }
        100% {
            .transform-origin(0 0);
            .transform(translateX(0));
        }
    }
    .slideRightReturn {
        .animation-name(slideRightReturn);
    }
}

// Math
//=============================================
& when (@animate-swashOut) {
    @-webkit-keyframes swashOut {
        0% {
            opacity : 1;
            .transform-origin(50% 50%);
            .scale(1, 1);
        }
        80% {
            opacity : 1;
            .transform-origin(50% 50%);
            .scale(0.9, 0.9);
        }
        100% {
            opacity : 0;
            .transform-origin(50% 50%);
            .scale(0, 0);
        }
    }
    @keyframes swashOut {
        0% {
            opacity : 1;
            .transform-origin(50% 50%);
            .scale(1, 1);
        }
        80% {
            opacity : 1;
            .transform-origin(50% 50%);
            .scale(0.9, 0.9);
        }
        100% {
            opacity : 0;
            .transform-origin(50% 50%);
            .scale(0, 0);
        }
    }
    .swashOut {
        .animation-name(swashOut);
    }
}
& when (@animate-swashIn) {
    @-webkit-keyframes swashIn {
        0% {
            opacity : 0;
            .transform-origin(50% 50%);
            .scale(0, 0);
        }
        90% {
            opacity : 1;
            .transform-origin(50% 50%);
            .scale(0.9, 0.9);
        }
        100% {
            .transform-origin(50% 50%);
            .scale(1, 1);
        }
    }
    @keyframes swashIn {
        0% {
            opacity : 0;
            .transform-origin(50% 50%);
            .scale(0, 0);
        }
        90% {
            opacity : 1;
            .transform-origin(50% 50%);
            .scale(0.9, 0.9);
        }
        100% {
            .transform-origin(50% 50%);
            .scale(1, 1);
        }
    }
    .swashIn {
        .animation-name(swashIn);
    }
}
& when (@animate-foolishOut) {
    @-webkit-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));
        }
    }
    @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));
        }
    }
    .foolishOut {
        .animation-name(foolishOut);
    }
}
& when (@animate-foolishIn) {
    @-webkit-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));
        }
    }
    @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));
        }
    }
    .foolishIn {
        .animation-name(foolishIn);
    }
}
& when (@animate-holeOut) {
    @-webkit-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));
        }
    }
    @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));
        }
    }
    .holeOut {
        .animation-name(holeOut);
    }
}

// Tin
//=============================================
& when (@animate-tinRightOut) {
    @-webkit-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%));
        }
    }
    @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%));
        }
    }
    .tinRightOut {
        .animation-name(tinRightOut);
    }
}
& when (@animate-tinLeftOut) {
    @-webkit-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%));
        }
    }
    @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%));
        }
    }
    .tinLeftOut {
        .animation-name(tinLeftOut);
    }
}
& when (@animate-tinUpOut) {
    @-webkit-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%));
        }
    }
    @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%));
        }
    }
    .tinUpOut {
        .animation-name(tinUpOut);
    }
}
& when (@animate-tinDownOut) {
    @-webkit-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%));
        }
    }
    @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%));
        }
    }
    .tinDownOut {
        .animation-name(tinDownOut);
    }
}
& when (@animate-tinRightIn) {
    @-webkit-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));
        }
    }
    @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));
        }
    }
    .tinRightIn {
        .animation-name(tinRightIn);
    }
}
& when (@animate-tinLeftIn) {
    @-webkit-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));
        }
    }
    @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));
        }
    }
    .tinLeftIn {
        .animation-name(tinLeftIn);
    }
}
& when (@animate-tinUpIn) {
    @-webkit-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));
        }
    }
    @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));
        }
    }
    .tinUpIn {
        .animation-name(tinUpIn);
    }
}
& when (@animate-tinDownIn) {
    @-webkit-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));
        }
    }
    @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));
        }
    }
    .tinDownIn {
        .animation-name(tinDownIn);
    }
}

// Bomb
//=============================================
& when (@animate-bombRightOut) {
    @-webkit-keyframes bombRightOut {
        0% {
            opacity : 1;
            .transform-origin(50% 50%);
            .rotate(0deg);
        }
        50% {
            opacity : 1;
            .transform-origin(200% 50%);
            .rotate(160deg);
        }
        100% {
            opacity : 0;
            .transform-origin(200% 50%);
            .rotate(160deg);
        }
    }
    @keyframes bombRightOut {
        0% {
            opacity : 1;
            .transform-origin(50% 50%);
            .rotate(0deg);
        }
        50% {
            opacity : 1;
            .transform-origin(200% 50%);
            .rotate(160deg);
        }
        100% {
            opacity : 0;
            .transform-origin(200% 50%);
            .rotate(160deg);
        }
    }
    .bombRightOut {
        .animation-name(bombRightOut);
    }
}
& when (@animate-bombLeftOut) {
    @-webkit-keyframes bombLeftOut {
        0% {
            opacity : 1;
            .transform-origin(50% 50%);
            .rotate(0deg);
        }
        50% {
            opacity : 1;
            .transform-origin(-100% 50%);
            .rotate(-160deg);
        }
        100% {
            opacity : 0;
            .transform-origin(-100% 50%);
            .rotate(-160deg);
        }
    }
    @keyframes bombLeftOut {
        0% {
            opacity : 1;
            .transform-origin(50% 50%);
            .rotate(0deg);
        }
        50% {
            opacity : 1;
            .transform-origin(-100% 50%);
            .rotate(-160deg);
        }
        100% {
            opacity : 0;
            .transform-origin(-100% 50%);
            .rotate(-160deg);
        }
    }
    .bombLeftOut {
        .animation-name(bombLeftOut);
    }
}

// On the Space
//=============================================
& when (@animate-spaceOutUp) {
    @-webkit-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%));
        }
    }
    @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%));
        }
    }
    .spaceOutUp {
        .animation-name(spaceOutUp);
    }
}
& when (@animate-spaceOutRight) {
    @-webkit-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));
        }
    }
    @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));
        }
    }
    .spaceOutRight {
        .animation-name(spaceOutRight);
    }
}
& when (@animate-spaceOutDown) {
    @-webkit-keyframes spaceOutDown {
        0% {
            opacity : 1;
            .transform-origin(100% 50%);
            .transform(scale(1) translate(0, 0));
        }
        100% {
            opacity : 0;
            .transform-origin(100% 50%);
            .transform(scale(.2) translate(0, 200%));
        }
    }
    @keyframes spaceOutDown {
        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));
        }
    }
    .spaceOutDown {
        .animation-name(spaceOutDown);
    }
}
& when (@animate-spaceOutLeft) {
    @-webkit-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));
        }
    }
    @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));
        }
    }
    .spaceOutLeft {
        .animation-name(spaceOutLeft);
    }
}
& when (@animate-spaceInUp) {
    @-webkit-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));
        }
    }
    @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));
        }
    }
    .spaceInUp {
        .animation-name(spaceInUp);
    }
}
& when (@animate-spaceInRight) {
    @-webkit-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));
        }
    }
    @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));
        }
    }
    .spaceInRight {
        .animation-name(spaceInRight);
    }
}
& when (@animate-spaceInDown) {
    @-webkit-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));
        }
    }
    @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));
        }
    }
    .spaceInDown {
        .animation-name(spaceInDown);
    }
}
& when (@animate-spaceInLeft) {
    @-webkit-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));
        }
    }
    @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));
        }
    }
    .spaceInLeft {
        .animation-name(spaceInLeft);
    }
}