webkit-transición de "parte superior" y propiedades "fondo"

que me gustaría hacer una animación css donde un div (centrada en una pantalla usando superior y inferiores propiedades) se expande mediante el establecimiento de superior y abajo a 20px.webkit-transición de "parte superior" y propiedades "fondo"

¿Es posible? Cuando trato de hacer que suceda con: no se realiza

-webkit-transition-property: top, bottom; 
-webkit-transition-duration: 0.5s;

animación. ¿Estoy haciendo algo mal, o se supone que no funciona con estas propiedades?

P.S. Estoy haciendo esto por una aplicación de escritorio de titanio, por lo que sólo importa webkit ...

Fuente

2010-06-16 zorglub76

¿Podemos ver un código más? Tal vez estás asignando el CSS al selector equivocado. – Kyle

Lo siento, mi error! Supervisé que la primera clase establece las propiedades superior e inferior en%, y la segunda en px ... Con las mismas medidas funciona bien ... – zorglub76

Tenía el mismo problema. En mi caso, el primer estado no tenía ninguna regla superior y el segundo estado tenía la regla superior. Agregar top: 0px al primer estado resolvió el problema. –

Aquí es un ejemplo de código que funciona en Safari 5:

#test{ 
 
    background:#3F3; 
 
    position: absolute; 
 
    top:50px; 
 
    bottom:50px; 
 
    width:200px; 
 
    -webkit-transition-property: top, bottom; 
 
    -webkit-transition-duration: 0.5s; 
 
} 
 
#test:hover { 
 
    top:100px; 
 
    bottom:100px; 
 
}

<div id="test">&nbsp;</div>

Fuente

2010-06-16 13:53:05

Es posible que desee agregar una transición de suavizado elástico de CSS http://stackoverflow.com/questions/23462515/elastic-easing-in-css3-best-approach –

<!DOCTYPE html> 
<html> 
<head> 
    <title>Page Title</title> 
    <style type="text/css" media="screen"> 
     #test { 
      background:#3F3; 
      position: absolute; 
      top:50px; 
      bottom:50px; 
      width:200px; 
      -webkit-transition-property: top, bottom; 
      -webkit-transition-duration: 0.5s; 
     } 
     #test:hover { 
      top:100px; 
      bottom:100px; 
     } 
    </style> 
</head> 
<body> 
    <div id="test">Ganesh 
    </div> 
</body> 
</html>

Fuente

2010-09-25 04:59:01 user457958

Aquí es algún código que funciona en Chrome v31:

-webkit-transition: top 0.5s, bottom 0.5s;

Fuente

2013-12-11 20:51:34 feco

webkit-transición de "parte superior" y propiedades "fondo"

Respuesta

Cuestiones relacionadas