domingo, 8 de junio de 2014

Aplicar transiciones



Es en cierta medida el "sueño" de todos los integradores web: crear "efectos" de transición gracias al CSS, sin un ápice de JavaScript y sin tener que pedir ayuda a un programador web. Pues bien, con CSS3 es posible, con el módulo Transition, aún en Working Draft el 19 de noviembre de 2013: http://www.w3.org/TR/css3-transitions/

Ahora es posible pasar de un valor CSS a otro, con una transición determinada, cuando se detecte un evento en un elemento. Y una vez que la transición haya terminado, el elemento recuperará sus parámetros CSS iniciales.

Una vez más, los prefijos propietarios de los navegadores serán necesarios.


1. Las transiciones

Para activar una transición, es necesario que se detecte un evento con, por ejemplo, una pseudo-clase: :hover, :active o :focus.

Deberá indicar qué parámetros desea utilizar con la propiedad transition-property.

A continuación deberá indicar la duración de la transición con la propiedad transition-duration.


2. Las propiedades CSS

Esta es la lista de propiedades CSS disponibles en el módulo Transition:


Nombre de la propiedad Tipo
background-color color
background-image only gradients
background-position percentage, length
border-bottom-color color
border-bottom-width length
border-color color
border-left-color color
border-left-width length
border-right-color color
border-right-width length
border-spacing length
border-top-color color
border-top-width length
border-width length
bottom length, percentage
color color
crop rectangle
font-size length, percentage
font-weight number
grid-* various
height length, percentage
left length, percentage
letter-spacing length
line-height number, length, percentage
margin-bottom length
margin-left length
margin-right length
margin-top length
max-height length, percentage
max-width length, percentage
min-height length, percentage
min-width length, percentage
opacity number
outline-color color
outline-offset integer
outline-width length
padding-bottom length
padding-left length
padding-right length
padding-top length
right length, percentage
text-indent length, percentage
text-shadow shadow
top length, percentage
vertical-align keywords, length, percentage
visibility visibility
width length, percentage
word-spacing length, percentage
z-index integer
zoom number

La propiedad transition-property admite además dos palabras clave predefinidas:

  • transition-property: none indica que ninguna propiedad está implicada en las transiciones. 
  • transition-property: all indica que todas las propiedades podrían ser utilizadas en las transiciones.

Espero haber ayudado en algo. Hasta la próxima oportunidad!








No hay comentarios:

Publicar un comentario en la entrada