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>

鼠标悬停时，它会平滑地向左移动，但当鼠标离开时，它会快速向右移动。（我期望顺利）。

演示

Answer 1

因此，过渡发生在悬停时，而不是关闭时。因此，您需要在没有悬停状态的元素上设置过渡。

例如：为您的演示添加

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