css3 animation/transition/transform: ¿Cómo hacer crecer la imagen?

Question

Quiero hacer que mi imagen crezca a 1500px de alto (y con suerte el ancho se volverá a cambiar automáticamente, si no, también podría configurarlo fácilmente)

Estaba usando jquery .animate() pero es simplemente demasiado picada para mi gusto ... sé que puedo utilizar el:

-webkit-transform: scale(2); 

Pero quiero que se puede ajustar a un tamaño específico .. no sólo el doble o el triple del tamaño de imagen.

¿Algún ayuda?

Gracias

Answer 1

Usted está buscando el propiedad webkit-transición para webkit. Eso le permite especificar dos reglas de CSS separadas (por ejemplo, dos clases) y luego el tipo de transición que se aplicará al cambiar esas reglas.

En este caso, puede simplemente definir las alturas de inicio y fin (lo hice en altura y anchura en el ejemplo a continuación), así como la definición de webkit-transición de la propiedad de las propiedades que desea la transición, y -webkit-transición-duración para la duración:

div { 
    height: 200px; 
    width: 200px; 
    -webkit-transition-property: height, width; 
    -webkit-transition-duration: 1s; 
    -moz-transition-property: height, width; 
    -moz-transition-duration: 1s; 
    transition-property: height, width; 
    transition-duration: 1s; 
    background: red; 
} 

div:hover { 
    width: 500px; 
    height: 500px; 
    -webkit-transition-property: height, width; 
    -webkit-transition-duration: 1s; 
    -moz-transition-property: height, width; 
    -moz-transition-duration: 1s; 
    transition-property: height, width; 
    transition-duration: 1s; 
    background: red; 
} 

Probado en Safari. El equipo de Safari también publicó un artículo bastante bueno en CSS Visual Effects.

Sin embargo, también recomendaría echarle un vistazo a jQuery, ya que las últimas novedades de CSS3 no serán totalmente compatibles con las versiones de IE.