@mixin animateBase($time: 0.3s, $delay: 0) {
    transition: all $time;
    transition-delay: $delay;
    opacity: 0.01;
    &-entering,
    &-entered {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.fadeIn {
    @include animateBase(0.5s, .2s);
}

.slideUp {
    transform: translate3d(0, 50px, 0);
    @include animateBase(0.5s);
}
.slideDown {
    transform: translate3d(0, -50px, 0);
    @include animateBase(0.5s);
}
.slideLeft {
    transform: translate3d(50px, 0, 0);
    @include animateBase(0.2s);
}
.slideRight {
    transform: translate3d(-50px, 0, 0);
    @include animateBase(0.2s);
}