html - 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 {
  transition:all .5s ease;
}