El efecto de transición / desplazamiento de CSS3 no funciona en Firefox; un error de Firefox?

Question

Jun 10, 2011, 06:59 PM

El efecto de transición / desplazamiento de CSS3 no funciona en Firefox; un error de Firefox?

Estoy tratando de crear un efecto de mouse-over que deslice la capa superior hacia la izquierda y revele la capa inferior usando CSS3. El código funciona en Chrome pero no en Firefox ... ¿volví a hacer algo estúpido? ¡Gracias por tu ayuda

Edit: Debo haber hecho algo mal, porque incluso si omito el código de transición, no pasa nada cuando paso el mouse sobre "capas" en Firefox ...:

El código

<html>
  <div class="layers">
    <div class="over">content</div>
    <div class="under">content</div>
  </div>
</html>

El estilo

.layers {
  position: relative;   
  width: 200px;
  height: 50px;
  overflow: hidden;
}   

.over {
  width: 200px;
  height: 50px;
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 1;
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}   
.under {
  width: 200px;
  height: 50px;
  position: absolute;
  top: 0px;
  left: 0px;
}           

.layers:hover .over {
  left: -200px; 
}