Animacion sprite CSS3

[dooplanillo]

Buenas a todos, estoy intentando hacer una animación como la de la página:
http://www.8020studio.com
Pero no doy exactamente con la clave, de hecho se anima la parte del título (que pasa del gris original a uno algo más oscuro) pero no consigo que se anime el sprite de la imagen en b&N a color. Creo que solo utiliza CSS, este sería el código:

HTML:

Código:

<ul id="work-list">
     <li id="work-list-skype">
        <a href="#skype" linkindex="3">
        <span class="project-name">Skype</span>
        <span class="poject-extra"></span>
        </a>
      </li>
</ul>

CSS:

Código:

a:link, a:visited {

	text-decoration: none;
	-webkit-transition: color 0.2s ease-in-out;
	-moz-transition: color 0.2s ease-in-out;
	-o-transition: color 0.2s ease-in-out;
	transition: color 0.2s ease-in-out;
}




/* --------------------------------------------------------------------------
	=work list
--------------------------------------------------------------------------- */

#work-list {
	height: 1007px;
	list-style: none;
	line-height: 0;
	margin: 30px auto 0;
	position: relative;
	text-align: left;
	width: 915px;
}

#work-list li {
	position: absolute;
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}

#work-list-skype {
	left: 0;
	top: 0;
}

#work-list a {
	color: #fff;
	display: block;
	font: 12px/13px 'myriad-pro-1', 'myriad-pro-2', Helvetica, Arial, sans-serif;
	font-weight: 100;
	height: 233px;
	text-decoration: none;
	text-transform: uppercase;
	position: relative;
	width: 295px;
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}
#work-list-skype, #work-list-skype a {
	background: #444750 url(../images/borrar/proj-thumb-skype.jpg) no-repeat 0 0;
}

#work-list a:hover {
	background-color: #323437;
}

#work-list-skype a,
#work-list-sony a,
#work-list-voda360web a {
	height: 511px;
}

#work-list span.project-name {
	bottom: 0;
	display: block;
	left: 0;
	line-height: 20px;
	padding: 0 0 15px 20px;
	position: absolute;
	width: 275px;
}

#work-list span.project-extra {
	display: block;
	height: 184px;
	left: 0;
	position: absolute;
	top: 0;
	width: 295px;
}

#work-list-skype span.project-extra,
#work-list-sony span.project-extra,
#work-list-voda360web span.project-extra {
	height: 462px;
}

#work-list li a span.project-extra {
	opacity: 0;
	z-index: 20;
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}

#work-list a:hover span.project-extra {
	opacity: 1;
}


#work-list-skype a span.project-extra, #work-list-skype a:hover span.project-extra {
	background: url(../images/borrar/proj-thumb-skype.jpg) no-repeat scroll -295px 0 transparent;
}

Alguna idea de por qué la imagen no se anima y el fondo del titulo si?

Muchas gracias a todos de antemano.

[dooplanillo]

O un ejemplo claro de como podría hacerse???

[kseso?]

No hay animaciones css.
Yo lo que veo es un cambio de imagen del background al hover con la técnica del sprite:

Código HTML:

<li id="work-list-better-place"><a href="#better-place"><span class="project-name">Better Place Vehicle Dashboard</span><span class="project-extra"></span></a></li>
 

y el css:

Código CSS:

#work-list-better-place a span.project-extra, #work-list-better-place a:hover span.project-extra {
    background: url(../img/proj-thumb-better-place.jpg) no-repeat -295px 0;
}
 

Y la imagen utilizada la puede ver en http://www.8020studio.com/img/proj-t...tter-place.jpg

[dooplanillo]

Buenas Qseso, no se con qué navegador estás viendo la web, pero con chrome, safari y firefox en su versión 4, te aseguro que hay animación del blanco y negro al color.

En cualquier caso he dado con la solución, la animación con la parte del título de la imagen (la que cambia de gris a gris más oscuro) está hecha íntegramente en css pero la misma animación del sprite de imagen lleva asociados varios archivos JS.

Gracias de todas formas Qseso por tu respuesta.

[kseso?]

Sí, tiene razón, hay una pequeña transición en las imágenes, pero tan breve que unida a los tonos de las imágenes no la había advertido:

Código CSS:

#work-list a {
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
 

Si se fija, verá que utiliza la forma acortada de la declaración, y que el valor 0.2s se corresponde con la propiedad transition-duration.

[Naahuel]

El problema está en que has puesto:

<span class="poject-extra"></span>

En lugar de:

<span class="project-extra"></span>