Ejemplo de interfaz en "acordeón"

Regresar al índice

1. Objetivo

Vamos a crear un elemento de interfaz de tipo "acordeón". Este método permite insertar una gran cantidad de texto en una zona de visualización que el usuario podrá abrir haciendo clic en el título de dicha zona. Se trata de un elemento habitual (accordion) que podemos encontrar en multitud de frameworks JavaScript.

El siguiente ejemplo se inspira en gran medida del que propone el sitio web: http://www.paulrhayes.com/2009-06/accordion-using-only-css/

2. La estructura del "acordeón"

El elemento de tipo "acordeón" se encuentra dentro de una caja <div> con un ID. Cada una de sus zonas de visualización se encuentra también dentro de una caja <div> con un ID y utiliza una clase común. El encabezado de cada zona es un título h3. El texto se encuentra dentro de un párrafo p que utiliza una clase común y que se ha insertado dentro de una caja <div>.

<div id="accordion">

<div id="uno" class="section">

<h3><a href="#uno">Commodo augue</a></h3>

<div>

<p class="texto">Commodo augue...</p>

</div>

</div>

<div id="dos" class="section">

<h3><a href="#dos">Volutpat facilisi</a></h3>

<div>

<p class="texto">Volutpat facilisi...</p>

</div>

</div>

<div id="tres" class="section">

<h3><a href="#tres">Facilisi dolor</a></h3>

<div>

<p class="texto">Facilisi dolor...</p>

</div>

</div>

</div>

3. El diseño del "acordeón"

El diseño del elemento de tipo "acordeón" utiliza los estilos habituales, así que no presenta ninguna dificultad.

body {

font: .8em Verdana, Arial, Helvetica, Geneva, sans-serif;

}

#accordion {

width: 500px;

margin: 0 auto;

padding: 5px;

border: 1px solid #333;

background-color: lightsteelblue;

}

h3 {

margin: 0;

padding: 5px;

background-color: #eee;;

}

h3 a {

text-decoration: none;

color: grey

}

#accordion.section {

background-color: white;

border-bottom: 1px solid #333;

}

p.texto {

margin: 0;

padding: 3px;

}

4. El diseño de las zonas de visualización desplegables

Cada zona de visualización es una caja div que ha sido insertada justo detrás de un título h3 del "acordeón" (#accordion).

En un principio, la altura establecida es de 0 (height: 0), para que la caja no sea visible. Además, para evitar problemas de visualización, se ha ocultado el desbordamiento (overflow: hidden).

Ahora vamos a aplicarle una transición a la altura del elemento (transition: height 0.3s ease-in).

#accordion h3 + div {

height: 0;

overflow: hidden;

-webkit-transition: height 0.3s ease-in;

-moz-transition: height 0.3s ease-in;

-o-transition: height 0.3s ease-in;

transition: height 0.3s ease-in;

}

Esta transición se generará cuando se use el vínculo del título h3. Usaremos entonces la pseudo-clase :target. La transición se aplicará a la caja div que se encuentre inmediatamente detrás de dicho h3. La transición le aplicará a la caja una altura de 100 píxeles (height: 100px) e insertará la barra de desplazamiento cuando sea necesario (overflow: auto).

#accordion :target h3 + div {

height: 100px;

overflow: auto;

}

5. La visualización

Inicialmente, el menú de tipo "acordeón" se mostrará cerrado:

Si hace clic en uno de los encabezados, podrá acceder a su contenido:

Si el contenido es mayor a la capacidad de la caja <div>, la barra de desplazamiento será insertada automáticamente.

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

Regresar al índice

Twittear

Ejemplo de un menú de navegación "con cajones"

Regresar al índice

1. Objetivo

Vamos a crear un menú de navegación "con cajones". Los "cajones" son cajas <div> que aparecerán progresivamente cuando se pase el cursor sobre un elemento del menú.

Este ejemplo ha sido creado a partir del sitio web CSS3CREATE (en francés): http://www.css3create.com/Menu-avec-slider-effet-transition

