/*
==============================================
CSS3 ANIMATION CHEAT SHEET
==============================================

Made by Justin Aguilar

www.justinaguilar.com/animations/

Questions, comments, concerns, love letters:
justin@justinaguilar.com
==============================================
*/
.hide-block-up, .hide-block-down, .hide-block-left, .hide-block-right, .hide-fadeIn{visibility: hidden;}
.slideDown{
    animation-name: slideDown;
    -webkit-animation-name: slideDown;
    animation-duration: 1s;
    -webkit-animation-duration: 1s;
    animation-timing-function: ease;
    -webkit-animation-timing-function: ease;
    visibility: visible !important;
}
@keyframes slideDown {
    0% {transform: translateY(-100%);}
    50% {transform: translateY(8%);}
    65% {transform: translateY(-4%);}
    80% {transform: translateY(4%);}
    95% {transform: translateY(-2%);}           
    100% {transform: translateY(0%);}       
}
@-webkit-keyframes slideDown {
    0% {-webkit-transform: translateY(-100%);}
    50% {-webkit-transform: translateY(8%);}
    65% {-webkit-transform: translateY(-4%);}
    80% {-webkit-transform: translateY(4%);}
    95% {-webkit-transform: translateY(-2%);}
    100% {-webkit-transform: translateY(0%);}
}
.slideUp{
    animation-name: slideUp;
    -webkit-animation-name: slideUp;
    animation-duration: 1s;
    -webkit-animation-duration: 1s;
    animation-timing-function: ease;
    -webkit-animation-timing-function: ease;
    visibility: visible !important;
}
@keyframes slideUp {
    0% {transform: translateY(100%);}
    50% {transform: translateY(-8%);}
    65% {transform: translateY(4%);}
    80% {transform: translateY(-4%);}
    95% {transform: translateY(2%);}
    100% {transform: translateY(0%);}
}

@-webkit-keyframes slideUp {
    0% {-webkit-transform: translateY(100%);}
    50% {-webkit-transform: translateY(-8%);}
    65% {-webkit-transform: translateY(4%);}
    80% {-webkit-transform: translateY(-4%);}
    95% {-webkit-transform: translateY(2%);}
    100% {-webkit-transform: translateY(0%);}
}
.slideLeft{
    animation-name: slideLeft;
    -webkit-animation-name: slideLeft;
    animation-duration: 1s;
    -webkit-animation-duration: 1s;
    animation-timing-function: ease-in-out;
    -webkit-animation-timing-function: ease-in-out;
    visibility: visible !important; 
}
@keyframes slideLeft {
    0% {transform: translateX(150%);}
    50% {transform: translateX(-8%);}
    65% {transform: translateX(4%);}
    80% {transform: translateX(-4%);}
    95% {transform: translateX(2%);}
    100% {transform: translateX(0%);}
}
@-webkit-keyframes slideLeft {
    0% {-webkit-transform: translateX(150%);}
    50% {-webkit-transform: translateX(-8%);}
    65% {-webkit-transform: translateX(4%);}
    80% {-webkit-transform: translateX(-4%);}
    95% {-webkit-transform: translateX(2%);}
    100% {-webkit-transform: translateX(0%);}
}
.slideRight{
    animation-name: slideRight;
    -webkit-animation-name: slideRight;
    animation-duration: 1s;
    -webkit-animation-duration: 1s;
    animation-timing-function: ease-in-out;
    -webkit-animation-timing-function: ease-in-out;
    visibility: visible !important; 
}
@keyframes slideRight {
    0% {transform: translateX(-150%);}
    50% {transform: translateX(8%);}
    65% {transform: translateX(-4%);}
    80% {transform: translateX(4%);}
    95% {transform: translateX(-2%);}
    100% {transform: translateX(0%);}
}
@-webkit-keyframes slideRight {
    0% {-webkit-transform: translateX(-150%);}
    50%{-webkit-transform: translateX(8%);}
    65%{-webkit-transform: translateX(-4%);}
    80%{-webkit-transform: translateX(4%);}
    95%{-webkit-transform: translateX(-2%);}
    100% {-webkit-transform: translateX(0%);}
}
.fadeIn{
    animation-name: fadeIn;
    -webkit-animation-name: fadeIn;
    animation-duration: 1.5s;
    -webkit-animation-duration: 1.5s;
    animation-timing-function: ease-in-out;
    -webkit-animation-timing-function: ease-in-out;
    visibility: visible !important; 
}
@keyframes fadeIn {
    0% {transform: scale(0);opacity: 0.0;}
    60% {transform: scale(1.1);}
    80% {transform: scale(0.9);opacity: 1;}
    100% {transform: scale(1);opacity: 1;}
}
@-webkit-keyframes fadeIn {
    0% {-webkit-transform: scale(0);opacity: 0.0;}
    60% {-webkit-transform: scale(1.1);}
    80% {-webkit-transform: scale(0.9);opacity: 1;}
    100% {-webkit-transform: scale(1);opacity: 1;}
}