⏱️ Lectura: 6 min
Hay un tipo de efecto visual en la web que parece hecho con WebGL, Canvas o After Effects. Letras que se animan en secuencia, GIFs recortados dentro de formas, colores que fluyen en olas. La sorpresa es que muchos de estos efectos se construyen con solo tres herramientas CSS: clip-path, steps() y las custom properties.
📑 En este artículo
El artículo Make GIFs Into Letters with Clip Paths de Frontend Horse analiza un pen viral de Ryan Mulligan llamado «Supa Dupa Fly» que combina las tres. En esta guía te explico cómo funciona cada una, cómo se integran, y cuándo tiene sentido usar esta técnica en producción.
clip-path: recortar regiones arbitrarias
La propiedad clip-path define qué parte de un elemento se muestra y qué parte queda oculta. Podés usar formas predefinidas (círculos, elipses, rectángulos) o polígonos arbitrarios con una serie de puntos.
.forma-triangular {
clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.forma-circular {
clip-path: circle(50% at 50% 50%);
}
.forma-personalizada {
clip-path: polygon(0 0, 100% 0, 100% 70%, 30% 70%, 30% 100%, 0 100%);
}Lo importante: el elemento sigue ocupando su espacio original en el layout, pero solo se pinta la región definida por el clip-path. Los clicks, hovers y selección de texto también respetan el recorte.
Herramientas útiles para clip-path
- Clippy — generador visual de polígonos. Arrastrás puntos y te da el CSS.
- CSS Portal Clip-Path Generator — alternativa con más formas predefinidas.
steps(): animaciones stop-motion
La función steps(n) es una animation-timing-function que divide la animación en n saltos discretos en vez de interpolar suavemente entre keyframes. Es la diferencia entre una transición fluida y un efecto tipo spritesheet.
/* Interpolación suave - default */
.suave { animation: mover 2s ease infinite; }
/* Saltos discretos - efecto stop-motion */
.stopmotion { animation: mover 2s steps(8) infinite; }El uso clásico de steps() es animar sprites de videojuegos: si tenés una hoja con 8 cuadros de un personaje caminando, steps(8) los recorre sin interpolar, dando la sensación de animación tradicional 2D.
También sirve para efectos de texto tipo máquina de escribir, parpadeos de cursor, o contadores de números.
Custom properties para escalonar animaciones
Las custom properties de CSS (--i, --duration, etc.) permiten que múltiples elementos compartan la misma animación pero arranquen en frames distintos. El truco está en combinar animation-delay con valores negativos calculados.
.elemento {
animation: onda 2s steps(6) infinite;
/* Cada --i corre la animación un poco más adelante en el loop */
animation-delay: calc(var(--i) * -0.2s);
}Un animation-delay negativo no retrasa el arranque — al contrario, lo adelanta, como si la animación ya hubiera estado corriendo. Con esto lográs que cada elemento parezca estar en una fase distinta del mismo ciclo continuo.
Combinando todo: el efecto Supa Dupa Fly
Cuando juntás las tres herramientas obtenés efectos que parecen imposibles sin JavaScript. Este ejemplo replica la idea central del pen de Ryan Mulligan: letras que son realmente GIFs recortados, con colores cambiando en secuencia.
El CSS
.letra {
--duration: 2s;
position: relative;
display: inline-block;
width: 1em;
height: 1em;
background: url('mi-gif.gif') center / cover;
animation: colores var(--duration) steps(6) infinite;
animation-delay: calc(var(--i) * -0.2s);
/* La forma de la letra, recortada con clip-path */
clip-path: polygon(0 0, 100% 0, 100% 100%, 20% 100%, 0 70%);
}
@keyframes colores {
0% { filter: hue-rotate(0deg); }
100% { filter: hue-rotate(360deg); }
}El HTML
<h1 class="titulo">
<span class="letra" style="--i: 0">C</span>
<span class="letra" style="--i: 1">S</span>
<span class="letra" style="--i: 2">S</span>
</h1>Cada letra tiene el mismo GIF de fondo, el mismo ciclo de color, pero empieza en un frame distinto gracias a --i. El resultado visual parece una animación compleja coordinada, pero son tres reglas CSS.
Performance y accesibilidad
Las animaciones continuas tienen costo real: consumen CPU, GPU y batería, especialmente en dispositivos móviles. Algunas consideraciones importantes:
- Propiedades baratas —
transformyopacityse animan en el GPU y son casi gratuitas.filter: hue-rotatees más caro pero aceptable. - Propiedades caras — animar
width,height,top,lefto cualquier cosa que dispare layout es lento. Evitalas en animaciones continuas. - clip-path en GPU — la mayoría de navegadores modernos aceleran clip-path por hardware, pero polígonos muy complejos pueden degradar performance.
Respeto por prefers-reduced-motion
Una cantidad importante de usuarios activa «reducir movimiento» en su sistema operativo por razones de accesibilidad o salud (vértigo, mareo, sensibilidad a animaciones). Siempre respetá esa preferencia:
@media (prefers-reduced-motion: reduce) {
.letra {
animation: none;
}
}Cuándo usar esta técnica
- Ideal para — landings, portafolios personales, microsites, páginas de campaña, headers de marca. Donde un efecto visual genera impacto y no afecta la experiencia central.
- Evitar en — dashboards, interfaces productivas, apps de trabajo. Las animaciones continuas distraen y consumen recursos.
- Con cuidado — blog posts destacados, hero sections. Funciona si la animación tiene un punto final claro, no loop infinito.
📖 Resumen en Telegram: Ver resumen
Preguntas frecuentes
¿clip-path funciona en todos los navegadores?
Sí, en todos los navegadores modernos desde 2020. Chrome, Firefox, Safari, Edge lo soportan completamente. Internet Explorer 11 no lo soporta, pero IE11 está oficialmente muerto.
¿Puedo animar clip-path?
Sí, clip-path es animable siempre que la forma antes y después tenga la misma estructura (por ejemplo, polygon a polygon con la misma cantidad de puntos). Si cambia el tipo de forma, no se puede interpolar y el navegador hace un salto brusco.
¿Qué es mejor: steps() o keyframes manuales?
Depende. steps() es perfecto cuando la animación es uniforme (frames iguales de duración). Si necesitás control fino — que un frame dure más que otro — es mejor definir cada keyframe manualmente con porcentajes.
¿Puedo usar esto en React o Vue?
Absolutamente. Es CSS puro. Las custom properties como --i se pasan como style inline en React (style={{'--i': index}}) o con :style en Vue. Funciona idéntico.
¿Dónde puedo aprender más CSS avanzado así?
Frontend Horse es la mejor fuente en 2026 para este tipo de técnicas. También CSS-Tricks, el Discord de CSS y el canal de YouTube de Kevin Powell. Ver pens virales en CodePen y tratar de recrearlos es el ejercicio más efectivo para aprender.
Referencias
- Make GIFs Into Letters with Clip Paths — Frontend Horse — el análisis original que inspiró este artículo.
- clip-path — MDN Web Docs — referencia oficial de la propiedad.
- steps() — MDN Web Docs — documentación de la función de timing.
- Clippy — generador visual de clip-path — herramienta para diseñar polígonos interactivamente.
- Supa Dupa Fly — CodePen de Ryan Mulligan — el pen original que demuestra la técnica.
📱 ¿Te gusta este contenido? Únete a nuestro canal de Telegram @programacion donde publicamos a diario lo más relevante de tecnología, IA y desarrollo. Resúmenes rápidos, contenido fresco todos los días.
0 comentarios