2. La estructura del menú de navegación

El menú de navegación se encuentra dentro de un elemento section con un ID, en una lista ul. Cada etiqueta del menú se encuentra insertada en un elemento li de la lista, en un vínculo a.

<section id="menu">

<ul>

<li>

<a href="#" class="enlace">Manzanas</a>

</li>

<li>

<a href="#" class="enlace">Peras</a>

</li>

<li>

<a href="#" class="enlace">Plátanos</a>

</li>

<li>

<a href="#" class="enlace">Fresas</a>

</li>

</ul>

</section>

Las cajas <div> de los cajones se encuentran dentro de los elementos li. En el ejemplo, estas cajas <div> presentan un elemento de encabezado h3 y un párrafo p.

<section id="menu">

<ul>

<li>

<a href="#" class="enlace">Manzanas</a>

<div>

<h3>Las manzanas</h3>

<p>Nullam id dolor id nibh ultricies vehicula ut id

elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus

dolor auctor.</p>

</div>

</li>

<li>

<a href="#" class="enlace">Peras</a>

<div>

<h3>Las peras</h3>

<p>Lorem ipsum dolor sit amet, consectetur

adipiscing elit. Maecenas faucibus mollis interdum. Maecenas

sed diam eget risus varius blandit sit amet non magna.</p>

</div>

</li>

<li>

<a href="#" class="enlace">Plátanos</a>

<div>

<h3>Los plátanos</h3>

<p>Sed posuere consectetur est at lobortis. Donec

ullamcorper nulla non metus auctor fringilla.</p>

</div>

</li>

<li>

<a href="#" class="enlace">Fresas</a>

<div>

<h3>Las fresas</h3>

<p>Donec id elit non mi porta gravida at eget

metus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>

</div>

</li>

</ul>

</section>

3. El diseño del menú

El diseño del menú se ha obtenido con los estilos CSS habituales. ¡Si usted prefiere, puede "adornarlo" un poco más!

body {

font: .8em Verdana, Arial, Helvetica, sans-serif;

}

#menu {

width: 100px;

padding: 20px;

border: 1px solid #333;

background-color: #ccc;

}

#menu ul {

position: relative;

margin: 0;

padding: 0;

list-style: none;

}

#menu ul li {

width: 70px;

height: 20px;

margin: 0 0 30px 0;

}

#menu ul li:last-child {

margin: 0;

}

#menu ul li a.enlace {

position: absolute;

z-index: 100;

display: block;

text-decoration: none;

color: black;

}

4. El diseño de los cajones

Las cajas <div> de los cajones han sido posicionadas (position: absolute) y se sitúan en 0 (left: 0 y top: 0). Los cajones no son visibles (overflow: hidden) y tienen una opacidad de 0 (opacity: 0). Por último, los cajones tendrán un ancho inicial igual al ancho de la lista ul (width: 100px), para evitar que estén activos cuando accedamos a la página y que "se salgan" por el lado derecho del menú.

#menu ul li div {

position: absolute;

z-index: 50;

left: 0;

top: 0;

width: 100px;

height: 120px;

border: 1px solid #fff;

opacity: 0;

background-color: black;

padding: 15px;

overflow: hidden;

color: white;

text-align: right;

}

Para evitar un efecto molesto de acordeón en los párrafos p de los cajones, vamos a imponerles desde el principio un ancho fijo.

#menu ul li div p {

width: 300px;

}

5. La visualización inicial

Así se visualizará inicialmente el menú de navegación:

6. Las transiciones

Queremos que cuando se pase el cursor sobre un vínculo, el cajón aparezca progresivamente, que pase de transparente a opaco y que se desplace hacia la derecha.

En el estilo de la caja <div>, debemos añadir la propiedad transition para todas las propiedades CSS posibles (all), con una duración de 1 segundo (1s) y un movimiento de aceleración (ease-in).

#menu ul li div {

position: absolute;

z-index: 50;

left: 0;

