html - How to make an input resize slowly when focus using css3 -

I have fixed width input. What do I want when I focus on that, I want to slowly change using CSS or junkie. This is my code:

  & lt; Section class = "web designtops-workshop" & gt; & Lt; Form action = "" method = "" & gt; & Lt; Input type = "search" placeholder = "What are you looking for?" & Gt; & Lt; Button & gt; Search & lt; / Button & gt; & Lt; / Form & gt; & Lt; / Section & gt;   
 This is the CSS I am using.  
  Web designs-workshop input {background: #ddd; Width: 200px; } .webdesigntuts-workshop Input: Focus {background: #ddd; Width: 250px; Art color; }   
 But the problem is that the width varies so fast, I want to change it gradually.   
 
 
 You need to add an infection:  
  Web Designs- Workshop input {background: #ddd; Width: 200px; Infection: width .3s ease-in-out; -Widk-Infection: Width.3s ease-in-out; -MOZ-transition: width .3s ease-in-out; -M-Infection: width .3s ease-in-out; } .webdesigntuts-workshop Input: Focus {background: #ddd; Width: 250px; Art color; }   
 Adjust the time as you see fit.