アニメーションの問題を修正するにはどうすればいいですか？css3

Question

スプレッドを100％幅にスムーズに移行して検索入力に影響を与えましたが、他のli要素もプッシュしていいアニメーションがありません。彼らは検索入力から離れていくだけです。

私のhtml：

<div class="navigation"> 
    <div class="col-lg-6 col-xs-12"> 
    <ul> 
     <li><a href="#" class="hover-effect">Home</a></li> 
     <li><a href="#" class="hover-effect">About</a></li> 
     <li><input type="search" name="search" placeholder="Search..."></li> 
     </ul> 
    </div> 
</div> 

マイCSS：

.navigation { 
    text-align: right 
} 

.navigation ul { 
    list-style: none; 
    margin-top: 22px; 
} 

.navigation li { 
    display: inline-block; 
    font-size: 20px; 
    padding-right: 12px; 
} 

.navigation li a { 
    color: #d3d5d7; 
    text-decoration: none; 
    transition: color 1s; 
} 

.navigation li a:hover { 
    color: #2980b9; 
} 
input[type=search] { 
    width: 130px; 
    box-sizing: border-box; 
    border: 2px solid #ccc; 
    border-radius: 4px; 
    font-size: 16px; 
    background-color: white; 
    background-image: url('../images/searchicon.png'); 
    background-position: 10px 14px; 
    background-repeat: no-repeat; 
    padding: 12px 20px 12px 40px; 
    -webkit-transition: width 0.6s; 
    transition: width 0.6s; 
} 

input[type=search]:focus { 
    width: 100%; 
} 

任意の提案この問題を解決するにはどのように？

はまた、私はcodepanを作った：codepan.io

Answer 1

それはあなたがあなたの<input>になりたい場所を一般的にされていない、<li>内にあるためです。 <ul>の外側に配置して浮動させるか、別の方法で配置することができます。これにより、コンテンツが正しくプッシュされます。

ここであなたのための簡単なフィドルを設定しましたが、これは少し原油ですが、表示される内容を示しています。 https://jsfiddle.net/176hxsuj/

あなたはしかし<li>でそれをしたいならば、代わりに<input>の<li>をアニメーション化。