CSS3 animaciones Webkit CSS: cambiar el tamaño de un rectángulo div

Question

Estoy tratando de entender si es posible replicar el método animate en jQuery, utilizando animaciones webkit

Suponiendo que tengo un div 50 px por 50 px usando jQuery que pueda fácilmente el tamaño y la animan usando:

$('#mybox').animate({'width':'100px','height':'70px'}, 300) 

// so from 50x50 it animates to 100x70 
// the values 100 and 70 should ba dynamically 
// input so i can create a function (Width,Height) to alter my box 

me pregunto cómo hacer lo mismo, si es posible el uso de CSS animaciones WebKit

PS. Yo no los necesita para trabajar en Firefox, es sólo un proyecto para un Safari/Chrome

Answer 1

Puede utilizar este CSS:

div.mybox { 
    width: 50px; 
    height: 50px; 
    background-color: red; 
    -webkit-transition:width 300ms ease-in-out, height 300ms ease-in-out; 
    -moz-transition:width 300ms ease-in-out, height 300ms ease-in-out; 
    -o-transition:width 300ms ease-in-out, height 300ms ease-in-out; 
    transition:width 300ms ease-in-out, height 300ms ease-in-out; 
} 

A continuación, puede actualizar las propiedades de anchura y altura usando jQuery:

$(document).ready(function() { 
    $("div.mybox").css({"width": "100px", "height": "70px"}); 
}); 

Por lo tanto, si el navegador lo admite, se lo animará. Pero, por supuesto, considere poner estas propiedades en una clase separada y agregar esta clase al elemento. Puede usar la función .addClass(), así.

$(document).ready(function() { 
    $("div.mybox").addClass("enlarged"); 
}); 

O, por ejemplo, se puede usar con la función toggleClass y el evento click (la caja se ampliará cuando se hace clic, y va a cambiar con el tamaño normal cuando vuelva a hacer clic).

$(document).ready(function() { 
    $("div.mybox").click(function() { 
     $(this).toggleClass("enlarged"); 
    }); 
}); 

En este caso, las propiedades se deben definir en la clase CSS.

div.mybox.enlarged { 
    width: 100px; 
    height: 70px; 
} 

Además, si se desea que la animación que suceda el ratón por encima, entonces todo lo que hay que añadir es la siguiente:

div.mybox:hover { 
    width: 100px; 
    height: 70px; 
} 

animaciones de este tipo puede llevarse a cabo sin el uso de JS en absoluto.

Además, debería leer acerca de CSS3 transition attribute y las funciones de transformación (pueden usarse en muchos casos). Se describen here.

Answer 2

@keyframes animationName { 
    0% {width: 50px; height:50px} 
    100% {width: 100px; height:70px} 
} 

echar un vistazo a esto: http://www.css3files.com/animation/

Answer 3

Puede usar animaciones CSS y transiciones con valores "dinámicas" mediante la aplicación de CSS como una hoja de estilo o estilo en línea como en este caso:

http://jsfiddle.net/4zD74/

Answer 4

CSS3 hará que esto sea muy fácil para usted! Agregará una transición, y puede cambiar las dimensiones con :hover. Aquí está la muestra div:

<div id="mydiv"> 
    <!-- Div content goes here --> 
</div> 

Por lo tanto, su div es "mydiv".El resto se hace en CSS3:

#mydiv { 
    width: 50px; 
    height: 50px; 
    background: #f34543; 
    -webkit-transition:width 300ms ease-in-out, height 300ms ease-in-out; 
    -moz-transition:width 300ms ease-in-out, height 300ms ease-in-out; 
    -o-transition:width 300ms ease-in-out, height 300ms ease-in-out; 
    transition:width 300ms ease-in-out, height 300ms ease-in-out; 
} 
#mydiv:hover { 
    width: 100px; 
    height: 70px; 
} 

jsFiddle: http://jsfiddle.net/dakoder/ZGHLM/

Eso es todo! Lo cambiará de tamaño de 50x50px a 100x70px. Probado en Chrome, pero no en Safari, todavía.