¿Qué son y como hacer TRANSICIONES en CSS? Con ejemplos!

Las transiciones en CSS son una herramienta esencial para crear efectos visuales suaves y atractivos en tus páginas web. En este artículo, exploraremos qué son, cómo hacer diferentes tipos de transiciones, y veremos ejemplos prácticos aplicados a imágenes y botones. Descubre cómo mejorar la experiencia del usuario en tu sitio web con estas técnicas y genera código fácilmente.

1. ¿Qué son las transiciones en CSS?.

Una transición en es un efecto que permite que los cambios en las propiedades de estilo CSS de un elemento ocurran de manera gradual en lugar de instantáneamente.

Esto se logra especificando la propiedad que se va a animar, la duración de la animación, la función de tiempo y el retraso antes de que comience la transición.

1.1. Ejemplos para entender como funcionan las transiciones en CSS:

Para entender su funcionamiento vamos a hacer lo siguiente:

• PRIMERO vamos a crear un HTML <div> (con un selector CSS de clase) sin contenido pero le vamos a dar una altura y ancho definidos para que asemeje un cuadrado y le colocaremos un color rojo.
• LUEGO aplicaremos las propiedades CSS para crear una transición que al pasar la flecha sobre él se transforme en un cuadro de color azul.

HTML para el <div>:

Propiedades CSS para aplicar la transición al pasar el cursor:

Resultado visual (pasar el cursor sobre el cuadro):

Este es un ejemplo sencillo que ocasiona la transformación de un cuadro rojo a azul gracias a las propiedades CSS de transición CSS las cuales iremos explicando a profundidad mas adelante:

• La clase .box tiene una propiedad transition que especifica que cualquier cambio en background-color debe durar 0.5 segundos y usar la función de tiempo ease.
• Cuando el usuario pasa el mouse sobre el elemento .box, su color de fondo cambia de rojo a azul gradualmente durante 0.5 segundos.

Las transiciones en CSS son útiles para mejorar la experiencia del usuario haciendo que los cambios en la interfaz sean más suaves y agradables visualmente.

1.2. ¿Qué tipos de transiciones CSS puedo crear en la práctica?

A continuación, se presentan algunos ejemplos prácticos donde el uso de transiciones CSS puede ser beneficioso:

1. Menús desplegables:

Al hacer clic en un elemento del menú, las opciones submenú pueden desplegarse suavemente con una animación de transición, en lugar de aparecer o desaparecer de forma abrupta. Esto crea una experiencia más intuitiva y agradable para el usuario.

Ejemplo: Al pasar el cursor sobre un elemento principal del menú, el submenú correspondiente se desliza hacia abajo con una animación de transición suave, revelando las opciones de manera gradual.

2. Botones y enlaces:

Al hacer clic en un botón o enlace, este puede cambiar de color, tamaño o forma durante un breve instante antes de realizar la acción correspondiente. Esto proporciona una retroalimentación visual inmediata al usuario, indicando que se ha producido una interacción.

Ejemplo: Al hacer clic en un botón de envío, este cambia de color a verde durante un instante antes de enviar el formulario, confirmando visualmente la acción al usuario.

3. Galerías de imágenes:

Al pasar de una imagen a otra en una galería, la transición puede realizarse de forma suave, deslizándose hacia la izquierda o la derecha, o utilizando efectos como desvanecimiento o zoom. Esto mejora la experiencia visual al navegar por las imágenes.

Ejemplo: Al pasar de una imagen a otra en una galería de productos, la imagen actual se desvanece mientras la siguiente aparece gradualmente, creando una transición fluida entre las imágenes.

4. Animaciones de carga:

En lugar de mostrar un simple indicador de carga giratorio, se pueden utilizar animaciones CSS más creativas y atractivas para informar al usuario de que se está cargando contenido.

Ejemplo: Mientras se carga una página, se puede mostrar una animación de onda expandiéndose desde el centro de la pantalla, o una barra de progreso que se llena gradualmente.

