How to create an animated search field?

A search field is used to search any data on website. A search box should be attractive because most of the uses use search box. Animated search box can be made by css easily.

HTML

<form class="myForm">
     <input type="text" name="search" placeholder="Search..">
</form>

CSS

.myForm input[type=text] {
  width: 130px;
  -webkit-transition: width 0.4s ease-in-out;
  transition: width 0.4s ease-in-out;
}

/* When the input field gets focus, change its width to 100% */
.myForm input[type=text]:focus {
  width: 100%;
}