top: 0;

width: 300px;

height: 120px;

border: 1px solid #fff;

opacity: 0;

background-color: black;

padding: 15px;

overflow: hidden;

color: white;

text-align: right;

/* Las transiciones */

-moz-transition: all 1s ease-in;

-webkit-transition: all 1s ease-in;

-o-transition: all 1s ease-in;

transition: all 1s ease-in;

}

Esas transiciones tendrán efecto cuando se pase el cursor (:hover) sobre los elemento li del menú de navegación y se aplicarán a las cajas <div>. La cajas se desplazarán de 90 píxeles hacia la derecha y la opacidad pasará a 1.

#menu ul li:hover div{

left: 90px;

opacity: 1;

}

7. La visualización

Inicialmente, si el cursor no se encuentra sobre ninguno de los vínculos, podremos ver el menú de navegación sin más:

Cuando se pase el cursor con el ratón sobre un vínculo, el cajón aparecerá progresivamente y se desplazará hacia la derecha con el ancho especificado:

Al final del período de tiempo especificado, el cajón será totalmente visible:

Cuando se quite el cursor del vínculo, el cajón recuperará sus parámetros iniciales y dejará de ser visible.

8. Los menús de navegación "flashy"

Estas son dos URL en las que encontrará ejemplos de menús muy "flashys", que usted podrá adaptar en función de lo que necesite: 

• http://tympanus.net/Tutorials/BlurMenu/index.html 
• http://tympanus.net/Tutorials/CreativeCSS3AnimationMenus/index6.html

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

Regresar al índice

Twittear

Ejemplo de un diaporama interactivo

Regresar al índice

1. Objetivo

Vamos a crear un diaporama muy sencillo, para que podamos aplicarle transformaciones y transiciones. Las imágenes se visualizarán con una transformación de cambio de escala, para mostrarlas con un tamaño más pequeño. Cuando pasemos el cursor con el ratón, la imagen se ampliará y se desplazará hacia la izquierda con una transición.

2. La estructura del diaporama

Vamos a usar una estructura 100% HTML5, con los elementos section, figure y figcaption :

<section id="diaporama">

<figure>

<img src="photo1.jpg" />

<figcaption>Hipopótamo</figcaption>

</figure>

<figure>

<img src="photo2.jpg" />

<figcaption>Tigre</figcaption>

</figure>

<figure>

<img src="photo3.jpg" />

<figcaption>Cebra</figcaption>

</figure>

<figure>

<img src="photo4.jpg" />

<figcaption>Suricata</figcaption>

</figure>

</section>

Centraremos el diaporama en la página con los estilos:

#diaporama {

position: relative;

margin: 0 auto;

width: 100px;

}

A los elementos figure les aplicaremos márgenes superiores e inferiores y el modo de posicionamiento:

#diaporama figure {

position: relative;

top : 0;

left: 0;

margin: 30px 0;

}

3. Las transformaciones

Las imágenes de origen tienen una dimensión de 300x200 píxeles. Vamos a usar las propiedades de transformación para pasarlas a una escala del 25%, de modo que se visualicen con un tamaño menor. Lo indicaremos en el selector figure:

#diaporama figure {

position: relative;

margin: 30px 0;

top : 0;

left: 0;

/* La transformación: cambio de escala del 25% */

-moz-transform: scale(.25);

-webkit-transform: scale(.25);

-o-transform: scale(.25);

transform: scale(.25);

/* Para la visualización del cambio de escala */

width: 75px;

height: 50px;

}

Como habrá notado, es necesario precisar el tamaño de visualización obtenido, una vez que se ha aplicado el cambio de escala, con las propiedades width y height.

El texto de las leyendas (figcaption) también se verá reducido de un 25% con la transformación. Para que no nos encontremos con un texto ilegible, vamos a darle un tamaño importante:

#diaporama figcaption {

font: 3em Verdana;

}

Se visualizará así:

4. Las transiciones

