CODEWITHSUNDEEP
css
user3113270
user3113270

Reputation: 27

CSS3 Animation not working on hover

I`m having trouble adding a simple fadein effect with css3 to the navigation menu. I'm not sure why it isn't working. I've tested on different browsers and I get the same outcome. Any tips on how to fix it?

ul#menu > li:hover > ul {
    display: block;
    -webkit-animation: fadein 0.25s;
    -moz-animation: fadein 0.25s;
    animation: fadein 0.25s;
}

Here`s a working fiddle: http://jsfiddle.net/greywarrior259/sk3a2cmk/

Upvotes: 0

Views: 115

Answers (1)

Devin
Devin

Reputation: 7720

first of all, fadein isn't an accepted transition timing function. Basically your code isn't working because it doesn't even exist. Read about transition types .

Then you need to have an initial state and an animated state. For example:

ul#menu > li{opacity:0.7; transition: all 2.5s ease-in-out }
ul#menu > li:hover {opacity:1}

Upvotes: 1

Related Questions