Css3 Transitions problem

I have been playing with the new CSS3 transitions but I am not sure if what I am trying to do will work, or if I am not doing it correctly. I currently have a list item where top line is black and bottom is white. I am trying to essentially have the colors fade and reverse so the top is white and bottom is black. I created two classes and assigned them to each line. However, the top line fades to white perfectly on hover, but the bottom is black and larger even without hovering. Can I only apply one transition per list item? Or am I just not doing it correctly?
Here is my code…


.bannerR ul li:hover span.b2w{
color:#fff;
   -webkit-transition:color 1s ease-in;
   -moz-transition:color 1s ease-in;
   -o-transition:color 1s ease-in;
   transition:color 1s ease-in;

}	

.bannerR ul li:hover span.w2b{
	color:#000;
   -webkit-transition:color 1s ease-in;
   -moz-transition:color 1s ease-in;
   -o-transition:color 1s ease-in;
   transition:color 1s ease-in;
}	



<li><a href="sharedhosting.php" style="text-decoration: none;" onmouseover="this.style.textDecoration = 'none'"><span class="b2w">Flexible, Fast Web Hosting</span><br />
            <span class="w2b">Designed for peace of mind.</span></a></li>

The site is http://www.hostingwebsbest.com/index.php and its the right hand side. Any thoughts?

In the first example, the bottom line is already black, so it’s can’t fade to black. If you first color it white, your code works fine:

.w2b {color:white;}

It’s somewhat counter-intuitive but you define the transitions on the initial state before the change to a property that you want transitioned i.e. without the :hover.

If you’re going to be doing lots with transitions I’d suggest using Compass.


.bannerR ul li span.b2w{
  color:#000;
  @include transition(color 1s ease-in); 
  &:hover {
    color: #fff;
  }
}

which compiles to


.bannerR ul li span.b2w {
  color: #000;
  -webkit-transition: color 1s ease-in;
  -moz-transition: color 1s ease-in;
  -ms-transition: color 1s ease-in;
  -o-transition: color 1s ease-in;
  transition: color 1s ease-in;
}
/* line 12, ../sass/screen.scss */
.bannerR ul li span.b2w:hover {
  color: #fff;
}

Awesome. I was actually trying to figure this stuff out of the Sitepoint book, but theres so much new stuff! Compass does look really useful, thanks for the that.
But when I used that code, the top still works, but the bottom doesn’t. What I was trying to do was have the top go from black to white, and the bottom from white to black.
@Ralph - Thats why I had the bottom color black originally before Mark showed me I declared it wrong. Can I not transition two seperate "pieces’ of a list item?

HI,

Try something like this:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
ul {
	background:#ccc;
	list-style:none;
	margin:0;
	width:200px;
	padding:20px
}
ul li a{text-decoration:none;}
ul li span {
	color: #000;
	-webkit-transition: color 1s ease-in;
	-moz-transition: color 1s ease-in;
	-ms-transition: color 1s ease-in;
	-o-transition: color 1s ease-in;
	transition: color 1s ease-in;
}
ul li span.b2w { color: #000; }
ul li span.w2b { color: #fff; }
ul li a:hover span.b2w { color: #fff; }
ul li a:hover span.w2b { color: #000; }
</style>
</head>

<body>
<ul>
		<li><a href="sharedhosting.php"><span class="b2w">Flexible, Fast Web Hosting</span><br />
				<span class="w2b">Designed for peace of mind.</span></a></li>
</ul>
</body>
</html>


When you hove the anchor you swap the colours of the spans inside rather than hovering the span.

That worked! Thank you. And thanks for the explanation! I didn’t see it and was about to ask…lol.