CODEWITHSUNDEEP
htmlcsscss-transitions
Alex
Alex

Reputation: 2062

CSS transition fades out instantly

I know this is a common issue and i've read a lot about it and just cant implement the variety of solutions in my CSS code, please advice.

I have a simple ul and li elements, the fade in effect is working but the fade out dont. I know i need to put the transition code into the "normal" state of the ul li element, but it just wont work.

   #menu li a{
        color: white;
        text-decoration: none;
        font-family:arial;
        font-size: 14px;
        padding-right: 15px;
    }

    #menu ul li{
        display: inline;
    }

    ul{
        list-style-type: none;
        margin:  0px;
        padding: 0px; 
    }

    #menu ul li a:hover {
        color: dodgerblue;
        -webkit-transition: color 0.3s linear 0s;
        -moz-transition:color 0.3s linear 0s;
        -ms-transition:color 0.3s linear 0s;
        -o-transition:color 0.3s linear 0s;
        transition:color 0.3s linear 0s;
    }

Upvotes: 1

Views: 1640

Answers (2)

Gildas.Tambo
Gildas.Tambo

Reputation: 22643

use prefixfree from lea verou add your code would then look like this :

#menu li a{
            color: white;
            text-decoration: none;
            font-family:arial;
            font-size: 14px;
            padding-right: 15px;
        }

        #menu ul li{
            display: inline;
        }

        ul{
            list-style-type: none;
            margin:  0px;
            padding: 0px; 
        }

        #menu ul li a:hover {
            color: dodgerblue;
        }
        #menu ul li a {
            transition:color 0.3s linear 0s;
        }

you ca get a cdn version here prefixfree

Upvotes: 0

Hashem Qolami
Hashem Qolami

Reputation: 99474

Simply put the transition property (and vendor prefixes) within the #menu li a selector itself, as follows:

#menu li a {
    color: white;
    text-decoration: none;
    font-family:arial;
    font-size: 14px;
    padding-right: 15px;

    -webkit-transition: color 0.3s linear 0s;
    -moz-transition:color 0.3s linear 0s;
    -ms-transition:color 0.3s linear 0s;
    -o-transition:color 0.3s linear 0s;
    transition:color 0.3s linear 0s;
}

#menu ul li a:hover { color: dodgerblue; }

WORKING DEMO.

Upvotes: 5

Related Questions