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
|
No hay comentarios:
Publicar un comentario