#agrandir{ 

width:20px; 

height:110px; 

background-color: black; 

transition: width 2s, background-color 2s; 

} 

#agrandir:hover{ 

width:980px; 

-webkit-transition: width 2s; 

transition: width 2s, background-color 2s; 

background: purple; 

}

#haut{
width:20px;
height:110px;
background-color: black;
-webkit-transition: height 2s,-webkit-transform 2s;
transition: height 2s,transform 2s, background-color 2s;
}
#haut:hover{
height:980px;
-webkit-transition: height 2s;
transition: height 2s,background-color 2s;
background: blue;
}

#tourner {
width: 20px;
height: 110px;
background: black;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s;
transition: width 2s, height 2s, transform 2s, background-color 2s;
}
#tourner:hover {
width: 60px;
height: 330px;
-webkit-transform: rotate(180deg);
transform: rotate(180deg),background-color 2s;
background: green;
}

#grand {
width: 20px;
height: 110px;
background: black;
-webkit-transition: width 2s, height 4s;
transition: width 2s, height 4s, background-color 2s;
}
#grand:hover {
width: 400px;
height: 400px;
background: orange;
-webkit-transition: width 2s, height 4s;
transition: width 2s, height 4s, background-color 2s;
}

#lent {
width: 20px;
height: 110px;
background: black;
-webkit-transition: width 3s; /* Safari */
-webkit-transition-delay: 1s; /* Safari */
transition: width 3s, background-color 2s;
transition-delay: 1s, background-color 2s;
}
#lent:hover {
width: 0px;
background: gray;
-webkit-transition: width 3s; /* Safari */
-webkit-transition-delay: 1s; /* Safari */
transition: width 3s, background-color 2s;
transition-delay: 1s, background-color 2s;
}