5. Elementos emergentes:

Al abrir un elemento emergente, este puede aparecer con una animación de transición, deslizándose hacia abajo o hacia arriba desde la parte superior o inferior de la pantalla. Esto crea un efecto más llamativo y menos intrusivo.

Ejemplo: Al hacer clic en un botón «Más información», se abre un elemento emergente que se desliza hacia abajo desde la parte inferior de la pantalla con una animación de transición suave.

6. Efectos de desplazamiento:

Al pasar el cursor sobre un elemento, este puede cambiar de color, tamaño, sombra o aplicar otros efectos visuales, proporcionando información adicional o indicando que el elemento es interactivo.

Ejemplo: Al pasar el cursor sobre una imagen de producto, la imagen se oscurece ligeramente y se muestra un icono de lupa, indicando que se puede hacer clic para ampliar la imagen.

7. Animaciones de error:

En caso de que se produzca un error en un formulario o en una acción del usuario, se puede mostrar un mensaje de error con una animación de transición, como aparecer o desaparecer de forma gradual o cambiar de color.

Ejemplo: Al ingresar una contraseña incorrecta en un formulario de inicio de sesión, el campo de contraseña se resalta en rojo durante un instante y se muestra un mensaje de error emergente con una animación de transición.

8. Animaciones de éxito:

Al completar una acción con éxito, como enviar un formulario o realizar una compra, se puede mostrar una animación de transición para indicar la finalización exitosa de la acción.

Ejemplo: Al realizar una compra en línea, se muestra una animación de carrito de compras flotando hacia arriba y desapareciendo, junto con un mensaje de confirmación de compra.

9. Animaciones de introducción:

Al cargar una página web, se pueden utilizar animaciones CSS para mostrar elementos de la interfaz de forma gradual, creando una experiencia de introducción más atractiva y dinámica.

Ejemplo: Al cargar la página principal de un sitio web, los elementos del encabezado, el menú y el contenido principal pueden aparecer gradualmente con diferentes animaciones de transición, revelando la página de forma atractiva.

10. Animaciones de interacción:

En juegos o aplicaciones web interactivas, las animaciones CSS se utilizan para representar las acciones del usuario, como mover objetos, cambiar de estado o crear efectos especiales.

Ejemplo: En un juego web, al hacer clic en un personaje, este puede realizar una animación de salto o movimiento, proporcionando retroalimentación visual a la interacción del usuario.

2. ¿Cuáles son las propiedades CSS para crear estas transiciones?

A continuación te dejamos un resumen de las propiedades CSS más importantes para crear estas transiciones y luego iremos ampliando soBre el concepto y usabilidad de cada una de ellas:

Propiedad de transición (transition-property):

Define qué propiedades CSS serán animadas. Ejemplos comunes incluyen background-color, width, height, transform, opacity, entre otras.

Duración de la transición (transition-duration):

Especifica cuánto tiempo debe durar la transición. Se puede definir en segundos (s) o milisegundos (ms).

Función de tiempo (transition-timing-function):

Controla la velocidad de la transición durante su curso. Algunas funciones comunes son:

• linear: La transición ocurre a una velocidad constante.
• ease: La transición inicia lentamente, acelera en el medio y desacelera al final.
• ease-in: La transición comienza lentamente y luego acelera.
• ease-out: La transición comienza rápido y luego desacelera.
• ease-in-out: Una combinación de ease-in y ease-out.
• cubic-bezier(n,n,n,n): Define una curva de tiempo personalizada.

Retraso de la transición (transition-delay):

Especifica cuánto tiempo debe esperar la transición antes de comenzar. Se puede definir en segundos (s) o milisegundos (ms).

Como dijimos, a continuación vamos ampliando sobre el uso de cada una de ellas.

3. Transition-property:

La propiedad transition-property (su uso es OBLIGATORIO para crear esta transición) en CSS define cuáles propiedades CSS de un elemento deben ser animadas durante una transición.

La propiedad transition-property es una de las cuatro propiedades clave utilizadas en las transiciones CSS, junto con transition-duration, transition-timing-function y transition-delay.

EN EL PUNTO 7 DEJAMOS PASO A PASO CÓMO USAR ESTAS PROPIEDADES!!!!

3.1. Sintaxis de transition-property:

Explicación de la sintaxis:

1. transition-property: property1, property2, ...;
   • En cada property1, property2, …: se especifica una lista de propiedades CSS separadas por comas que deseas animar por medio de una transición (por ejemplo, al pasar el cursor por el elemento HTML).
2. transition-property: all;
   • Usando all especificamos que queremos animar todas las propiedades individuales CSS del elemento HTML.
3. transition-property: none;
   • Con none o se anima ninguna propiedad.

3.2. Propiedades que soportan transiciones

Con esto nos referimos a que propiedades se pueden usar para ser animadas ya que no todas son aceptadas, pero hay muchas que sí. Aquí hay una lista de algunas de las propiedades más comunes que pueden ser animadas:

3.2.1. Propiedades de Color

• color
• background-color
• border-color
• outline-color
• text-decoration-color

3.2.2. Propiedades de Fondo

• background-color
• background-position
• background-size

3.2.3. Propiedades de Borde

• border-width
• border-color
• border-radius
• border-spacing

3.2.4. Propiedades de Caja (Box Model)

• width
• height
• padding
• margin
• max-width
• max-height
• min-width
• min-height

3.2.5. Propiedades de Posicionamiento

• top
• right
• bottom
• left

3.2.6. Propiedades de Fuente y Texto

• font-size
• font-weight
• letter-spacing
• line-height
• text-indent
• text-shadow
• word-spacing

3.2.7. Propiedades de Visibilidad y Opacidad

• opacity
• visibility

3.2.8. Propiedades de Transformación

• transform (incluyendo translate, scale, rotate, skew)

3.2.9. Propiedades de Filtros

• filter (por ejemplo, blur, brightness, contrast, grayscale)

3.3. Ejemplo usando la propiedad transition-property:

Como podemos ver en este ejemplo, usamos transition-property para identificar que deseamos que se animen las propiedades width, height y background-color. Luego, como iremos viendo, con el uso de las demás propiedades de transición CSS le iremos agregando funcionalidades a dichas animaciones….

4. Transition-duration:

La propiedad transition-duration en CSS (de uso OPCIONAL PERO RECOMENDABLE) especifica cuánto tiempo debe durar una transición, es decir, cuánto tiempo tomará para que un cambio de estilo ocurra gradualmente de un estado a otro.

Esta propiedad es fundamental para controlar la velocidad de las animaciones y es una de las cuatro propiedades principales que se utilizan en las transiciones CSS junto con transition-property, transition-timing-function y transition-delay.

4.1. Sintaxis de transition-duration:

Explicación de la sintaxis:

• time: Puede ser en segundos (s) o milisegundos (ms). Ejemplos: 2s (2 segundos), 500ms (500 milisegundos).

4.2. Ejemplo usando transition-duration:

En este ejemplo vemos:

1. Primero tenemos transition-property (que es obligatoria) con las propiedades que deseamos animar.
2. Luego, con transition-duration especificamos que las propiedades width, height y background-color tienen duraciones de transición o transformación de 0.5 segundos, 1 segundo y 0.3 segundos, respectivamente.

4.3. Unidades de tiempo que podemos usar con transition-duration:

Las unidades de tiempo utilizadas en transition-duration son las siguientes:

1. Segundos (s):
   • Ejemplo: transition-duration: 2s; /* 2 segundos */
2. Milisegundos (ms)
   • Ejemplo: transition-duration: 500ms; /* 500 milisegundos */

5. Transition-timing-function.

La propiedad transition-timing-function (OPCIONAL) en CSS define la velocidad de la transición en diferentes puntos de la misma.

En otras palabras, define la velocidad de una transición CSS durante su duración. Esto controla la aceleración y desaceleración de la transición, determinando cómo cambia el valor de la propiedad a lo largo del tiempo.

5.1. Sintaxis de transition-timing-function:

El valor timing-function (como vemos en la sintaxis) puedes usar estas dos opciones:

1. Valores predefinidos (ease, linear, ease-in, ease-out, ease-in-out)
2. Función cubic-bezier personalizada.

5.2. Valores predefinidos a usar con timing-function:

1. ease: La velocidad de la transición comienza lentamente, luego acelera y finalmente desacelera.
2. linear: Transición a una velocidad constante.
3. ease-in: Transición comienza lentamente y luego acelera.
4. ease-out: Transición comienza rápidamente y luego desacelera.
5. ease-in-out: Transición combina ease-in y ease-out.

Si nos volvemos al ejemplo del punto 1.1. esto se reflejaría como la velocidad en que s produce el cambio de color de rojo a azul en el cuadro.

5.2.1. Ejemplo usando uno de estos valores predefinidos :

En este ejemplo:

• La propiedad width usa ease-in, acelerando suavemente al principio.
• La propiedad height usa linear, manteniendo una velocidad constante.
• La propiedad background-color usa ease-out, desacelerando suavemente al final.

5.3. Función cubic-bezier personalizada en timing-function:

La función cubic-bezier permite definir curvas de tiempo personalizadas utilizando puntos de control. Esta es una herramienta poderosa para los desarrolladores que desean un control total sobre la aceleración y desaceleración de sus animaciones.

5.3.1. Características de la función de cubic-bezier:

• Una curva de Bézier cúbica es una función matemática utilizada para definir la suavidad de una animación.
• Toma cuatro valores entre 0 y 1, que representan puntos de control para la curva.
• Al ajustar los valores de los parámetros, se pueden crear diversos efectos de easing, como aceleración gradual, desaceleración suave o rebotes.

5.3.2. Sintaxis usando cubic-bezier:

transition-timing-function: cubic-bezier(x1, y1, x2, y2);Lenguaje del código: PHP (php)

• Los valores x y y son coordenadas en un plano cartesiano que determinan la forma de la curva. Los valores x deben estar entre 0 y 1.

5.3.3. Ejemplo usando cubic-bezier:

Efecto de los valores específicos (0,25, 0,1, 0,25, 1):

• Esta combinación específica crea una función de temporización que:
  • Comienza con una aceleración relativamente lenta ( 0.25, 0.1).
  • Aumenta gradualmente la velocidad ( 0.25).
  • Termina con una desaceleración suave hacia el estado final ( 1).

5.3.4. Herramientas para crear curvas de cubic-bezier:

Hay varias herramientas en línea que te permiten visualizar y crear curvas cubic-bezier, tales como:

• Cubic Bezier Generator
• Easing Functions Cheat Sheet.

6. Transition-delay.

La propiedad transition-delay en CSS especifica el tiempo que debe esperar una transición antes de comenzar. Esto permite controlar cuándo debe empezar una transición después de que se haya desencadenado un cambio de estado.

Es una de las cuatro propiedades principales que se utilizan en las transiciones CSS junto con transition-property, transition-duration y transition-timing-function.

6.1. Sintaxis de transition-delay:

En la sintaxis CSS transition-delay: time1, time2, ...;, los valores time1, time2, etc., representan retrasos que se aplican a las propiedades especificadas en la propiedad .

Cada valor de tiempo define el retraso en segundos (o milisegundos) que se aplicará antes de que comience la transición para la propiedad correspondiente. time2transition-property

Explicación detallada:

1. transition-delay:
   • Esta propiedad CSS define el retraso que se aplica antes de que comience una transición.
