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

Question

This is my html code:

 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>

With mouse hover, it moves to left smoothly, but when the mouse leaves, it moves back to right fast.(I expect smoothly).

demo

Answer 1

So the transition takes place on the hover but not on the off. So you need to set the transition on the element without the hover state.

for example: for your demo add

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

Answer 2

The transition on hover will not affect the normal state

 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

First, the transition settings have to be in the CSS for the normal state. Second, for each to-be-transitioned property you need settings in both rules between which the transition should be made. And third, transitions for which there is not setting (opacity and margin-right in your case) have no effect.

 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

The easy fix is to simply add the same transition to the original element (as well as the hover state of the element).

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

Answer 5

As Johannes said add the transition effect on the rule element and not on the hover state and in the hover state you need to be specific on the desire effects; if you want margint-right and opacity you need to specify the rule for those effects:

li.searchbar a.searchbar-text {
  transition: color .9s, opacity .9s, margin-left .5s, margin-right .5s;
}

li.searchbar a.searchbar-text:hover {
  color: red;
  margin-left: -10px;
  margin-right: 10px;
  opacity: .5;
}

In this way the transition will be implemented when the cursor hover-over the element and when the cursor goes away.