.fade-anmt {
    animation-name: fade;
    animation-duration: 0.9s;   
}

@keyframes fade {
    0% {
        filter: opacity(0%);
    }    
    100% {
        filter: opacity(100%);
    }
}

.topBottom-anmt {
    animation-name: topBottom;
    animation-duration: 0.9s;
}

@keyframes topBottom {
    from {
        transform: translateY(-100%);
    }
    to {
        transform: translateY(0%);
    }
}

.bottomTop-anmt {
    animation-name: bottomTop;
    animation-duration: 0.9s;
}

@keyframes bottomTop {
    from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(0%);
    }    
}

.leftRight-anmt {
    animation-name: leftRight;
    animation-duration: 0.9s;    
}

@keyframes leftRight {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(0%);
    }
}

.rightLeft-anmt {
    animation-name: rightLeft;
    animation-duration: 0.9s;
}

@keyframes rightLeft {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0%);
    }
}