Queremos aplicar dos transiciones: un cambio de escala y un desplazamiento horizontal. Esas transiciones afectarán a todas las propiedades (all), durante 1 segundo (1s) y tendrán una velocidad constante (linear).

#diaporama figure {

position: relative;

margin: 30px 0;

top : 0;

left: 0;

/* La transformación: cambio de escala del 25% */

-moz-transform: scale(.25);

-webkit-transform: scale(.25);

-o-transform: scale(.25);

transform: scale(.25);

/* Para la visualización del cambio de escala */

width: 75px;

height: 50px;

/* Las transiciones */

-moz-transition: all 1s linear;

-webkit-transition: all 1s linear;

-o-transition: all 1s linear;

transition: all 1s linear;

}

Esas transiciones tendrán lugar cuando se pase el curso (:hover) sobre los elementos figure. La escala pasará a 1 para mostrar las imágenes con su tamaño de origen (scale(1)), el desplazamiento volverá a ser horizontal (top: 0) y será de 150 píxeles hacia la derecha (left: 150px).

#diaporama figure:hover {

-moz-transform: scale(1);

-webkit-transform: scale(1);

-o-transform: scale(1);

transform: scale(1);

top: 0;

left: 150px;

}

5. La visualización

Al visualizar el diaporama con el cursor del ratón fuera de las imágenes, no pasará nada, ya se les ha aplicado el cambio de escala a las imágenes.

Cuando se pase el cursor sobre una imagen, tendrá lugar el cambio de escala y el desplazamiento:

Observe que en este ejemplo sencillo, es necesario conservar el cursor sobre la imagen.

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

Regresar al índice

Twittear

Ejemplo de un menú de navegación interactivo

Regresar al índice

1. Objetivo

Vamos a crear un menú muy sencillo, con dos transiciones que van a intervenir cuando se pase el ratón sobre los vínculos: 

• el color del fondo va a cambiar progresivamente de amarillo a azul. 
• el color del texto va a cambiar progresivamente de negro a blanco.

2. El diseño del formulario

Cree un menú de navegación con una lista <ul>.

<ul id="menu">

<li><a href="#">Inicio</a></li>

<li><a href="#">Referencias</a></li>

<li><a href="#">Contacto</a></li>

</ul>

Cree los estilos CSS para aplicarle un diseño a su menú:

#menu li {

list-style: none;

}

#menu a {

display: block;

float: left;

width: 100px;

padding: 3px;

margin-right: 20px;

border: 1px solid #333;

background-color: lightyellow;

text-align: center;

color: black;

text-decoration: none;

}

El fondo de los vínculos a es de color amarillo claro: background-color: lightyellow.

El texto de los vínculos a es de color negro: color: black.

Este será el resultado visual:

3. Las transiciones

En el estilo de los vínculos #menu a, especifique las dos transiciones que queremos aplicar, separándolas con una coma.

#menu a {

display: block;

float: left;

width: 100px;

padding: 3px;

margin-right: 20px;

border: 1px solid #333;

background-color: lightyellow;

text-align: center;

color: black;

text-decoration: none;

/* Las transiciones */

-moz-transition: background-color 1s linear,

color 1s linear;

-webkit-transition: background-color 1s linear,

color 1s linear;

-o-transition: background-color 1s linear,

color 1s linear;

transition: background-color 1s linear,

color 1s linear;

}

A continuación, especifique el evento de pasar el cursor (:hover) sobre los vínculos a:

#menu a:hover {

background-color: darkblue;

color: white;

}

El color de fondo de los vínculos a pasará a azul oscuro: background-color: darkblue.

El color del texto de los vínculos a pasará a blanco: color: white.

4. La visualización

Cuando el cursor del ratón no se encuentre sobre ningún vínculo, el evento:hover no habrá sido detectado, así que no pasará nada.

Cuando pase el cursor sobre un vínculo, el fondo de su caja cambiará a azul oscuro y el texto del vínculo cambiará a blanco.

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

Regresar al índice

Twittear

