// Made by Justin Aguilar => www.justinaguilar.com/animations/
// Questions, comments, concerns, love letters: justin@justinaguilar.com

// Entrances
//=============================================
& when (@animate-slideDown2){
    @-webkit-keyframes slideDown2{
        0%{
            .translate(0, -100%);
        }
        50%{
            .translate(0, 8%);
        }
        65%{
            .translate(0, -4%);
        }
        80%{
            .translate(0, 4%);
        }
        95%{
            .translate(0, -2%);
        }
        100%{
            .translate(0);
        }
    }
    @keyframes slideDown2{
        0%{
            .translate(0, -100%);
        }
        50%{
            .translate(0, 8%);
        }
        65%{
            .translate(0, -4%);
        }
        80%{
            .translate(0, 4%);
        }
        95%{
            .translate(0, -2%);
        }
        100%{
            .translate(0);
        }
    }
    .slideDown2{
        .animation-name(slideDown2);
    }
}
& when (@animate-slideUp2){
    @-webkit-keyframes slideUp2{
        0%{
            .translate(0, 100%);
        }
        50%{
            .translate(0, -8%);
        }
        65%{
            .translate(0, 4%);
        }
        80%{
            .translate(0, -4%);
        }
        95%{
            .translate(0, 2%);
        }
        100%{
            .translate(0);
        }
    }
    @keyframes slideUp2{
        0%{
            .translate(0, 100%);
        }
        50%{
            .translate(0, -8%);
        }
        65%{
            .translate(0, 4%);
        }
        80%{
            .translate(0, -4%);
        }
        95%{
            .translate(0, 2%);
        }
        100%{
            .translate(0);
        }
    }
    .slideUp2{
        .animation-name(slideUp2);
    }
}
& when (@animate-slideLeft2){
    @-webkit-keyframes slideLeft2{
        0%{
            .translate(150%, 0);
        }
        50%{
            .translate(-8%, 0);
        }
        65%{
            .translate(4%, 0);
        }
        80%{
            .translate(-4%, 0);
        }
        95%{
            .translate(2%, 0);
        }
        100%{
            .translate(0%, 0);
        }
    }
    @keyframes slideLeft2{
        0%{
            .translate(150%, 0);
        }
        50%{
            .translate(-8%, 0);
        }
        65%{
            .translate(4%, 0);
        }
        80%{
            .translate(-4%, 0);
        }
        95%{
            .translate(2%, 0);
        }
        100%{
            .translate(0%, 0);
        }
    }
    .slideLeft2{
        .animation-name(slideLeft2);
    }
}
& when (@animate-slideRight2){
    @-webkit-keyframes slideRight2{
        0%{
            .translate(-150%, 0);
        }
        50%{
            .translate(8%, 0);
        }
        65%{
            .translate(-4%, 0);
        }
        80%{
            .translate(4%, 0);
        }
        95%{
            .translate(-2%, 0);
        }
        100%{
            .translate(0, 0);
        }
    }
    @keyframes slideRight2{
        0%{
            .translate(-150%, 0);
        }
        50%{
            .translate(8%, 0);
        }
        65%{
            .translate(-4%, 0);
        }
        80%{
            .translate(4%, 0);
        }
        95%{
            .translate(-2%, 0);
        }
        100%{
            .translate(0, 0);
        }
    }
    .slideRight2{
        .animation-name(slideRight2);
    }
}
& when (@animate-slideExpandUp){
    @-webkit-keyframes slideExpandUp{
        0%{
            .transform(translateY(100%) scaleX(0.5));
        }
        30%{
            .transform(translateY(-8%) scaleX(0.5));
        }
        40%{
            .transform(translateY(2%) scaleX(0.5));
        }
        50%{
            .transform(translateY(0%) scaleX(1.1));
        }
        60%{
            .transform(translateY(0%) scaleX(0.9));
        }
        70%{
            .transform(translateY(0%) scaleX(1.05));
        }
        80%{
            .transform(translateY(0%) scaleX(0.95));
        }
        90%{
            .transform(translateY(0%) scaleX(1.02));
        }
        100%{
            .transform(translateY(0%) scaleX(1));
        }
    }
    @keyframes slideExpandUp{
        0%{
            .transform(translateY(100%) scaleX(0.5));
        }
        30%{
            .transform(translateY(-8%) scaleX(0.5));
        }
        40%{
            .transform(translateY(2%) scaleX(0.5));
        }
        50%{
            .transform(translateY(0%) scaleX(1.1));
        }
        60%{
            .transform(translateY(0%) scaleX(0.9));
        }
        70%{
            .transform(translateY(0%) scaleX(1.05));
        }
        80%{
            .transform(translateY(0%) scaleX(0.95));
        }
        90%{
            .transform(translateY(0%) scaleX(1.02));
        }
        100%{
            .transform(translateY(0%) scaleX(1));
        }
    }
    .slideExpandUp{
        .animation-duration(1.6s);
        .animation-name(slideExpandUp);
    }
}
& when (@animate-expandUp){
    @-webkit-keyframes expandUp{
        0%{
            .transform(translateY(100%) scale(0.6) scaleY(0.5));
        }
        60%{
            .transform(translateY(-7%) scaleY(1.12));
        }
        75%{
            .transform(translateY(3%));
        }
        100%{
            .transform(translateY(0%) scale(1) scaleY(1));
        }
    }
    @keyframes expandUp{
        0%{
            .transform(translateY(100%) scale(0.6) scaleY(0.5));
        }
        60%{
            .transform(translateY(-7%) scaleY(1.12));
        }
        75%{
            .transform(translateY(3%));
        }
        100%{
            .transform(translateY(0%) scale(1) scaleY(1));
        }
    }
    .expandUp{
        .animation-duration(0.7s);
        .animation-name(expandUp);
    }
}
& when (@animate-fadeIn2){
    @-webkit-keyframes fadeIn2{
        0%{
            .scale(0);
            opacity : 0;
        }
        60%{
            .scale(1.1);
        }
        80%{
            .scale(0.9);
            opacity : 1;
        }
        100%{
            .scale(1);
        }
    }
    @keyframes fadeIn2{
        0%{
            .scale(0);
            opacity : 0;
        }
        60%{
            .scale(1.1);
        }
        80%{
            .scale(0.9);
            opacity : 1;
        }
        100%{
            .scale(1);
        }
    }
    .fadeIn2{
        .animation-name(fadeIn2);
    }
}
& when (@animate-expandOpen){
    @-webkit-keyframes expandOpen{
        0%{
            .scale(1.8);
        }
        50%{
            .scale(0.95);
        }
        80%{
            .scale(1.05);
        }
        90%{
            .scale(0.98);
        }
        100%{
            .scale(1);
        }
    }
    @keyframes expandOpen{
        0%{
            .scale(1.8);
        }
        50%{
            .scale(0.95);
        }
        80%{
            .scale(1.05);
        }
        90%{
            .scale(0.98);
        }
        100%{
            .scale(1);
        }
    }
    .expandOpen{
        .animation-duration(1.2s);
        .animation-name(expandOpen);
    }
}
& when (@animate-bigEntrance){
    @-webkit-keyframes bigEntrance{
        0%{
            .transform(scale(0.3) rotate(6deg) translateX(-30%) translateY(30%));
            opacity : 0.2;
        }
        30%{
            .transform(scale(1.03) rotate(-2deg) translateX(2%) translateY(-2%));
            opacity : 1;
        }
        45%{
            .transform(scale(0.98) rotate(1deg) translateX(0) translateY(0));
        }
        60%{
            .transform(scale(1.01) rotate(-1deg) translateX(0) translateY(0));
        }
        75%{
            .transform(scale(0.99) rotate(1deg) translateX(0) translateY(0));
        }
        90%{
            .transform(scale(1.01) rotate(0) translateX(0) translateY(0));
        }
        100%{
            .transform(scale(1) rotate(0) translateX(0) translateY(0));
        }
    }
    @keyframes bigEntrance{
        0%{
            .transform(scale(0.3) rotate(6deg) translateX(-30%) translateY(30%));
            opacity : 0.2;
        }
        30%{
            .transform(scale(1.03) rotate(-2deg) translateX(2%) translateY(-2%));
            opacity : 1;
        }
        45%{
            .transform(scale(0.98) rotate(1deg) translateX(0) translateY(0));
        }
        60%{
            .transform(scale(1.01) rotate(-1deg) translateX(0) translateY(0));
        }
        75%{
            .transform(scale(0.99) rotate(1deg) translateX(0) translateY(0));
        }
        90%{
            .transform(scale(1.01) rotate(0) translateX(0) translateY(0));
        }
        100%{
            .transform(scale(1) rotate(0) translateX(0) translateY(0));
        }
    }
    .bigEntrance{
        .animation-duration(1.6s);
        .animation-name(bigEntrance);
    }
}
& when (@animate-hatch){
    @-webkit-keyframes hatch{
        0%{
            .transform(rotate(0deg) scaleY(0.6));
        }
        20%{
            .transform(rotate(-2deg) scaleY(1.05));
        }
        35%{
            .transform(rotate(2deg) scaleY(1));
        }
        50%{
            .rotate(-2deg);
        }
        65%{
            .rotate(1deg);
        }
        80%{
            .rotate(-1deg);
        }
        100%{
            .rotate(0);
        }
    }
    @keyframes hatch{
        0%{
            .transform(rotate(0deg) scaleY(0.6));
        }
        20%{
            .transform(rotate(-2deg) scaleY(1.05));
        }
        35%{
            .transform(rotate(2deg) scaleY(1));
        }
        50%{
            .rotate(-2deg);
        }
        65%{
            .rotate(1deg);
        }
        80%{
            .rotate(-1deg);
        }
        100%{
            .rotate(0);
        }
    }
    .hatch{
        .animation-name(hatch);
        .animation-duration(2s);
        .transform-origin(50% 100%);
        .animation-timing-function(ease-in-out);
    }
}

