Aprende como agregar Transiciones CSS3 a tus sitios web con esta guiá básica.
Hace unas semanas veíamos FlexBox, un conjunto de propiedades CSS para organizar de forma más óptima los elementos una web. En esta ocasión también os traigo una gran utilidad de CSS3, que seguro muchos de vosotros ya conocéis, se trata de las Transiciones.
Las transiciones permiten que los cambios de valores en las propiedades de un elemento sucedan de una forma gradual durante un periodo de tiempo determinado, es decir, nos permite suavizar el paso de un estado a otro de la interfaz, muy similar a una “animación”. Un ejemplo claro es el cambio de color del fondo de un botón cuando llevamos el ratón sobre él (hover), con una transición conseguimos que el cambio de color no se haga de forma brusca, sino que se produzca de forma gradual.
Agregando Transiciones con la propiedad Transition
Para aplicar una transición a un elemento tenemos que utilizar la propiedad transition. Aunque está propiedad ya la podemos considerar un estándar, es recomendable el uso de prefijos para que funcione en versiones antiguas de los navegadores.
Parámetros
- Transition-property: Especifica el nombre de la propiedad CSS sobre el que se va a realizar el efecto de transición. Utilizamos ‘all’ si queremos que se aplique sobre todas las propiedades o ‘’none’ para ninguna. Debemos ttener en cuenta que no todas las propiedades css son compatibles con las transiciones, en el siguiente enlace os dejo la lista completa de propiedades compatibles: http://www.w3.org/TR/css3-transitions/#animatable-properties
- Transition-duration: Como su nombre indica, especifica la duración de la transición en segundos o milisegundos (ejemplo: 2s, 150ms).
- Transition-timing-function: Especifica la curva de velocidad de la transición, es decir, si queremos que mantenga una velocidad constante, o un comienzo o final rápido, lento, etc. En concreto podemos utilizar los siguientes:
- Linear: Mantiene la misma velocidad de principio a fin.
- Ease: Comienzo lento, luego rápido y termina lento.
- Ease-in: Comienza lento, y después mantiene velocidad.
- Ease-out: Mantiene velocidad con un final lento.
- Ease-in-out: Comienzo y fin lentos, muy similar a ease sólo que este último empieza más rápido de lo que termina.
- Cubic-bezier: Este es un poco más complejo, no voy a entrar en detalle, pero podemos configurar la curva de velocidad a nuestro gusto utilizando la función cúbica de Bezier. Acepta cuatro valores entre 0 y 1.
- Transition-delay: Especifica el tiempo de retardo en segundos o milisegundos antes del comienzo de la transición.
Estos parámetros se suelen poner en una sola línea en el orden en el que los he especificado:
Ejemplo:
transition: all 2s ease 1s;
También podemos concatenar varias propiedades a la vez:
Ejemplo:
transition: background-color 1s ease, height 2s ease-in 1s, margin-bottom 1s linear 3s;
(Nota: si no queremos retardo, directamente no lo ponemos).
A continuación muestro dos ejemplos aplicando transiciones.
Ejemplo 1: En este primer ejemplo, se muestran dos cuadrados a los que les cambio el ancho, el color de fondo y la sombra cuando hover. Uno de ellos sin aplicar transiciones y otro con transiciones.
See the Pen Example 1 Transition by Enrique (@enriquearkas) on CodePen.0
Ejemplo 2: En este segundo ejemplo, he jugado con los retardos para que se apliquen algunos cambios una vez que han acabado otras transiciones.
See the Pen Example 2 Transition by Enrique (@enriquearkas) on CodePen.0
Cualquier duda acerca de esta propiedad o cualquier otra, consultádmelo a través de redes sociales o comentando en este post.
Demasiado buena, buen aporte, te agradezco.
Maravilloso eso esta asombroso me llamo bastante la atencion
Hola!, estoy al tanto 100% de todos tus tutoriales (HTML5, CSS3 y javascript ‘solo si está asociado a las anteriores’) y me eh dado cuenta que no explicaste las transiciones:
cosa que en tus ejemplos sí pusiste :S
-webkit-transition / -moz-transition / -o-transition / -ms-transition
De hecho si lo explico son «Prefijos» que usan otros exploradores aunque «Transition» ya es oficial los prefijos -webkit -moz son prefijos que antes solo funcionaban en determinado exploradores, es recomendable ponerlos todos, pero si queires trabajar con puro explorador nuevo solo usa Transition y olvida los demas
Funciona si le agrego a una lista completa..? Tengo un carrusel de imágenes en mi web pero se mueven de una forma muy mecánica, le he intentado agregar este transition para suavizar el movimiento, pero no me funciona le he agregado al contenedor y he probado poniéndole a cada elemento de la lista, pero sigue sin funcionar porque crees que sea..?
Que pasa si quiero aplicar este efecto pero a una imagen?
tenes que agregarlo como un id o una class a la linea de donde tengas la imagen
una cosa, como puedo hacer para que una vez quite el efecto de :hover el efecto no desaparezca? sino que quede la transformación que se realizó…
agregale la propiedad focus al hover