.fade-in {
    animation-name: fade-in;
    
    &-up {
        
        animation-name: fade-in-up;
    }
    
    &-left {
        animation-name: fade-in-left;
    }
}

// Keyframes
@keyframes fade-in {
    from {
        opacity: 0;
    }
    
    to {
        opacity: 1;
    }
}

@keyframes fade-in-up {
    from {
        opacity: 0;
        transform: translate3d(0, 100%, 0);
    }
    
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes fade-in-left {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }
    
    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}