user3550879 user3550879 - 23 days ago 6
HTML Question

transition on link's 'hover-off' not animating

I have a button with a transition on hover

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 (generated from bootstrap/Wordpress)

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


The after element animates in properly, but doesn't animate out (just stops abruptly)

Answer

The problem is that you are using the transition property in your :hover state.

Change this:

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

To this:

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

If you're wondering what is the difference between applying CSS transition property in hover rather than in its normal state, you can check this.


Notes:

  • Always make sure the property without vendor prefixes is placed below the rest.