#box1 {
    animation: slide1 3s ease 0s forwards;
}

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



#container{
    animation: slide2 4s ease 0s forwards;
}

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

#container1{
    animation: slide3 4s ease 0s forwards;
    animation-delay: 3s;
    visibility: hidden; 
}

@keyframes slide3 {
    from {
        transform: translatey(100%);
        visibility: visible;
    }
    to {
        transform: translateX(0);
        visibility: visible;
    }
}

#container2{
    animation: slide4 4s ease 0s forwards;
    animation-delay: 6s;
    visibility: hidden;
}

@keyframes slide4 {
    from {
        transform: translatex(100%);
        visibility: visible;
    }
    to {
        transform: translateX(0);
        visibility: visible;
    }
}

#overmij{
    animation: slide5 1s ease 0s forwards;
    /*animation-delay: 2s;*/
    visibility: hidden; 
}

@keyframes slide5 {
    from {
        transform: translatey(-100%);
        visibility: visible;
    }
    to {
        transform: translateX(0);
        visibility: visible;
    }
}