2. Múltiples retrasos:
   • La sintaxis permite especificar múltiples retrasos separados por comas.
3. Correspondencia con las propiedades:
   • Los retrasos se aplican en orden a las propiedades definidas en la propiedad transition-property.
4. Valores de tiempo:
   • Cada valor de time debe ser un valor numérico válido que represente el tiempo de retraso en segundos o milisegundos.

6.2. Ejemplo de transition-delay:

En este ejemplo:

• La propiedad transition-property indica que la transición se aplicará a los cambios en el color de fondo (background-color) y la transformación (transform) del elemento.
• El primer valor de retraso (0.2s) se aplicará al cambio en el color de fondo.
• El segundo valor de retraso (0.5s) se aplicará al cambio en la transformación.

6.3. Comportamiento de transition-delay cuando faltan valores:

Si hay menos retrasos especificados que propiedades en transition-property, las propiedades sin un valor de retraso explícito utilizarán el valor de retraso inicial (0 segundos por defecto). Por ejemplo:

transition-property: background-color, transform;
transition-delay: 0.2s;Lenguaje del código: HTTP (http)

En este caso, el color de fondo tendrá un retraso de 0.2 segundos, mientras que la transformación tendrá un retraso de 0 segundos (valor inicial).

En resumen:

• Los valores de time en transition-delay representan retrasos en segundos o milisegundos.
• Cada retraso se aplica a la propiedad correspondiente en transition-property.
• Los retrasos excedentes o faltantes se manejan según las reglas descritas anteriormente.

7. ¿Cómo usar las porpoiedades de transicion en CSS? paso a paso:

Antes de explicar los paso a paso, te dejamos estos conceptos que consideramos importantes para entender como funcionan y como usar estas propiedades:

1. ESTADO INICIAL:
   • Es el estado del elemento HTML con los estilos CSS aplicados antes de que ocurra la transición o transformación, por ejemplo, antes de pasar el cursor sobre dicho elemento.
2. APLICACIÓN DE PROPIEDADES DE TRANSICIÓN:
   • Se aplican estas propiedades, teniendo en cuenta las propiedades del estado inicial para su correcto funcionamiento.
3. ESTADO FINAL:
   • Se refiere a la aplicación de estilos CSS que representarán los estilo que tomará el elemento HTML luego de sufrir la transición.

Ahora si, vamos con los paso a paso:

PASO 1: Crear la estructura HTML:

Primero, crea tu estructura HTML básica. Aquí tienes un ejemplo con un div que tiene la clase .box.

    <div class="box"></div>Lenguaje del código: HTML, XML (xml)

PASO 2: Definir el estilo inicial en CSS:

A continuación, define el estilo inicial de tu elemento. Estas serían las propiedades que deseas animar.

.box {
    width: 100px;          /* Ancho inicial */
    height: 100px;         /* Altura inicial */
    background-color: red; /* Color de fondo inicial */
}Lenguaje del código: CSS (css)

PASO 3: Especificar las propiedades de la transición

Dentro del mismo selector .box, especifica las propiedades de transición. Esto incluye:

• transition-property Iobligatoria) para definir qué propiedades serán animadas.
• transition-duration (opcional pero recomendable) para definir la duración de la animación.
• transition-timing-function (opcional) para definir la curva de la animación.
• transition-delay para especificar (opcional) si debe haber un retraso antes de que comience la animación.

.box {
    width: 100px;          /* Ancho inicial */
    height: 100px;         /* Altura inicial */
    background-color: red; /* Color de fondo inicial */
    transition-property: width, height, background-color; /* Propiedades a animar */
    transition-duration: 1s;            /* Duración de la transición */
    transition-timing-function: ease;   /* Función de tiempo de la transición */
    transition-delay: 0s;               /* Retraso antes de la transición */
}Lenguaje del código: CSS (css)

PASO 4: Definir el estado final:

