CSS：滑らかなホバーの間の遷移と

Question

を残すこれは私のhtmlコードです：マウスホバーで

li.searchbar a.searchbar-text:hover { 
 
    color: red !important; 
 
    margin-left: -10px; 
 
    transition: opacity .9s, margin-left .5s, margin-right .5s; 
 
    -webkit-transition: opacity .9s, margin-left .5s, margin-right .5s; 
 
}

<li class="col-sm-5 searchbar"> 
 
    <a class="text-left"><i class="fa fa-search" aria-hidden="true"></i></a> 
 
    <a class="searchbar-text"> 
 
    <span class="first-seach-text">Search France</span> 
 
    <span class="second-seach-text">and beyond</span> 
 
    </a> 
 
</li>

、それがスムーズに左に移動しますが、マウスが離れたとき、それは背面に移動します（私はスムーズに期待しています）。

demo

Answer 1

ホバー上の遷移が通常の状態に

li.searchbar a.searchbar-text{ 
 
\t transition: opacity .9s, margin-left .5s, margin-right .5s; 
 
\t -webkit-transition: opacity .9s, margin-left .5s, margin-right .5s; 
 
} 
 
li.searchbar a.searchbar-text:hover { 
 
\t color: red !important; 
 
\t margin-left:-10px; 
 
}

  <li class="col-sm-5 searchbar"><a class="text-left"><i class="fa fa-search" aria-hidden="true"></i></a><a class="searchbar-text"><span class="first-seach-text">Search France</span><span class="second-seach-text">and beyond</span></a></li>  

Answer 2

には影響しませんので、移行はホバーではなく、オフに行われます。したがって、ホバー状態のない要素のトランジションを設定する必要があります。例えば

：あなたのデモは

li.searchbar a.searchbar-text { 
    transition:all .5s ease; 
} 

Answer 3

ファーストを追加するために、トランジションの設定は通常の状態のためのCSSでなければなりません。第2に、各遷移予定プロパティに対して、の設定と、その間で遷移が行われるべきのルールが必要です。そして第三に、設定されていないトランジション（不透明度とマージン - あなたのケースでは右）は効果がありません。

li.searchbar a.searchbar-text { 
 
    color: initial; 
 
    margin-left: 0px; 
 
    transition: color .9s, margin-left .5s; 
 
    -webkit-transition: color .9s, margin-left .5s; 
 
} 
 
li.searchbar a.searchbar-text:hover { 
 
    color: red; 
 
    margin-left:-10px; 
 
}

<li class="col-sm-5 searchbar"> 
 
     <a class="text-left"><i class="fa fa-search" aria-hidden="true"></i></a> 
 
     <a class="searchbar-text"> 
 
     <span class="first-seach-text">Search France</span> 
 
     <span class="second-seach-text">and beyond</span> 
 
     </a> 
 
    </li>