// Misc
//=============================================
& when (@animate-bounce2){
    @-webkit-keyframes bounce2{
        0%{
            .transform(translateY(0%) scaleY(0.6));
        }
        60%{
            .transform(translateY(-100%) scaleY(1.1));
        }
        70%{
            .transform(translateY(0) scaleY(0.95) scaleX(1.05));
        }
        80%{
            .transform(translateY(0) scaleY(1.05) scaleX(1));
        }
        90%{
            .transform(translateY(0) scaleY(0.95) scaleX(1));
        }
        100%{
            .transform(translateY(0) scale(1));
        }
    }
    @keyframes bounce2{
        0%{
            .transform(translateY(0%) scaleY(0.6));
        }
        60%{
            .transform(translateY(-100%) scaleY(1.1));
        }
        70%{
            .transform(translateY(0) scaleY(0.95) scaleX(1.05));
        }
        80%{
            .transform(translateY(0) scaleY(1.05) scaleX(1));
        }
        90%{
            .transform(translateY(0) scaleY(0.95) scaleX(1));
        }
        100%{
            .transform(translateY(0) scale(1));
        }
    }
    .bounce2{
        .animation-name(bounce2);
        .animation-duration(1.6s);
        .transform-origin(50% 100%);
    }
}
& when (@animate-floating){
    @-webkit-keyframes floating{
        0%{
            .translate(0);
        }
        50%{
            .translate(0, 8%);
        }
        100%{
            .translate(0);
        }
    }
    @keyframes floating{
        0%{
            .translate(0);
        }
        50%{
            .translate(0, 8%);
        }
        100%{
            .translate(0);
        }
    }
    .floating{
        .animation-name(floating);
        .animation-duration(1.5s);
//        .animation-iteration-count(infinite);
    }
}
& when (@animate-tossing){
    @-webkit-keyframes tossing{
        0%{
            .rotate(-4deg);
        }
        50%{
            .rotate(4deg);
        }
        100%{
            .rotate(-4deg);
        }
    }
    @keyframes tossing{
        0%{
            .rotate(-4deg);
        }
        50%{
            .rotate(4deg);
        }
        100%{
            .rotate(-4deg);
        }
    }
    .tossing{
        .animation-name(tossing);
        .animation-duration(2.5s);
//        .animation-iteration-count(infinite);
    }
}
& when (@animate-pullUp){
    @-webkit-keyframes pullUp{
        0%{
            .scale(1, 0.1);
        }
        40%{
            .scale(1, 1.02);
        }
        60%{
            .scale(1, 0.98);
        }
        80%{
            .scale(1, 1.01);
        }
        100%{
            .scale(1, 0.98);
        }
        80%{
            .scale(1, 1.01);
        }
        100%{
            .scale(1);
        }
    }
    @keyframes pullUp{
        0%{
            .scale(1, 0.1);
        }
        40%{
            .scale(1, 1.02);
        }
        60%{
            .scale(1, 0.98);
        }
        80%{
            .scale(1, 1.01);
        }
        100%{
            .scale(1, 0.98);
        }
        80%{
            .scale(1, 1.01);
        }
        100%{
            .scale(1);
        }
    }
    .pullUp{
        .animation-name(pullUp);
        .animation-duration(1.1s);
        .transform-origin(50% 100%);
        .animation-timing-function(ease-out);
    }
}
& when (@animate-pullDown){
    @-webkit-keyframes pullDown{
        0%{
            .scale(1, 0.1);
        }
        40%{
            .scale(1, 1.02);
        }
        60%{
            .scale(1, 0.98);
        }
        80%{
            .scale(1, 1.01);
        }
        100%{
            .scale(1, 0.98);
        }
        80%{
            .scale(1, 1.01);
        }
        100%{
            .scale(1);
        }
    }
    @keyframes pullDown{
        0%{
            .scale(1, 0.1);
        }
        40%{
            .scale(1, 1.02);
        }
        60%{
            .scale(1, 0.98);
        }
        80%{
            .scale(1, 1.01);
        }
        100%{
            .scale(1, 0.98);
        }
        80%{
            .scale(1, 1.01);
        }
        100%{
            .scale(1);
        }
    }
    .pullDown{
        .animation-name(pullDown);
        .animation-duration(1.1s);
        .transform-origin(50% 0);
        .animation-timing-function(ease-out);
    }
}
& when (@animate-stretchLeft){
    @-webkit-keyframes stretchLeft{
        0%{
            .scale(0.3, 1);
        }
        40%{
            .scale(1.02, 1);
        }
        60%{
            .scale(0.98, 1);
        }
        80%{
            .scale(1.01, 1);
        }
        100%{
            .scale(0.98, 1);
        }
        80%{
            .scale(1.01, 1);
        }
        100%{
            .scale(1);
        }
    }
    @keyframes stretchLeft{
        0%{
            .scale(0.3, 1);
        }
        40%{
            .scale(1.02, 1);
        }
        60%{
            .scale(0.98, 1);
        }
        80%{
            .scale(1.01, 1);
        }
        100%{
            .scale(0.98, 1);
        }
        80%{
            .scale(1.01, 1);
        }
        100%{
            .scale(1);
        }
    }
    .stretchLeft{
        .animation-name(stretchLeft);
        .animation-duration(1.5s);
        .transform-origin(100% 0);
        .animation-timing-function(ease-out);
    }
}
& when (@animate-stretchRight){
    @-webkit-keyframes stretchRight{
        0%{
            .scale(0.3, 1);
        }
        40%{
            .scale(1.02, 1);
        }
        60%{
            .scale(0.98, 1);
        }
        80%{
            .scale(1.01, 1);
        }
        100%{
            .scale(0.98, 1);
        }
        80%{
            .scale(1.01, 1);
        }
        100%{
            .scale(1);
        }
    }
    @keyframes stretchRight{
        0%{
            .scale(0.3, 1);
        }
        40%{
            .scale(1.02, 1);
        }
        60%{
            .scale(0.98, 1);
        }
        80%{
            .scale(1.01, 1);
        }
        100%{
            .scale(0.98, 1);
        }
        80%{
            .scale(1.01, 1);
        }
        100%{
            .scale(1);
        }
    }
    .stretchRight{
        .animation-name(stretchRight);
        .animation-duration(1.5s);
        .transform-origin(0 0);
        .animation-timing-function(ease-out);
    }
}