animated effect in search box button from right to left

CSS is most popular nowadays, day by days css is coming up with new features. To add an animated search box button that start effect from right to left open

First add search your form

 <form><input name="search" type="text" placeholder="Search ?" /></form>

include Style

 <style> 
input[type=text] {
 width: 130px;
 box-sizing: border-box;
 border: 2px solid #ccc;
 border-radius: 4px;
 font-size: 16px;
 background-color: white;
 background-image: url('searchicon.png');
 background-position: 10px 10px; 
 background-repeat: no-repeat;
 padding: 12px 20px 12px 40px;
 -webkit-transition: width 0.4s ease-in-out;
 transition: width 0.4s ease-in-out;
 margin: 0 0 0 auto;
float:right;
}
#input:focus {
 width: 100%;
}
input[type=text]:focus {
 width: 100%;
}
</style>

See Demo

Right to left

Left to Right