Transiciones (transition)

Esta documentación explica como hacer transiciones sutiles y fáciles

El parámetro transition es un parámetro de CSS3 y CSS2 UI, es decir, que lo implementan navegadores por separado.
Para usarlo hay la forma estándar establecida por W3 y las propias de los navegadores, por ese motivo por motivos de compatibilidad mejor establecer todas juntas, ya que si una no funciona otra si lo hará.

La mayoría de los navegadores son compatible, pero Internet Explorer no (en su versión 9).

1. /* Parámetro estándar */
   
2. transition:
   
3. 
   
4. /* Parámetros según navegador */
   
5. -webkit-transition:/* Chrome y Safari */
   
6. -moz-transition:/* Mozilla */
   
7. -o-transition:/* Opera */
   

Como funciona

Realmente lo que hace este parámetro es detectar los cambios en el estilo, ya sea añadirle un estilo o sea una modificación por pasar por encima (:hover).
Realmente coge el parámetro anterior y pasa al siguiente de forma progresiva en el tiempo establecido.
Debe de establecerse el transition en el elemento origen, no es recomendable hacerlo en el destino (:hover) o cambiando la clase.

Este es un ejemplo de estilos con transition y su procedimiento

1. /* Estilo de un DIV con la clase TRA */
   
2. .TRA{
   

width:100px;


height:100px;


background:#099;


3. }
   
4. 
   
5. /* Estilo que se aplica al pasar por encima de la DIV con clase TRA */
   
6. .TRA:hover{
   

width:200px;


height:200px;


background:#990;


7. }
   

Con el código de arriba añadiéndole una transición aumentaría de tamaño progresivamente el DIV y cambiaría su color de fondo también de forma progresiva.

Parámetros de transition

Transition tiene distintos parámetros, que se pueden especificar por separado, o juntos (como hace background y background-color, por ejemplo).
El parámetro transition tiene los siguientes parámetros (que después se explicarán por separado):

1. transition: [Propiedades] [Tiempo] [Función de Tiempo] [Retardo];

Los parámetros que usamos en transition son los siguientes:

Propiedades: En este parámetro establecemos que propiedad queremos que modifique, como width, height... pero solo podemos poner una, por eso se puede usar la la propiedad "all", que sirve para seleccionar todas y se recomienda usarla preferentemente.

Tiempo: Este parámetro establece el tiempo que tarda en hacerse la animación en segundos (su unidad es s), es decir si queremos que dure un segundo tenemos que poner "1s".

Función de tiempo: Este parámetro establece la curva de aceleración de la transición, es decir, si empieza más rápido y o más despacio o es un avance lineal, sin variar la aceleración.
Este parámetro tiene varias funciones de tiempo preestablecida: lineal, ease, ease-in... Por defecto usa el ease, y es el más recomendado, consiste en un comience lento y una terminación lenta, acelerándose en la parte media.

Retardo: En este parámetro podemos establecer el tiempo que tarda en empezar la transición, en segundos.

Ejemplo funcional de una transición

En el siguiente ejemplo veremos como un DIV irá de un lado al otro y cambiará su tamaño y color cuando pasemos por encima de su contenedor.



El código HTML:

1. <div class="TRA_CONT">
   

<div> <!-- Este DIV es el que se mueve -->


</div>


2. </div>
   

El código CSS:

1. /* Este estilo es el del DIV que esta dentro de div.TRA_CONT */
   
2. .TRA_CONT div{
   

width:10%;


height:80px;


margin-left:0%;


background:#0F0;


-webkit-transition:all 1s ease;


-moz-transition:all 1s ease;


-o-transition:all 1s ease;


transition:all 1s ease;


3. }
   
4. 
   
5. /* Estilo que se aplica al pasar por encima de la DIV con clase TRA */
   
6. .TRA_CONT:hover div{
   

width:20%;


margin-left:80%;


background:#F00;


7. }
   

Que significa:

El código anterior muestra los parámetros que tiene al principio el DIV y muestra los que tiene al pasar por encima.
El movimiento lateral se puede hacer, como en este caso, con el margin-left o con parámetro de posición (left,top...), el ensanche de el DIV se hace con el width y el color cambia por el background.

El contenido de transition:

El contenido del parámetro ("all 1s ease") nos indica en primer lugar que queremos hacer la transición con todos los parámetros (estableciendo "all"), en segundo lugar especificamos la duración de un segundo (con "1s"), también especificamos la función de tiempo que realiza, usando "ease" (que va mas lento a principio y fin de el movimiento) y por último podríamos haber establecido el retardo, especificándolo en segundos.

Propiedades de transition por separado

Para usar estas formas individuales también tenemos que ponerles el prefijo para cada navegador (-webkit-, -moz- y -o-):

transition-property: Este parámetro sirve para establecer los parámetros que serán afectados por la transición, es decir, si solo queremos que se cambie el width y el margin debemos de establecer en su contenido "width, margin", separando con comas si existe mas de un parámetro que va a ser afectado.

transition-duration: Estableciendo este parámetro podemos cambiar individualmente el tiempo de la transición, estableciéndolo en segundos (por ejemplo 0.5s o 2s).

transition-timing-function: Con este parámetro establecemos la curva de velocidad, pudiendo elegir entre varios preestablecidos (lineal,ease,ease-in,ease-out...).

transition-delay: Con este parámetro establecemos el retardo con segundos, por ejemplo, si queremos que empiece medio segundo tarde establecemos 0.5s.

Nota: Se pueden usar todas juntas con el transition, como en el primer ejemplo.

Integración con eventos

Con transition todos los cambios (siempre que estén definidos en las propiedades que se animarán) que hagamos con eventos JavaScript se harán de forma progresiva como con las demás transiciones.



El código HTML:

Los botones con los eventos

1. <input type="button" onclick="document.getElementById('cuadro_tra').style.width='20%'" value="20%">
   
2. <input type="button" onclick="document.getElementById('cuadro_tra').style.width='40%'" value="40%">
   
3. <input type="button" onclick="document.getElementById('cuadro_tra').style.width='60%'" value="60%">
   
   
La etiqueta DIV que cambia de tamaño

4. <div id="cuadro_tra"></div>

El código CSS:

1. #cuadro_tra{
   

width:20%;


-webkit-transition:all 1s ease;


-moz-transition:all 1s ease;


-o-transition:all 1s ease;


transition:all 1s ease;


2. }
   

Ejemplos funcionales

Menús

Un ejemplo con un posible menú de Coca-Cola:



Algo bastante utilizado son las pestañas:



EL código HTML:

1. <div class="MENU_pestañas">
   

<li>Inicio</li>


<li>CSS</li>


<li>JavaScript</li>


<li>PHP</li>


2. </div>
   

El código CSS:

1. .MENU_pestañas li{

position:relative;


float:left;


list-style:none;


width:140px;


height:26px;


padding-top:15px;


text-align:center;


background:#999;


color:#FFF;


border:1px solid #555;


font-weight:bold;


text-shadow:1px 1px 0px #000;


border-radius:10px 10px 0px 0px;


-webkit-border-radius:10px 10px 0px 0px;


-moz-border-radius:10px 10px 0px 0px;


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


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


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


transition:all 1s ease 1s;


2. }
   
3. 
   
4. .MENU_pestañas li:hover{
   

background:#9A44A6;


border-bottom-color:transparent;


z-index:2;


box-shadow:2px -2px 4px rgba(0,0,0,0.4);


-webkit-transition:all 1s ease;


-moz-transition:all 1s ease;


-o-transition:all 1s ease;


transition:all 1s ease;


5. }

Comentarios