.fadein {
    opacity: 0;
    transform: translate(0, 0);
    transition: all 1.5s;

    &.fadein-left {
        transform: translate(-30px, 0);
    }

    &.fadein-right {
        transform: translate(30px, 0);
    }

    &.fadein-up {
        transform: translate(0, -30px);
    }

    &.fadein-bottom {
        transform: translate(0, 30px);
    }

    &.scrollin {
        opacity: 1 !important;
        transform: translate(0, 0) !important;
    }
}

.slidein {
    opacity: 0;
    transform: translate(0, 0);
    transition: all 1.0s;

    &.slidein-left {
        transform: translate(-100%, 0);
    }

    &.slidein-right {
        transform: translate(100%, 0);
    }

    &.slidein-up {
        transform: translate(0, -100%);
    }

    &.slidein-bottom {
        transform: translate(0, 100%);
    }

    &.scrollin {
        transform: translate(0, 0) !important;
        opacity: 1 !important;
    }
}

.rotation {
    transition: all 1.0s;
    opacity: 0;

    &.rotation-x {
        transform: rotateX(180deg);
    }

    &.rotation-y {
        transform: rotateY(180deg);
    }

    &.rotation-clockwise {
        transform: rotate(-170deg);
    }

    &.rotation-counterclockwise {
        transform: rotate(170deg);
    }

    &.scrollin {
        transform: translate(0, 0) !important;
        opacity: 1 !important;
    }
}