Define el estilo para el estado final, generalmente utilizando una pseudoclase CSS como :hover (propiedades que al usar junto al selector HTML que deseamos, produce un cambio de estado al pasar el cursor sobre dicho elemento HTML).

.box:hover {
    width: 200px;          /* Nuevo ancho */
    height: 200px;         /* Nueva altura */
    background-color: blue; /* Nuevo color de fondo */
}Lenguaje del código: CSS (css)

En este ejemplo, cambiamos el ancho, la altura y el color de fondo cuando el usuario pasa el cursor sobre el div.

8. Sintaxis Shorthand para transiciones en CSS

Esta sintaxis se aplica usando la propiedad transition en CSS, la cual permite combinar todas las propiedades individuales de transición (transition-property, transition-duration, transition-timing-function, y transition-delay) en una sola declaración. Esto simplifica y hace más legible el código CSS.

SINTAXIS SHORTHAND:

transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay];Lenguaje del código: CSS (css)

EJEMPLO BÁSICO DE LA SINTAXIS SHORTHAND:

Primero vemos como sería una transición en CSS de la manera individual (como vimos hasta aquí).

Y ahora aplicamos el mismo comportamiento usando la sintaxis Shorthand:

EJEMPLO MÁS COMPLETO DE SHORTHAND USANDO VARIAS PROPIEDADES:

Sintaxis individual:

Sintaxis con shorthand:

8.1. Detalles sobre la sintaxis Shorthand

1. transition-property:
   • La propiedad que se va a animar. Puede ser un nombre de propiedad específico o all para animar todas las propiedades animables.
2. transition-duration:
   • La duración de la transición. Debe ser un valor en segundos (s) o milisegundos (ms).
3. transition-timing-function:
   • La función de tiempo que define la velocidad de la transición. Los valores comunes son ease, linear, ease-in, ease-out, ease-in-out, o una función cubic-bezier personalizada.
4. transition-delay:
   • El retraso antes de que la transición comience. Debe ser un valor en segundos (s) o milisegundos (ms).

9. Consejos para crear transiciones CSS exitosas.

1. Especificar transiciones solo para propiedades necesarias

Especifica solo las propiedades que necesitas animar para evitar animar todas las propiedades, lo cual puede afectar el rendimiento.

2. Usar will-change para mejorar el rendimiento

La propiedad will-change le dice al navegador qué propiedades cambiarán, permitiéndole optimizar el renderizado.

3. Usar transform y opacity en lugar de otras propiedades

Las propiedades transform y opacity son las más eficientes para animar, ya que no provocan repaints (repintado) ni reflows (reflujo).

4. Definir duraciones razonables

Las transiciones muy rápidas o muy lentas pueden afectar la experiencia del usuario. Ajusta las duraciones para que sean razonables y perceptibles.

5. Evitar animar propiedades de alto costo

Evita animar propiedades que requieren mucho procesamiento, como width, height, margin, padding, y box-shadow.

6. Combinar propiedades de transición

Combina todas las propiedades de transición en una sola declaración (sintaxis Shorthand) para mantener el código limpio y fácil de leer.

7. Evitar retrasos innecesarios

Usa transition-delay con moderación. Retrasos excesivos pueden hacer que las transiciones se sientan lentas y torpes.

8. Probar en diferentes dispositivos

Asegúrate de probar tus transiciones en diferentes dispositivos y navegadores para garantizar una experiencia consistente.

10. Herramientas para crear transiciones en CSS.

1. Cubic Bezier Generator:
   • Herramienta para crear curvas cubic-bezier personalizadas y ver cómo se comportan en tiempo real.
2. Animate.css:
   • Biblioteca de animaciones CSS listas para usar.
3. Keyframes.app:
   • Herramienta en línea para crear animaciones CSS avanzadas con una interfaz gráfica.

11. Preguntas frecuentes y resumen sobre transiciones en CSS