<div id="transition1"></div>
<div id="transition2"></div>
<div id="transition3"></div>
#transition1 {
background: none repeat scroll 0 0 #1ECB17;
background: none repeat scroll 0 0 #E19A25;
height: 150px;
transition: width 2s ease 0s;
width: 150px;
}
#transition1:hover {
width: 1000px;
}
#transition2 {
background: none repeat scroll 0 0 #1FBAE9;
height: 150px;
width: 150px;
transition: width 2s ease 0s, height 2s ease 0s, -moz-transform 2s ease 0s;
}
#transition2:hover {
height: 300px;
width: 300px;
transform: rotate(360deg);
background: none repeat scroll 0 0 #0F7797;
}
#transition3{
height:150px;
width:150px;
background: #AD12F1;
border-radius: 6px;
transition-property: background, border-radius;
transition-duration: 2s;
transition-timing-function: linear;
}
#transition3:hover {
background: #EBDFDF;
border-radius: 50%;
}