CSS3 fade in for sticky menu

Okay so what I’m trying to do should be pretty simple (I hope).

I am using a wordpress plugin for my menu and an extension to make it sticky. My menu isn’t at the top already, it is below another container, so it becomes sticky when the menu container reaches the top of the browser screen (as it should).

I have a menu item that is hidden when the menu is “not sticky” and then it becomes visible when it is “sticky.” Everything works perfectly, however now I want to add a fade in effect preferably only using CSS3 (for simplicity of integration). So the fade in effect should take place when the visibility become visible (see code below, but basically when the menu becomes sticky)

My custom class for the menu item is “.jrm-um-sticky-only”
Here is my code to achieve the appearing/disappearing menu item:

#megaMenu ul.megaMenu li.jrm-um-sticky-only{ 
display: block !important;
visibility: hidden !important;
opacity: 0 !important;
}

#megaMenu-sticky-wrapper #megaMenu.ubermenu-sticky li.jrm-um-sticky-only{ 
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}

I tried adding:
-webkit-transition: visibility 0.2s linear, opacity 0.2s linear;
-moz-transition: visibility 0.2s linear, opacity 0.2s linear;
-o-transition: visibility 0.2s linear, opacity 0.2s linear;

to the last selector above (where the opacity is 1), but it didn’t work. I also tried setting opacity to 0 along with the above transition code but no avail.

I’m a newbie so sorry if there are errors in my approach here. (not sure if I need the opacity at 0 if the visibility is hidden???)

Thanks!!!!