// 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);
    }
}