ho modificato il codice aggiungendo un esempio di come vorrei fare,
nel caso non mi fossi spiegato bene, non riesco a capire come configurare javascript a fare più di due animazioni




codice:
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Prova</title>


</head>
<body>
    
<div class="transition0" id="animation"></div>
    <button onclick="toggle2()">Indietro</button>
<button onclick="toggle()">Avanti</button>


    
    
    <style>
#animation
{
  
  background-color:#ff0000;
  width:100px;
  height:100px;
  -webkit-transition:0.5s ease all;
  -webkit-transform:width:10px ;
  -moz-transition:0.5s ease all;
  -moz-transform:width:10px ;
  -o-transition:0.5s ease all;
  -o-transform:width:10px ;
  -ms-transition:0.5s ease all;
  -ms-transform:width:10px;
  
  transition:0.5s ease all;
  transform:width:10px ;;
}


#animation.transition1
{
  
  background-color:#e6a529;
  width:200px;
  height:100px;


}
            
#animation.transition2
{
  
  background-color:#ffeb00;
  width:400px;
  height:100px;


}
    
#animation.transition3
{
  
  background-color:#000aff;
  width:600px;
  height:100px;


}
        
#animation.transition4
{
  
  background-color:#00ff31;
  width:800px;
  height:100px;


}    
</style>
    
    
<script>
function toggle()
{
  var animation=document.getElementById("animation");
  animation.className=animation.className=="transition0" ? 
  "transition1" : 
  "transition2" ;
  "transition3" ; /* SI BLOCCA QUANDO AGGIUNGO LA 3 E LA 4 TRANSIZIONE SOSTITUENDO ; CON : */
  "transition4" ;
}
    
    function toggle2()
{
  var animation=document.getElementById("animation");
  animation.className=animation.className=="transition2" ? 
  "transition1" : 
  "transition0" ;
}
</script>




</body>
</html>