/* ==========================================
   animation.css
========================================== */

/* Loader */
@keyframes putar {

    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }

}

/* Fade */

.fade-in{

    animation:fadeIn .8s ease;

}

.fade-out{

    animation:fadeOut .6s ease forwards;

}

@keyframes fadeIn{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}

@keyframes fadeOut{

    from{

        opacity:1;

    }

    to{

        opacity:0;
        visibility:hidden;

    }

}

/* Zoom */

.zoom{

    animation:zoom .6s ease;

}

@keyframes zoom{

    from{

        transform:scale(.8);

    }

    to{

        transform:scale(1);

    }

}

/* Slide */

.slide-left{

    animation:slideLeft .5s ease;

}

@keyframes slideLeft{

    from{

        transform:translateX(-40px);
        opacity:0;

    }

    to{

        transform:translateX(0);
        opacity:1;

    }

}