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;
}

Answer 2

悬停时的转换不会影响正常状态

li.searchbar a.searchbar-text{
	transition: opacity .9s, margin-left .5s, margin-right .5s;
	-webkit-transition: opacity .9s, margin-left .5s, margin-right .5s;
}
li.searchbar a.searchbar-text:hover {
	color: red !important;
	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 3

首先，转换设置必须在CSS中才能处于正常状态。其次，对于每个要转换的属性，您需要在两个规则中进行设置，在这两个规则之间应进行转换。第三，没有设置的转换（在你的情况下不透明度和margin-right）没有效果。

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>

Answer 4

简单的解决方法是简单地向原始元素添加相同的过渡（以及元素的悬停状态）。

.effect {
border: none;
margin: 0 auto;
  -webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}

.effect:hover {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}

CSS：悬停和离开之间的平滑过渡

4 个答案: