Principios de Animación WebPrinciples of Web Animation
Cómo hacer que un sitio web se sienta vivo.How to make websites feel alive.
IntroducciónIntroduction
Toda animación en la web puede construirse a partir de unas pocas propiedades y principios visuales.
Every web animation can be built from a few properties and visual principles.
Podés crear casi cualquier cosa que imagines, desde una transición sutil hasta un efecto interactivo complejo. Por más sofisticado que parezca, generalmente es una combinación de estos recursos.
You can create almost anything you imagine, from a subtle transition to a complex interactive effect. No matter how sophisticated it looks, it's usually a combination of these building blocks.
CombinandoCombining
También podés combinarlos para crear efectos más interesantes.
You can even mix and match them to create more interesting effects.
Timing FunctionsTiming Functions
Define cómo progresa la animación en el tiempo: acelerando, desacelerando o siguiendo una curva personalizada.
Defines how the animation progresses over time: speeding up, slowing down, or following a custom curve.
Misma duración, más rápido o lento en cada etapa.
Same duration, faster or slower at different stages.
Cubic BezierCubic Bezier
Podés ajustar la curva para crear tus propios timings.
You can adjust the curve to create your own timing function.
.element {
transition: transform 1.8s cubic-bezier(0.25, 0.1, 0.25, 1);
}cubic-bezier() define cómo progresa una animación entre su inicio y su final. x1 y x2 determinan cuándo cambia la velocidad, mientras que y1 y y2 determinan cuánto acelera o desacelera.
cubic-bezier() defines how an animation progresses between its start and end. x1 and x2 determine when the speed changes, while y1 and y2 determine how much it accelerates or decelerates.
TriggersTriggers
Las animaciones necesitan algo que las dispare. Algunos de los más comunes son hover, click, focus y scroll.
Animations need something to trigger them. Some of the most common ones are hover, click, focus, and scroll.
Hover
Click
Hover + Click
Scroll
Scroll
Transition y KeyframesTransition and Keyframes
transition anima una propiedad de un estado a otro. @keyframes te permite controlar todo el recorrido definiendo distintos estados en porcentajes.
transition animates a property from one state to another. @keyframes lets you control the whole path by defining different states at specific percentages.
transition se ejecuta cuando el valor de una propiedad cambia, por ejemplo con :hover. Permite definir cuánto dura ese cambio y cómo se suaviza.
A transition runs when a property value changes, for example on :hover. You define how long the change takes and how it's eased
En @keyframes, 0% y 100% marcan el inicio y el final. Podés agregar porcentajes intermedios para controlar el recorrido y repetir la animación con infinite.
In @keyframes, 0% and 100% mark the start and end. You can add intermediate percentages to control the path and repeat the animation with infinite.
SVGSVG
Los SVG permiten crear y animar gráficos directamente en el navegador. Podés animar propiedades como transform y opacity, modificar sus trazos y transformar sus formas para crear distintos tipos de efectos.
SVG can be created and animated directly in the browser. You can animate properties like transform and opacity, modify their strokes, and transform their shapes to create different effects.
Un elemento puede seguir una trayectoria definida por un <path>, utilizando su geometría como recorrido.
An element can follow a trajectory defined by a <path>, using its geometry as the route.
Podés controlar qué parte de un trazo es visible con stroke-dasharray y stroke-dashoffset, creando el efecto de que una línea se dibuja progresivamente.
You can control which part of a stroke is visible with stroke-dasharray and stroke-dashoffset, creating the effect of a line being drawn progressively.
Un <path> puede transformarse entre distintas formas, permitiendo crear animaciones de morphing.
A <path> can transform between different shapes, allowing you to create morphing animations.
EjemplosExamples
Combinando lo que vimos hasta acá podés armar animaciones más pulidas.
Combining what we've seen so far, you can create more polished animations.
O armar escenas animadas.
Or build entire animated scenes.
Buenas prácticas a seguirBest practices to follow
- Usá
prefers-reduced-motionpara respetar las preferencias de movimiento del usuario. - Pausá las animaciones que están fuera del viewport con
IntersectionObserverpara ahorrar recursos. - Priorizá animar
transformyopacitycuando sea posible, ya que el navegador suele manejarlas de forma más eficiente que las propiedades que afectan el layout. - A veces CSS no es suficiente. Para animaciones más complejas o con mayor control, podés usar JavaScript o herramientas como
Motion y GSAP.
- Menos es más: una animación bien elegida comunica mejor que varias compitiendo por la atención.
- Use
prefers-reduced-motionto respect user motion preferences. - Prefer animating
transformandopacitywhen possible, since they can often be handled more efficiently by the browser than layout-affecting properties. - Pause off-screen animations with
IntersectionObserverto save resources. - Sometimes CSS isn’t enough. For more complex animations or finer control, you can use JavaScript or tools like Motion and
- Less is more: a well-chosen animation communicates better than several competing for attention.
Si te quedaste con hambre de más, te recomiendo seguir a Emil Kowalski y a
Josh W. Comeau. Son referentes en cuanto a calidad y motion.
If you’re still hungry for more, I recommend checking out Emil Kowalski and
Josh W. Comeau. They’re at the top when it comes to quality and motion.