/* Aqui vão estar todas as keyframes genéricas */

@keyframes appear {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes appear-right {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-50%, 0, 0);
        -moz-transform: translate3d(-50%, 0, 0);
        -o-transform: translate3d(-50%, 0, 0);
        transform: translate3d(-50%, 0, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        -o-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}
@keyframes appear-top {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 20%, 0);
        -moz-transform: translate3d(0, 20%, 0);
        -o-transform: translate3d(0, 20%, 0);
        transform: translate3d(0, 20%, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        -o-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}
@keyframes appear-left {
    from {
        opacity: 0;

        -webkit-transform: translate3d(50%, 0, 0);
        -moz-transform: translate3d(50%, 0, 0);
        -o-transform: translate3d(50%, 0, 0);
        transform: translate3d(50%, 0, 0);
    }

    to {
        opacity: 1;

        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        -o-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes fade-out {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes translate-up {
    from {
        opacity: 1;
        -webkit-transform: translate3d(0, 150%, 0);
        -moz-transform: translate3d(0, 150%, 0);
        -o-transform: translate3d(0, 150%, 0);
        transform: translate3d(0, 150%, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        -o-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}
@keyframes translate-right {
    from {
        opacity: 1;
        -webkit-transform: translate3d(-150%, 0, 0);
        -moz-transform: translate3d(-150%, 0, 0);
        -o-transform: translate3d(-150%, 0, 0);
        transform: translate3d(-150%, 0, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        -o-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}
@keyframes translate-left {
    from {
        opacity: 1;
        -webkit-transform: translate3d(150%, 0, 0);
        -moz-transform: translate3d(150%, 0, 0);
        -o-transform: translate3d(150%, 0, 0);
        transform: translate3d(150%, 0, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        -o-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}
@keyframes translate-down {
    from {
        opacity: 1;
        -webkit-transform: translate3d(0, -150%, 0);
        -moz-transform: translate3d(0, -150%, 0);
        -o-transform: translate3d(0, -150%, 0);
        transform: translate3d(0, -150%, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        -o-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}


@keyframes growToRight {
    from { 
        opacity: 0;
        transform: scaleX(0);
    }
    to { 
        opacity: 1;
        transform: scaleX(1);
    }
}

@keyframes middleTopDown {
    from { 
        -webkit-transform: scale(1, 0);
        -moz-transform: scale(1, 0);
        -o-transform: scale(1, 0);
        transform: scale(1, 0);
    }
    to {
        -webkit-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        transform: scale(1, 1);
    }
}