How to Fade a Div Without JavaScript

As a programmer I usually go with JQuery solutions when looking for fancy transition effects on the sites that I develop as it’s more familiar ground but while redesigning my own site I decided to try out CSS3’s transition property to make my menu fade in and out. I ran into an issue however and I wasn’t able to readily find much information about it so I decided to  make a post about my solution.

The issue that I ran into is that the transition effect does not work with display, but I also discovered that changing the display property at all actually breaks all of your transition effects. I wound up using visibility: hidden and visibility: visible in order to hide and show my divs without breaking my transitions. Keep in mind that CSS3 transitions still do not work with Internet Explorer so unfortunately you will not be able to create the animations in IE using purely CSS. Some example code is below:

#navigation-block ul li ul {
	float: right;
	text-align: left;
	padding: 18px 10px 18px 10px;
	background-color: white;
	position: absolute;
	z-index: 88888;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	box-shadow: 1px 1px 5px #BBB;
	-moz-box-shadow: 1px 1px 5px #bbb;
	-webkit-box-shadow: 1px 1px 5px #BBB;
	top: -8px;
	left: 160px;
	visibility: hidden;
	opacity:0;
	transition: opacity .5s;
	-moz-transition: opacity .5s; /* Firefox 4 */
	-webkit-transition: opacity .5s; /* Safari and Chrome */
	-o-transition: opacity .5s; /* Opera */
}

#navigation-block ul li ul li ul{
	position:absolute;
	left:10px;
	top:-8px;
}

#navigation-block ul li:hover ul.sub-menu {
	visibility: visible;
	opacity: 1;
	transition: opacity .5s;
	-moz-transition: opacity .5s; /* Firefox 4 */
	-webkit-transition: opacity .5s; /* Safari and Chrome */
	-o-transition: opacity .5s; /* Opera */
}

#navigation-block ul li:hover ul.sub-menu li ul.sub-menu {
	visibility: hidden;
	opacity: 0;
	transition: opacity .5s;
	-moz-transition: opacity .5s; /* Firefox 4 */
	-webkit-transition: opacity .5s; /* Safari and Chrome */
	-o-transition: opacity .5s; /* Opera */
}

#navigation-block ul li ul.sub-menu li:hover ul.sub-menu {
	visibility: visible;
	opacity: 1;
	transition: opacity .5s;
	-moz-transition: opacity .5s; /* Firefox 4 */
	-webkit-transition: opacity .5s; /* Safari and Chrome */
	-o-transition: opacity .5s; /* Opera */
}