検索ボックスでの遷移が機能しない

Question

フォーカスの際に検索ボックスの幅を広げようとしています。それは正常に動作しますが、移行は機能していません。誰かがその上にいくつかの光を入れてください、これらのコードで何が間違っています。それを理解できませんでした。

//css file 
// class name of div(.searchBox) 
.searchBox { 
    margin: 100px auto; 
    width: 300px; 
    height: 200px; 
    background-color: #ccc; 
    padding-left: 20px; 
    padding-top: 20px; 
    -webkit-transition: all 2s easy-in-out; 
    -moz-transition: all 2s easy-in-out; 
    transition: all 2s easy-in-out; 
} 

// class name of input box 
.search { 
    padding: 10px; 
    font-size: 1em; 
} 

/* 
input[type="search"]:focus { 
    width: 250px; 
    background-color: #ddd; 
} 
*/ 

.searchBox form .search:focus { 
    width: 250px; 
    background-color: #444; 
} 

（残念ながら遷移が動作していない）いくつかの変更後にこのようなコードを見に

Answer 1

.searchBox { 
 
    margin: 100px auto; 
 
    width: 300px; 
 
    height: 200px; 
 
    background-color: #ccc; 
 
    padding-left: 20px; 
 
    padding-top: 20px; 
 
} 
 
.search { 
 
    padding: 10px; 
 
    font-size: 1em; 
 
    width: 130px; 
 
    -webkit-transition: all 2s ease-in-out; 
 
    -moz-transition: all 2s ease-in-out; 
 
    transition: all 2s ease-in-out; 
 
} 
 
.searchBox .search:focus { 
 
    width: 250px; 
 
    background-color: #444; 
 
}

<div class="searchBox"> 
 
<input type="text" placeholder="search" class="search"> 
 
</div>