Bonjour, nous développons une application et nous voulons faire un menu déroulant vertical venant de la gauche. 

Pour l'instant nous en sommes ici, 

#app{
  visibility: visible;
 top: 0px;
 left:-999em;
    width: 70px;
    height: 990px;
    background-color: gray; 
 position: absolute;
 z-index:3;
}

et en Js grâce à un bouton nous appelons une fonction qui replace le #app en left:0; 

Jusqu'ici tout cela fonctionne, mais ce que nous voulons c'est qu'il y ait un glissement de la gauche. 

Ce que nous avons fait c'est que nous appliquons l'animation : 

#app{
  visibility: visible;
 top: 0px;
 left:-999em;
    width: 70px;
    height: 990px;
    background-color: gray; 
 position: absolute;
 z-index:3;
    -webkit-animation-name:LefttoRight;
    -webkit-animation-duration: 1s;
    -webkit-animation-fill-mode: forwards;
}

@-webkit-keyframes LefttoRight {
    0%   { left:-999em;}
    100% { left:0px;}
}

Et cela fonctionne très bien, mais la nous voulons  la déclencher depuis un clic sur notre bouton, on a donc essaye ceci: 

#app{
  visibility: visible;
 top: 0px;
 left:-999em;
    width: 70px;
    height: 990px;
    background-color: gray; 
 position: absolute;
 z-index:3;
    -webkit-animation-name:;
    -webkit-animation-duration: 1s;
    -webkit-animation-fill-mode: forwards;
}

function menuder(){
    document.getElementById('app').style.webkit.animation.name ='LefttoRight';}

Et comme cela nous pourrions déclencher au clic sur notre bouton. J'espère que vous trouverez un moyen de nous mettre sur la voie de la réponse . C'est un projet pour le BAC nous ne pouvons pas utiliser de JQUERY, ni de PHP. Merci d'avance 

Bonjour, mets toute ton animation dans une classe css à part et ajoute cette classe lors du clic via classList :

document.getElementById('app').classList.add('animation');

Merci beaucoup YLaakel, ça marche niquel

Pour ceux qui serait intéressé voici comment nous avons intégré le code que YLaakel nous a passé: 

function menuder(){
    document.getElementById('app').classList.add('animation');
}

<div id="app" class="">

.animation {
      -webkit-animation-name:LefttoRight;
    -webkit-animation-duration: 4s;
    -webkit-animation-fill-mode: forwards;
}    

@-webkit-keyframes LefttoRight {
    0%   { left:-999em;}
    100% { left:0px;}

}

Encore merci