@keyframes intro-left {
    from {
        margin-left: 40%;
        opacity: 0;}

    to {
        margin-left: 0%;
        opacity: 1;
    }
}
@keyframes intro-right {
    from {
        margin-right: 40%;
        opacity: 0;
    }
    to {
        margin-right: 0%;
        opacity: 1;
    }
}   
@keyframes intro-top {
    from {
        margin-top: 40%;
        opacity: 0;
    }
    to {
        margin-top: 0%;
        opacity: 1;
    }
} 
@keyframes intro-bottom {
    from {
        margin-bottom: 40%;
        opacity: 0;
    }
    to {
        margin-bottom: 0%;
        opacity: 1;
    }
}

@keyframes opacity {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.intro-left{
    animation-duration: 2s;
    animation-name: intro-left;
}
.intro-right{
    animation-duration: 2s;
    animation-name: intro-right;
}
.intro-top{
    animation-duration: 2s;
    animation-name: intro-top;
}
.intro-bottom{
    animation-duration: 2s;
    animation-name: intro-bottom;
}
.opacity{
    animation-duration: 2s;
    animation-name: opacity;
}