miércoles, 20 de febrero de 2013

Crear animación con la propiedad transition de CSS3


La nueva versión de hojas de estilo CSS3 permite a través de la propiedad transition crear animaciones que hasta el momento tan sólo se podían hacer con flash o javascript.

transition interactua con las propiedades que se encuentran en un evento, por ejemplo :hover y que son admitidas por transition. Por ejemplo al modificar el ancho de un elemento al pasar el mouse sobre el mismo, con transition se puede aplicar un efecto de retardo -> transition: width 3s; <- esta sentencia retardaría 3 segundos el tiempo en que el elemento cambia de ancho al pasar el mouse sobre el elemento.

Esta propiedad no es compatible con Internet explorer, pero si es compatible con Firefox, Safari, Google Chrome y Opera.

transition: width 1s, height 1s, transform 1s;  -> Para todos los navegadores compatibles
-moz-transition:  width 1s, height 1s, -moz-transform 1s; -> Firefox
-webkit-transition: width 1s, height 1s, -webkit-transform 1s; -> Crhome y Safari
-o-transition: width 1s, height 1s, -o-transform 1s; -> Opera

Ejemplo de uso de la propiedad transition ...

width hover:
height hover:
Rotación



Pasa el ratón sobre mi