Aplicar transiciones

Regresar al índice

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!

Regresar al índice

Twittear