Este tutorial documenta cómo hacer transiciones sutiles y fáciles con CSS3. El parámetro transition es un parámetro de CSS3 y CSS2 UI, es decir, que lo implementan navegadores por separado. Para usarlo está la forma estándar establecida por W3c y las propias de los navegadores, por ese motivo de compatibilidad es mejor declarar las propiedades para todos los navegadores, ya que si una no funciona, otra sí lo hará.
La mayoría de los navegadores son compatibles, pero Internet Explorer no (en su versión 9).
Código :
/* Parámetro estándar */ transition: /* Parámetros según navegador */ -webkit-transition:/* Chrome y Safari */ -moz-transition:/* Mozilla */ -o-transition:/* Opera */
Cómo funcionan las transiciones en CSS3
Realmente lo que hace este parámetro es detectar los cambios del elemento en el estilo, ya sea añadirle un estilo o sea una modificación por pasar por encima (:hover). Coge el parámetro anterior y pasa al siguiente de forma progresiva en el tiempo establecido. Debe de establecerse transition en el elemento origen, no es recomendable hacerlo en el destino (:hover) o cambiando la clase.
Este es un ejemplo de estilos sin aplicar transition y su procedimiento:
Código :
/* Estilo de un DIV con la clase TRA */ .TRA{ width:100px; height:100px; background:#099; } /* Estilo que se aplica al pasar por encima de la DIV con clase TRA */ .TRA:hover{ width:200px; height:200px; background:#990; }
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 hacen background y background-color, por ejemplo). El parámetro transition tiene los siguientes parámetros (que después se explicarán por separado):
Código :
transition: [Propiedades] [Tiempo] [Función de Tiempo] [Retardo];
Los parámetros que usamos en transition son los siguientes:
- Propiedades: En este parámetro establecemos qué propiedad queremos que modifique, como width, height... pero sólo podemos poner una, por eso se puede usar 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.
En el siguiente ejemplo veremos cómo 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:
Código :
<div class="TRA_CONT"> <div> <!-- Este DIV es el que se mueve --> </div> </div>
El código CSS:
Código :
/* Este estilo es el del DIV que esta dentro de div.TRA_CONT */ .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; } /* Estilo que se aplica al pasar por encima de la DIV con clase TRA */ .TRA_CONT:hover div{ width:20%; margin-left:80%; background:#F00; }
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 más lento a principio y fin de el movimiento) y por último podríamos haber establecido el retardo, especificándolo en segundos.Propiedades de transition
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 sólo queremos que se cambie el width y el margin debemos establecer en su contenido "width, margin", separando con comas si existe más 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.
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.
Código :
Los botones con los eventos <input type="button" onclick="document.getElementById('cuadro_tra').style.width='20%'" value="20%"> <input type="button" onclick="document.getElementById('cuadro_tra').style.width='40%'" value="40%"> <input type="button" onclick="document.getElementById('cuadro_tra').style.width='60%'" value="60%"> La etiqueta DIV que cambia de tamaño <div id="cuadro_tra"></div>
Código :
#cuadro_tra{ width:20%; -webkit-transition:all 1s ease; -moz-transition:all 1s ease; -o-transition:all 1s ease; transition:all 1s ease; }
Algunos ejemplos de uso
Código :
<div class="MENU_pestañas"> <li>Inicio</li> <li>CSS</li> <li>JavaScript</li> <li>PHP</li> </div>
Código :
.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; } .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; }
Ver los ejemplos funcionando
¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.
Por pedro-vk el 09 de Agosto de 2012
http://xitrus.es/utilidades/Transiciones
Lo siento, e puesto mal el link
Por Mariux el 09 de Agosto de 2012
pedro-vk :
http://xitrus.es/utilidades/Transiciones
Lo siento, e puesto mal el link
arreglado. gracias
Por ebuzz el 10 de Agosto de 2012
Por antonionavajas el 10 de Agosto de 2012
Por pedro-vk el 10 de Agosto de 2012
Por david caceres el 29 de Abril de 2013
Por orland el 03 de Junio de 2013
Por 123 el 16 de Agosto de 2013
Por JesusHfebles el 13 de Julio de 2014