CSS: Animate with CSS Only

this example css code, to perform animate like jQuery, but without any js code, but following code works on modern browser only

 

<style>

.theBox {

 

-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;

 

background: red;

width:100px;

height:50px;

 

}

 

.theBox:hover{

width:200px;

}

</style>

 

<div class=”theBox”></div>