Problème de responsive avec @media screen

Bonjour , je suis en train de coder le responsive de mon site pour que a partir de 500px de taille de l'écran le .dashboard coulisse vers la gauche voici mon code , je ne sais pas ce qu'il se passe parce que rien ne coulisse

@media screen and (max-width:500px){

    body{
        width:1100px;
    }

    @keyframes responsive{
        from {

            transform :translateX(0px);
    opacity:1;}

        to{
            transform:translateX(-365px);
            opacity:0;
        }
    }

    .dashborad{

        animation: responsive 2s;
    }

    .chrono{
        position:absolute;
        left:570px;
    }
}

Ce que je veux

que le dashboard glisse de la droite vers la gauche

Ce que j'obtiens

rien ne coulisse