Los generadores en línea de transiciones - CSS

Regresar al índice

1. CSS3 Generator

Si selecciona Transitions en el menú desplegable, CSS3 Generator (http://css3generator.com/) le permitirá trabajar con cinco propiedades (Property). Podrá especificar la duración (Duration) y el movimiento (Function).

2. CSS 3.0 Maker

Con CSS 3.0 Maker (http://www.css3maker.com/css3-transition.html) solamente podremos trabajar con algunas propiedades de las transiciones. Es posible definir el evento (Select Action), la duración (Transition Duration) y el movimiento (Transition Timing).

3. Crear las curvas de Bézier

Como ya vimos, la propiedad transition-timing-function nos permite aplicar nuestras propias curvas de Bézier con la palabra clave cubic-bezier. Este es un sitio web absolutamente genial que le ayudará a crear visualmente sus propias curvas de Bézier: http://cubic-bezier.com/

En la parte izquierda tiene un gráfico de Bézier en el que podrá cambiar los valores desplazando los círculos. La "fórmula" cubic-bezier se mostrará dinámicamente en la parte superior de la pantalla. También encontrará un comparador de movimiento y las curvas predefinidas.

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

Regresar al índice

Twittear

Otras propiedades de las transiciones

Regresar al índice

1. El movimiento

La propiedad transition-timing-function permite definir el movimiento de la transición. Esta admite seis valores representados con palabras clave: 

• ease: la transición es lenta al principio y luego se acelera cuando va a terminar (es el valor predeterminado). 
• linear: la transición mantiene una velocidad constante. 
• ease-in: la transición se lleva a cabo lentamente al principio y luego se acelera, cuando va a terminar. 
• ease-out: la transición se lleva a cabo rápidamente al principio y luego disminuye su velocidad, cuando va a terminar. 
• ease-in-out: la transición se lleva a cabo lentamente al principio, luego se acelera, y vuelve a disminuir la velocidad cuando va a terminar. 
• cubic-bezier: le permite configurar su propia curva de Bézier para definir el movimiento.

Estas son las curvas de Bézier utilizadas para esos efectos cinéticos:

Fuente de los gráficos (bloc francés): http://www.felix-girault.fr/blog/css/les-transitions-css3/

Esta es la sintaxis que vamos a usar :

#desplazamiento {

position: absolute;

left: 20px;

top: 20px;

-moz-transition-property: left;

-moz-transition-duration: 2s;

-moz-transition-timing-function: ease-in;

-webkit-transition-property: left;

-webkit-transition-duration: 2s;

-webkit-transition-timing-function: ease-in;

-o-transition-property: left;

-o-transition-duration: 2s;

-o-transition-timing-function: ease-in;

transition-property: left;

transition-duration: 2s;

transition-timing-function: ease-in;

}

2. El inicio de la transición

La propiedad transition-delay permite definir cuándo se iniciará la transición, cuánto tiempo después de la detección del evento.

Esta sintaxis hace que la transición se inicie 2 segundos después de que se detecte el evento: transition-delay: 2s;.

Esta sería la sintaxis completa:

#desplazamiento {

position: absolute;

left: 20px;

top: 20px;

-moz-transition-property: left;

-moz-transition-duration: 2s;

-moz-transition-timing-function: ease-in;

-moz-transition-delay: 2s;

-webkit-transition-property: left;

-webkit-transition-duration: 2s;

-webkit-transition-timing-function: ease-in;

-webkit-transition-delay: 2s;

-o-transition-property: left;

-o-transition-duration: 2s;

-o-transition-timing-function: ease-in;

-o-transition-delay: 2s;

transition-property: left;

transition-duration: 2s;

transition-timing-function: ease-in;

transition-delay: 2s;

}

3. La sintaxis abreviada

Puede usar la sintaxis abreviada transition indicando a continuación las funciones separadas con un espacio simple, en este orden : 

• transition-property 
• transition-duration 
• transition-timing-function 
• transition-delay

