Cita:
Iniciado por pzin 
Las transiciones de CSS no funcionan en IE9. Usa transition a secas para IE10 y Firefox.
Aquí tienes una tabla de compatibilidad: [url]http://caniuse.com/css-transitions[/url]
Y bienvenido al foro.
Muchas gracias a todos por tan rápida contestación. El caso es que ya había probado utilizar transition, colocado en la hoja css justo después de -webkit-transition: top .7s ease-in-out; quedando de esta manera;
#block1 {
width: 274px;
height: 214px;
position: absolute;
display: block;
background: url("../images/picture1.jpg") no-repeat;
-webkit-transition: top .7s ease-in-out;
transition-property:height;
transition-duration:1s;
transition-timing-function:linear;
transition-delay:0s;
}
Lo primero hay alguna cosa rara, ya que transition no me deja usar top, como uso con webkit-transition, he de poner height.
Podéis probar que esto funciona en la siguiente página:
http://www.w3schools.com/css3/tryit.asp?filename=trycss3_transition4
pegando el siguiente código:
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:200px;
background:red;
transition-property:height;
transition-duration:1s;
transition-timing-function:linear;
transition-delay:0s;
}
div:hover
{
height:100px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
El efecto se produce, pero no es exactamente como yo lo tengo en mi página. Yo declaro una clase en la página html, a la que asigno el id block, como sigue:
<div id="montage-wrap">
<div class="montage-block"> <span id="block1"></span>
<div class="thumb_content">
<p style="font-size: 22px;">socios fundadores </p>
<p><a href="nosotros.html">Víctor García Castro</a></p>
<p><a href="nosotros.html">Jesús Carrero Riolobos</a></p>
<p><a href="nosotros.html">Pedro Fernández Ramírez</a></p>
</div>
</div>
</div>
Despues en la hoja de estilo css, el id block tiene asignado una imagen que es a la que le aplico el efecto de transition:
.montage-block:hover #block1 {
top: -215px;
}
el id block es que el tiene el efecto como digo
#block1 {
width: 274px;
height: 214px;
position: absolute;
display: block;
background: url("../images/picture1.jpg") no-repeat;
-webkit-transition: top .7s ease-in-out;
}
y mi pregunta es si puedo añadir el efecto para que funcione en firefox, opera y ie10, si modificar ni la hoja ni la forma en que la he configurado, simplemente añadiendo transition como decia antes.
Siento ser tan torpe, pero os comenté que estoy empezando, que en realidad esta es mi primera inclusión en la programación web.
Alguna idea......