CSSの幅を変更することはできません

CSSの幅を変更する方法を見つけることができませんでした。実際にはうまくいきますが、アニメーションなしでautoから100%にジャンプするだけです。CSSの幅を変更することはできません

ここに私のCSSです：ここで

div#searchbar { 
    padding: 10px; 
    background-color: #404040; 
} 

.searchbar input { 
    box-sizing: border-box; 
    padding: 10px; 
    font-family: Open Sans; 
    font-size: 16px; 
    color: #404040; 
    outline: none; 
    background-color: #909090; 
    padding-left: 40px; 
    -webkit-transition: width 0.4s ease-in-out; 
    transition: width 0.4s ease-in-out; 
} 

.searchbar input:hover { 
    width: 100%; 
}

はHTMLです：ある

image ：私を悩ま一つのこともあります

<html> 
    <head> 
     <title> 
      Test 
     </title> 
     <meta charset="utf-8"> 
     <link rel="stylesheet" type="text/css" href="styles/global.css" /> 
     <meta name="viewport" content="width=device-width, initial-scale: 1.0, user-scalabe=0" /> 
     <script src="scripts/jquery-1.12.2.js"></script> 
    </head> 

    <body> 
     <div class="searchbar"> 
      <form name="Search"> 
       <input type="text" name="Search" value="Pesquisar..."> 
      </form> 
     </div> 
    </body>   
</html>

、あなたは下の画像で見ることができます白いボーダーが時々表示されます。

すべての機能を動作させるにはどうすればよいですか？

出典

2016-04-03 Guilherme Schneider

あなたは、ポーリーを自動 –

にまたはから移行ありがとうございことはできませんが、今では正常に動作します！ –