@media screen and (min-width: 1024px){
    header{
        animation-name: start_head;
        animation-duration: 1.5s; 
    }
    .footer_box{
        animation-name: start_footer;
        animation-duration: 1.5s; 
    }
    .index_left{
        animation-name: start_left;
        animation-duration: 1.5s; 
    }
    .index_right{
        animation-name: start_right;
        animation-duration: 1.7s;
    }
    @keyframes  start_head{
        0% {transform: translateY(-100%); opacity: 0;}
        100%{transform: translateY(0); opacity: 1;}
    }
    @keyframes  start_footer{
        0% {transform: translateY(200%); opacity: 0;}
        100%{transform: translateY(0); opacity: 1;}
    }
    @keyframes  start_left{
        0% {transform: translateX(-100%); opacity: 0;}
        100%{transform: translateX(0); opacity: 1;}
    }
    @keyframes  start_right{
        0% { opacity: 0;}
        100%{ opacity: 1;}
    }

}

/* v.2 через удаление класса в js 
@media screen and (min-width: 1024px){
    .start header{
        transform: translateY(-100%);
        opacity: 0;
    }
    .start .footer_box{
        transform: translateY(200%);
        opacity: 0;
    }
    header,.footer_box{
        transform: translateY(0);
        opacity: 1;
        transition: 1s ease-in-out;
    }
    footer{
        overflow: hidden;
    }
    .start .index_left{
       transform: translateX(-100%);
    }
    .index_left{
       transform: translateX(0); 
       transition: 1s ease-in-out;
    }
    .start .index_right{
        opacity: 0;
    }
    .index_right{
        opacity: 1;
        transition: 0.5s ease-in-out;
        transition-delay: 1s;
    }
}*/