I've been doing my homework and it appears you can't use the CSS transition effect where you're using display:none;
and display:inline;
and so on.
I'm wanting to add a fade in and out on hover to my CSS dropdown menu to make it look cleaner. This isn't possible when using the display element as I've discovered.
I tried removing display
from my CSS but when I do this the element is there (despite not being visible) and fades in when you hover over it. I read a suggestion to add "pointer-events:none;" to this, which isn't cross browser compatible. It also causes the fading element to flicker if you run your mouse over it again.
I also used a CSS keyframes animation suggestion to fade in whilst using the display element, but couldn't get this to fade out when the mouse leaves. :(
I know this is possible because I've seen it on many websites but I just can't get it working right for mine.
Here's my code:
I've written your code in jsfiddle.net
this does work when the mouse moves over it, you can use the same concept to change the opacity
from {opacity:1;}
to {opacity:0;}
to hide the menu. However this will make it transparent any thing behind would be visible but not clickable. I've not tried what would happen if you add the display:none to the end animation frame.