<div id="animate">Transition CSS3</div>

#animate{
    position:relative;
    text-align:center; 
    color:#FFF; 
    display:table-cell; 
    vertical-align:middle;
    width: 200px;
    height:200px;
    background-color: #F00;
    border-radius: 5px;
    transition: all 300ms linear 0ms;
    left:0;
}
  
#animate:hover{
    background-color: #00F;
    border-radius: 50%;
    color:#AAA;
    left: 50px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.