.left-animation {
    transform: translate(-100%, 0%);
    opacity: 0;
    transition: all 2s ease 0s;
    /* transition: all 0.8s ease 0s;*/
}
.right-animation {
    transform: translate(100%, 0%);
    opacity: 0;
    transition: all 2s ease 0s;
    /* transition: all 0.8s ease 0s;*/
}
.top-animation {
    transform: translate(0%, -100%);
    opacity: 0;
    transition: all 2s ease 0s;
    /* transition: all 0.8s ease 0s;*/
}
.left-animation._active{
    transform: translate(0%, 0%);
    opacity: 1;
}
.right-animation._active{
    transform: translate(0%, 0%);
    opacity: 1;
}
.top-animation._active{
    transform: translate(0%, 0%);
    opacity: 1;
}


/*--------------------*/
.lokoko {
    animation-duration: 3s;
    animation-name: slidein;
}
@keyframes slidein {
    from {
        margin-left: 100%;
        width: 300%;
    }

    to {
        margin-left: 0%;
        width: 100%;
    }
}