Veamos un ejemplo de sintaxis abreviada:

#desplazamiento {

position: absolute;

left: 20px;

top: 20px;

-moz-transition: left 2s ease-in 2s;

-webkit-transition: left 2s ease-in 2s;

-o-transition: left 2s ease-in 2s;

transition: left 2s ease-in 2s;

}

4. Las transiciones múltiples

Usted también puede aplicar varias transiciones. Simplemente deberá separar cada transición con una coma e indicar el plazo para que cada transición comience en el momento oportuno.

Vamos a crear una transición múltiple con tres propiedades modificadas: 

• el ancho width, que dura 3 segundos. 
• la altura height, que dura 2 segundos y comienza 3 segundos más tarde. 
• la opacidad opacity, que dura 4 segundos y comienza 6 segundos más tarde.

Vamos a trabajar a partir de una caja <div> que contiene, simplemente, un párrafo de texto.

Estos son los estilos CSS:

p.texto {

color: white;

font-weight: bold;

text-align: center;

line-height: 30px;

}

#multiple {

position: absolute;

left: 20px;

top: 20px;

width: 200px;

height: 60px;

background-color: darkblue;

-moz-transition: width 3s linear, height 2s linear 3s,

opacity 4s linear 6s;

-webkit-transition: width 3s linear, height 2s linear 3s,

opacity 4s linear 6s;

-o-transition: width 3s linear, height 2s linear 3s,

opacity 4s linear 6s;

transition: width 3s linear, height 2s linear 3s,

opacity 4s linear 6s;

}

#multiple:hover {

width: 400px;

height: 120px;

opacity: .3;

}

Este es el código de la caja <div>:

<div id="multiple">

<p class="texto">Aenean eu leo quam.</p>

</div>

Así se verá en la pantalla:

El cursor no se encuentra sobre la caja <div>, no se ha detectado ningún evento, no pasa nada:

El cursor se encuentra encima (:hover) de la caja <div>, el ancho (property) se modifica durante 3 segundos (duration):

Luego, 3 segundos más tarde (delay), la altura de la caja (property) aumenta durante 2 segundos (duration):

Para terminar, 6 segundos más tarde (delay), se reduce la opacidad de la caja (property) durante 4 segundos (duration):

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

Regresar al índice

Twittear

Aplicar una transición de desplazamiento

Regresar al índice

1. Objetivo

Vamos a realizar una transición muy sencilla: una imagen que se desplace horizontalmente.

2. El código necesario

Tenemos una imagen dentro de una caja <div>:

<div id="desplazamiento"><img src="leon.jpg" alt="León" /></div>

Vemos que se ha creado un selector de identificación para esa caja <div>. Ahora vamos a posicionar ese elemento:

#desplazamiento{

position: absolute;

left: 20px;

top: 20px;

}

3. Las propiedades de la transición

Con la propiedad transition-property vamos a indicar cuál es la propiedad CSS que queremos modificar: transition-property: left;.

Con la propiedad transition-duration vamos a indicar la duración de la transición: transition-duration: 2s;. Las unidades que se pueden usar son los segundos s y los milisegundos ms.

Tendremos el siguiente selector:

#desplazamiento {

position: absolute;

left: 20px;

top: 20px;

-moz-transition-property: left;

-moz-transition-duration: 2s;

-webkit-transition-property: left;

-webkit-transition-duration: 2s;

-o-transition-property: left;

-o-transition-duration: 2s;

transition-property: left;

transition-duration: 2s;

}

Ahora, para terminar, vamos a indicar el nuevo valor de la propiedad left y el evento que va a provocar la transición.

En nuestro ejemplo, será al pasar el cursor por encima (:hover) cuando se aplicará la transición. El desplazamiento se va a realizar hasta la posición horizontal de 40 píxeles.

#desplazamiento:hover {

left: 40px;

}

4. El resultado

Este sería el resultado visual, la imagen se desplaza de 40 píxeles en sentido horizontal.

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

Regresar al índice

Twittear

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