CODEWITHSUNDEEP
htmlcsshovertransition
jan777
jan777

Reputation: 39

CSS transition not working as intended

When I hover the link, the transition happens. However, if I put the link off the hover state, the transition fades off immediately. How can I fix this preferably without changing the html?

Thank you for your help.

http://codepen.io/anon/pen/mKLIp

Upvotes: 0

Views: 94

Answers (4)

Timmah
Timmah

Reputation: 1335

That's because your transitions are being applied to the pseudo-selector, not the element you are trying to animate.

This should do the trick:

nav a {
    -o-transition: .5s ease-in-out; 
    -ms-transition: .5s ease-in-out;
    -moz-transition:.5s ease-in-out;
    -webkit-transition:.5s ease-in-out;
    transition: .5s ease-in-out; 
}

When an element has transitions applied, any changes to its properties will be reflected as an animation. You trigger these with state changes such as :hover, :active etc

Check it out here

Upvotes: 2

Ashish Goyal
Ashish Goyal

Reputation: 1

The transition property tells on which property to apply the transition on and its duration. If you add this in :hover state, the transition will be enabled only on hover state. You want to keep the transition all the time but change the background on hover.

Upvotes: 0

Idris
Idris

Reputation: 1005

This should work. http://codepen.io/anon/pen/mKLIp

nav a:link, a:visited {
color: #FFF;
display: inline-block;
padding: 1em;
height: 1.5em;
text-decoration: none;
-o-transition: .5s ease-in-out; 
-ms-transition: .5s ease-in-out;
-moz-transition:.5s ease-in-out;
-webkit-transition:.5s ease-in-out;
transition: .5s ease-in-out; 

}

nav a:hover, nav a:active, nav .active a:hover,
 nav .active a:active {
text-shadow: none;
background-color: #CF5C3F; 
}

Upvotes: 0

dtyler
dtyler

Reputation: 1428

Put the transition css in the normal state of the menu.

Namely, change your css to:

nav a:link, a:visited {
color: #FFF;
display: inline-block;
padding: 1em;
height: 1.5em;
text-decoration: none;
-o-transition: .5s ease-in-out; 
-ms-transition: .5s ease-in-out;
-moz-transition:.5s ease-in-out;
-webkit-transition:.5s ease-in-out;
transition: .5s ease-in-out; 
}

nav a:hover, nav a:active, nav .active a:hover, nav .active a:active {
text-shadow: none;
background-color: #CF5C3F; /* fix out transition issue */
}

Upvotes: 2

Related Questions