CSS3 transition effect problem.

dskell88

New Member
I just got started in web design and currently building my very first website to start showcasing examples of my UI work. I already designed my wireframes for the 5 pages. Now I'm diving in to the HTML/CSS coding process. I been trying to get my navigation links on the top of my site do a smooth transition effect.

The transition property when hovering my cursor over the link doesn't fade to the color I want it to. When tested on dreamweaver, it instantly changes to the color what I want but doesn't give it the fading effect. However, when I test it on my mozilla browser, it doesn't do ANYTHING AT ALL. It changes the color of the text, but doesn't change the color of the box.

Here's what I wrote on my stylesheet. If anyone can help identify the problem and/or walk me through it, I would greatly appreciate it.


ul.menu li {

list-style: none;
float: right;
float: top;
margin-top: 0 px
height: 100px;
text-align: center;
background : -webkit-gradient(linear, left top, left bottom, from(rgb(33,40,41)), to(rgb(28,31,32)));
background : -moz-linear-gradient(top, rgb(28,47,64), rgb(17,30,41));

}

ul li a {
display: block;
padding: 0 20px;
color: #c6c7bb;
text-align: center;
text-decoration:inherit;
text-decoration: none;
font-style: inherit;
font-family:Arial, Helvetica, sans-serif;
font-weight: bold;
transition: width 2s;
-webkit-transition: width 2s; /* Safari */
line-height: 100px;
background : -webkit-gradient(linear, left top, left bottom, from(rgb(28,47,64)), to(rgb(17,30,41)));
background : -moz-linear-gradient(top, rgb(28,47,64), rgb(17,30,41));



}

ul li a:hover {
background: transparent none;
color: #FFF;
}

ul li.active a{
background: -webkit-gradient(radial, 50% 100%, 10, 50% 50%, 90, from(rgba(31,169,244,1)), to(rgba(0,28,78, 1)) );
background: -moz-radial-gradient(center 80px 45deg, circle cover, rgba(31,169,244,1) 0%, rgba(0,28,78, 1) 100%);

}


If I need to be more specific, please let me know. Not very experienced demonstrating my web design process :)
 

Edge

Member
Missing semi-colon after 'margin-top: 0 px' and change 'width' to 'background' I.E. 'transition: background 2s;'
 
Top