Estilos CSS: Transiciones, transformaciones y rendimiento

Las transiciones y transformaciones son la puerta de entrada a las interfaces animadas. Una transición suaviza el cambio entre dos estados; una transformación altera la geometría visual de un elemento sin afectar el layout. Bien aplicadas, mejoran la percepción de calidad y guían la atención del usuario. Mal aplicadas, generan jank y consumen batería. La diferencia está en entender qué propiedades son baratas de animar y por qué.

Esta es la séptima entrega de la serie Estilos CSS. Cubriremos la propiedad transition y sus timing functions, las funciones de transform en 2D y 3D, y el pipeline de renderizado que explica por qué transform y opacity son las propiedades óptimas para animar.

Transiciones

Una transición interpola el cambio de una propiedad entre su valor inicial y final a lo largo del tiempo. Suele combinarse con pseudo-clases como :hover o :active. Se controla con cuatro propiedades:

transition-property: background-color, transform;
transition-duration: 0.3s, 0.6s;
transition-timing-function: ease, linear;
transition-delay: 0s, 100ms;

• transition-property — qué propiedades se animan (usa all para todas).
• transition-duration — cuánto dura la interpolación.
• transition-timing-function — cómo se distribuye el movimiento en el tiempo.
• transition-delay — cuánto espera antes de empezar (opcional).

.boton { transition: background-color 0.3s ease, transform 0.3s ease; }
.boton:hover { background-color: #16828d; transform: translateY(-3px); }

Timing functions

La timing function define cómo se reparte el movimiento en el tiempo. Existen valores predefinidos —linear, ease, ease-in, ease-out, ease-in-out— donde el eje X representa el tiempo y el eje Y el progreso del cambio.

Todas son curvas de Bézier, y puedes definir la tuya con la función cubic-bezier():

.box { transition: transform 0.6s cubic-bezier(0.45, 0.05, 0.55, 0.95); }

También puedes hacer el cambio en pasos discretos con steps(), útil para animaciones tipo sprite o efectos de “tecleo”:

.box { transition: all 1s steps(3); }

Transformaciones

La propiedad transform altera la geometría visual de un elemento mediante cuatro operaciones:

• scale() — escala el tamaño.
• rotate() — rota el elemento.
• translate() — lo desplaza.
• skew() — lo inclina/estira.

Rotación

rotate() gira el elemento. Los valores positivos giran en sentido horario; los negativos, antihorario.

.giro { transform: rotate(15deg); }

Traslación

translate(x, y) mueve el elemento en ambos ejes sin afectar el flujo. Los valores positivos lo desplazan a la derecha y hacia abajo.

.mover { transform: translate(40px, 10px); }

Escala

scale() redimensiona: valores entre 0 y 1 encogen, mayores que 1 agrandan.

.crecer { transform: scale(1.3); }

Inclinación

skew(x, y) deforma el elemento inclinándolo respecto a los ejes.

.inclinar { transform: skew(-12deg); }

Punto de referencia: transform-origin

Toda transformación se aplica desde un punto de referencia, que por defecto es el centro del elemento. transform-origin lo reubica:

.giro { transform-origin: left center; } /* equivale a 0% 50% */

Combinar transformaciones

Puedes encadenar varias funciones separándolas por espacios. Se aplican de derecha a izquierda, lo que afecta el resultado final:

.tarjeta { transform: rotate(15deg) translate(20px, 0); }

El pipeline de renderizado

Para escribir animaciones eficientes hay que entender cómo el navegador dibuja una página. El proceso tiene tres etapas clave:

1. Layout — el navegador calcula las dimensiones y posiciones de todos los elementos. Cualquier cambio de tamaño o posición dispara un recálculo completo (reflow).
2. Paint — pinta en memoria los píxeles de cada elemento (colores, bordes, sombras), posiblemente en capas separadas.
3. Composición — combina las capas pintadas para mostrarlas en pantalla.

flowchart LR
    A[JS / CSS] --> B[Layout]
    B --> C[Paint]
    C --> D[Composición]

La clave del rendimiento: algunas propiedades, como transform y opacity, solo afectan la etapa de composición. No requieren recalcular el layout ni repintar, por lo que son las propiedades óptimas para animar de forma fluida a 60 fps.

Transformaciones en 3D

transform también opera en tres dimensiones. Puedes rotar sobre cualquier eje con rotateX(), rotateY() y rotateZ(). El efecto depende de la perspectiva: la distancia simulada entre el observador y el elemento. A menor perspectiva, más pronunciado el efecto 3D.

Hay dos formas de aplicarla:

/* 1. Función dentro de transform (afecta solo a ese elemento) */
.box { transform: perspective(200px) rotateX(30deg); }

/* 2. Propiedad en el contenedor (perspectiva compartida) */
.row { perspective: 200px; }
.box { transform: rotateX(30deg); }

Una rotación de 180° voltea el elemento como un espejo. La propiedad backface-visibility controla si la cara trasera es visible, lo que habilita efectos como las tarjetas que se voltean. Un recurso clásico para profundizar es Intro to CSS 3D transforms.

Conclusión

Las transiciones suavizan los cambios de estado y las transformaciones manipulan la geometría sin tocar el layout. La regla de oro del rendimiento es animar transform y opacity, que solo afectan la etapa de composición. Con curvas de Bézier afinadas y un uso consciente del pipeline, tus animaciones serán fluidas y eficientes.