Übergang auf der Verbindung der 'Hover-off' nicht Animieren

Question

I

Css

.main-nav li a { 
position: relative; 
display: inline-block; 
padding: 12px 10px; 
} 

.main-nav li a:after { 
content: ""; 
position: absolute; 
display: inline-block; 
background-color: #d11e5d; 
margin: 0 auto; 
height: 3px; width: 0; 
bottom: 3px; left: 0; right: 0; 
} 

.main-nav li a:hover { color: #d11e5d; } 
.main-nav li a:hover:after { width: 80%; } 

/* other links */ .main-nav li a:hover, .main-nav li a:hover:after { 
transition: width 0.2s ease, color 0.35s ease, background-color 0.35s ease, border 0.35s ease; 
-webkit-transition: width 0.2s ease, color 0.35s ease, background-color 0.35s ease, border 0.35s ease; 
-moz-transition: width 0.2s ease, color 0.35s ease, background-color 0.35s ease, border 0.35s ease; 
-ms-transition: width 0.2s ease, color 0.35s ease, background-color 0.35s ease, border 0.35s ease; 
-o-transition: width 0.2s ease, color 0.35s ease, background-color 0.35s ease, border 0.35s ease; 
} 

html einen Knopf mit einem Übergang auf schweben haben (aus Bootstrap/Wordpress erzeugt)

<div class="main-nav"> 
    <ul class="menu"> 
     <li> 
     <a href="..."> ... </a> 

The nachdem das Element richtig animiert ist, aber nicht animiert (stoppt einfach abrupt)

Answer 1

Das Problem ist, dass yo Sie verwenden die transition-Eigenschaft in Ihrem :hover-Status.

ändern diese:

...other links... , .main-nav li a:hover, .main-nav li a:hover:after { 
transition: width 0.2s ease, color 0.35s ease, background-color 0.35s ease, border 0.35s ease; 
-webkit-transition: width 0.2s ease, color 0.35s ease, background-color 0.35s ease, border 0.35s ease; 
-moz-transition: width 0.2s ease, color 0.35s ease, background-color 0.35s ease, border 0.35s ease; 
-ms-transition: width 0.2s ease, color 0.35s ease, background-color 0.35s ease, border 0.35s ease; 
-o-transition: width 0.2s ease, color 0.35s ease, background-color 0.35s ease, border 0.35s ease; 
} 

Um dies:

...other links... , .main-nav li a, .main-nav li a:after { 
-webkit-transition: width 0.2s ease, color 0.35s ease, background-color 0.35s ease, border 0.35s ease; 
-moz-transition: width 0.2s ease, color 0.35s ease, background-color 0.35s ease, border 0.35s ease; 
-ms-transition: width 0.2s ease, color 0.35s ease, background-color 0.35s ease, border 0.35s ease; 
-o-transition: width 0.2s ease, color 0.35s ease, background-color 0.35s ease, border 0.35s ease; 
transition: width 0.2s ease, color 0.35s ease, background-color 0.35s ease, border 0.35s ease; 
} 

---

Wenn Sie sich fragen , was der Unterschied ist CSS Übergang Eigenschaft in schweben anstatt in seinen normalen Zustand zwischen der Anwendung, können Sie überprüfen this.

---

Hinweise:

• Achten Sie darauf, die Eigenschaft ohne Anbieter-Präfixe ist unter den Rest gegeben.

Answer 2

Ich sehe einige Probleme in der letzten CSS-Block:

...other links... , .main-nav li a:hover, .main-nav li a:hover:after { 
transition: width 0.2s ease, color 0.35s ease, background-color 0.35s ease, border 0.35s ease; 
-webkit-transition: width 0.2s ease, color 0.35s ease, background-color 0.35s ease, border 0.35s ease; 
-moz-transition: width 0.2s ease, color 0.35s ease, background-color 0.35s ease, border 0.35s ease; 
-ms-transition: width 0.2s ease, color 0.35s ease, background-color 0.35s ease, border 0.35s ease; 
-o-transition: width 0.2s ease, color 0.35s ease, background-color 0.35s ease, border 0.35s ease; 
} 

Als kleinere fix, ich darauf hinweisen, werden feststellen, dass der Verkäufer dem Präfix transition Eigenschaften sollten immer die „standardisierte“ CSS-Eigenschaft vorausgehen. Mit anderen Worten, bestellen Sie die nicht fixierte transition Art als letzte nach der für -webkit-, -moz-, -ms- und -o-. Siehe diese Antwort SO answer to prefix ordering.

Ich bemerke, dass Sie die .main-nav li a:hover:after CSS-Selektor enthalten. Wenn Sie das verwenden, um einen CSS-Übergang zu versuchen, wenn Sie den Mauszeiger nicht bewegen, funktioniert das nicht. Das :after Pseudo-Element ist nicht für diese Verwendung. Sie möchten vielmehr die Übergangsstile anwenden, die Sie unter .main-nav li a deklariert haben. Beachten Sie, dass das Pseudoelement :hover nicht enthalten ist. Das ist Absicht. Auf diese Weise sage ich "Ich möchte diese Eigenschaften (Breite, Hintergrundfarbe & Grenze) übergehen, wenn ich den Mauszeiger über das ausgewählte Element". Wenden Sie dann die verschiedenen CSS-Stile width, background-color und auf dem Element .main-nav li a:hover separat an. Dies sind die Eigenschaftsstile, die in übergeführt werden, sobald Sie den Mauszeiger über den Link bewegen. Wenn Sie den Mauszeiger über den Link bewegen, werden Sie feststellen, dass die Stile wie gewünscht übergehen.

Wenn Sie auch versuchen, einen sekundären Übergang anzuwenden, wenn Sie den Hyperlink verlassen, müssen Sie diese Stile separat für den .main-nav li a:hover Selektor anwenden.Außerdem würden Sie dann eine transition Eigenschaft auf dem .main-nav li a:hover Selektor deklarieren. Wie es jetzt aussieht, haben Sie den gleichen Übergang auf die .main-nav li a und .main-nav li a:hover Selektoren (was technisch in Ordnung ist, nur vielleicht nicht das, was Sie wollten). Sehen Sie diesen Beitrag Different Transitions for Hover On/Off

.main-nav li a { 
 
    position: relative; 
 
    display: inline-block; 
 
    width: 25%; 
 
    font: bold 3rem/2 Fantasy, Arial, sans-serif; 
 
    padding: 12px 10px; 
 
} 
 

 
/* .main-nav li a:after { 
 
    content: ""; 
 
    position: absolute; 
 
    display: inline-block; 
 
    background-color: #d11e5d; 
 
    margin: 0 auto; 
 
    height: 3px; width: 0; 
 
    bottom: 3px; left: 0; right: 0; 
 
} */ 
 

 
.main-nav li a:hover { 
 
    width: 50%; 
 
    color: #d11e5d; 
 
    background-color: Yellow; 
 
    font: lighter 5rem/3 cursive, serif; 
 
} 
 
.main-nav li a:hover:after { width: 80%; } 
 

 
/* ...other links */ 
 
.main-nav li a { 
 
    -webkit-transition: width 0.2s ease, color 0.35s ease, background-color 0.35s ease, border 0.35s ease; 
 
    -moz-transition: width 0.2s ease, color 0.35s ease, background-color 0.35s ease, border 0.35s ease; 
 
    -ms-transition: width 0.2s ease, color 0.35s ease, background-color 0.35s ease, border 0.35s ease; 
 
    -o-transition: width 0.2s ease, color 0.35s ease, background-color 0.35s ease, border 0.35s ease; 
 
    transition: width 0.2s ease, color 0.35s ease, background-color 0.35s ease, border 0.35s ease; 
 
} 
 

 
.main-nav li a:hover { 
 
    -webkit-transition: font 0.2s linear; 
 
    -moz-transition: font 0.2s linear; 
 
    -ms-transition: font 0.2s linear; 
 
    -o-transition:font 0.2s linear; 
 
    transition: font 0.2s linear; 
 
}

<!DOCTYPE> 
 
<html> 
 
<head> 
 
</head> 
 
<body> 
 
<div class="main-nav"> 
 
    <ul class="menu"> 
 
     <li> 
 
     <a href="..."> ... </a> 
 
     </li> 
 
    </ul> 
 
</div> 
 
</body> 
 
</html>

Last, ich gehe davon aus dem ...other links Text als Kommentar gedacht. Wenn dies der Fall ist, sollte dies entsprechend auskommentiert werden, /* Other links */, und möglicherweise Probleme verursachen.