Help needed with creating a fade-in effect for sprite buttons in my navigation menu. I want the timing to match the icons at the bottom of my website, but I'm struggling to apply it. Currently, the navigation buttons change instantly or have a slide effect, which is not my desired outcome. I want the effect only in CSS. Can anyone provide assistance?
Website: www.thestripedphoenix.com
#navigation {
position: relative;
margin-top: 10px;
margin-left: 800px;
max-width: 600px;
min-width: 520px;
height: 50px;
float: right;
overflow: hidden;
}
#nav {
position: relative;
right: 0.5em;
height: 49px;
line-height: 3em;
border: 3px solid #232323;
}
#nav dl {
margin: 0;
padding: 0;
}
#nav dt {
float: left;
}
#nav dt a {
display: block;
height: 0px !important;
padding: 100px 0 0 0;
overflow: hidden;
background-repeat: no-repeat;
}
#nav dt a:hover {
background: 0 -50px;
}
#nav dt a:active {
background-position: 0 -50px;
}
#nav dt a:visited {
background-position: 0 -50px;
}
#nav dt#start, #nav dt#start a {
width: 100px;
background-image: url("http://www.thestripedphoenix.com/images/intro.gif");
}
#nav dt#about, #nav dt#about a {
width: 100px;
background-image: url("http://www.thestripedphoenix.com/images/about.gif");
}
#nav dt#skills, #nav dt#skills a {
width: 100px;
background-image: url("http://www.thestripedphoenix.com/images/skills.gif");
}
#nav dt#portfolio, #nav dt#portfolio a {
width: 100px;
background-image: url("http://www.thestripedphoenix.com/images/portfolio.gif");
}
#nav dt#message, #nav dt#message a {
width: 100px;
background-image: url("http://www.thestripedphoenix.com/images/contact.gif");
}<div id="navigation">
<nav id="nav">
<dl>
<dt id="start"><a href="#intro">intro</a><span></span></dt>
<dt id="about"><a href="#one">about</a></dt>
<dt id="skills"><a href="#two">skills</a></dt>
<dt id="portfolio"><a href="#work">portfolio</a></dt>
<dt id="message"><a href="#contact">contact</a></dt>
</dl>
</nav>
</div>