¿Has notado lo agradable que es usar las aplicaciones de Tinkoff, Yandex o Alfa-Bank? Los botones responden a las pulsaciones, los elementos aparecen suavemente, las descargas no molestan, sino que, por el contrario, son agradables a la vista. Esto no es magia ni un ejército de diseñadores. Se trata de un conjunto de técnicas específicas que tú también puedes dominar.
¿Por qué es importante?
El usuario no dirá: «¡Vaya, hay una transición con cubic-bezier!». Pero dirá: "Qué aplicación tan agradable" o "Parece algo barato". Las animaciones de alta calidad funcionan a nivel subconsciente:
Crean una sensación de velocidad — incluso si el servidor es lento
Dan retroalimentación — el usuario entiende que su acción se ha tenido en cuenta
Reducen la carga cognitiva — las transiciones suaves ayudan al cerebro a entender lo que está sucediendo
Son fiables — los detalles muestran que el equipo se preocupa por el producto
1. Esqueletos en lugar de spinners
¿Qué pasa con los spinners?
El círculo giratorio no da ninguna información. El usuario no sabe cuánto tiempo esperar y qué se está cargando.
Qué hacen en Tinkoff:
Muestran el «fantasma» del contenido futuro: bloques grises en lugar de texto, imágenes, botones. Esto se llama skeleton screen o esqueleto.
.skeleton {
background: linear-gradient(
90deg,
#f0f0f0 25%,
#e0e0e0 50%,
#f0f0f0 75%
);
background-size: 200% 100%;
animation: loading 1.5s infinite;
border-radius: 4px;
}
@keyframes loading {
0% {
background-position: 200% 0;
}
100% {
background-position: -200% 0;
}
}Por qué funciona:
El cerebro percibe el esqueleto como «el contenido ya casi se ha cargado», y no como «tendré que esperar no se sabe cuánto». Según la investigación, los usuarios estiman que el tiempo de carga con esqueletos es un 30-40% más rápido que con los spinners.
2. Respuesta táctil a las acciones
Efecto de pulsar el botón:
Cuando pulsas un botón en la aplicación Yandex, este se hunde ligeramente. Esto imita un botón físico.
.button {
background: #ffdd2d;
border: none;
padding: 12px 24px;
border-radius: 8px;
font-weight: 600;
cursor: pointer;
transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.button:hover {
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}
.button:active {
transform: translateY(0);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}Efecto dominó (ola):
Al hacer clic en el punto de presión, la onda se dispersa. Este es un truco de Material Design, pero todo el mundo lo usa.
function createRipple(event) {
const button = event.currentTarget;
const circle = document.createElement('span');
const diameter = Math.max(button.clientWidth, button.clientHeight);
const radius = diameter / 2;
circle.style.width = circle.style.height = `${diameter}px`;
circle.style.left = `${event.clientX - button.offsetLeft - radius}px`;
circle.style.top = `${event.clientY - button.offsetTop - radius}px`;
circle.classList.add('ripple');
const ripple = button.getElementsByClassName('ripple')[0];
if (ripple) {
ripple.remove();
}
button.appendChild(circle);
}3. Transiciones inteligentes entre estados
Mal:
El contenido simplemente desaparece y aparece. Rápido. Barato.
Bien:
Utilizamos transiciones suaves con transform y opacity.
.fade-enter {
opacity: 0;
transform: translateY(10px);
}
.fade-enter-active {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.fade-enter-to {
opacity: 1;
transform: translateY(0);
}Regla de oro: Cualquier cambio en el DOM debe ser animado. Sin apariciones o desapariciones bruscas.
4. Microanimaciones de formas
Al enfocar en input:
.input {
border: 2px solid #e0e0e0;
padding: 12px;
width: 100%;
transition: all 0.2s ease;
outline: none;
}
.input:focus {
border-color: #ffdd2d;
box-shadow: 0 0 0 4px rgba(255, 221, 45, 0.1);
}
.input-label {
position: absolute;
left: 12px;
top: 12px;
color: #999;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
pointer-events: none;
}
.input:focus + .input-label,
.input:not(:placeholder-shown) + .input-label {
top: -8px;
left: 8px;
font-size: 12px;
background: white;
padding: 0 4px;
color: #ffdd2d;
}Validación con animación:
.input-error {
border-color: #ff3333;
animation: shake 0.4s;
}
@keyframes shake {
0%, 100% { transform: translateX(0); }
10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
20%, 40%, 60%, 80% { transform: translateX(5px); }
}5. Barras de progreso que no molestan
Barra de progreso deficiente: simplemente se mueve. Aburrido.
Buena barra de progreso: suave, con un ligero brillo, muestra etapas específicas.
.progress-bar {
width: 100%;
height: 6px;
background: #f0f0f0;
border-radius: 10px;
overflow: hidden;
position: relative;
}
.progress-fill {
height: 100%;
background: linear-gradient(90deg, #ffdd2d, #ffc700);
border-radius: 10px;
transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
box-shadow: 0 0 10px rgba(255, 221, 45, 0.5);
}6. Ventanas modales con apariencia inteligente
Incorrecto: la ventana simplemente aparece.
Correcto: el fondo se oscurece, la ventana aparece con un ligero escalado y movimiento de abajo hacia arriba.
.modal-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0);
display: flex;
align-items: center;
justify-content: center;
transition: background 0.3s ease;
pointer-events: none;
}
.modal-overlay.active {
background: rgba(0, 0, 0, 0.5);
pointer-events: all;
}
.modal {
background: white;
border-radius: 16px;
padding: 24px;
max-width: 500px;
width: 90%;
transform: scale(0.9) translateY(20px);
opacity: 0;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.modal-overlay.active .modal {
transform: scale(1) translateY(0);
opacity: 1;
}
7. Tarjetas con efectos de desplazamiento
Tarjetas de productos, publicaciones, proyectos: deben reaccionar al desplazamiento del cursor:
.card {
background: white;
border-radius: 12px;
padding: 20px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
cursor: pointer;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}
.card img {
transition: transform 0.3s ease;
}
.card:hover img {
transform: scale(1.05);
}8. Indicadores de carga para acciones
Cuando el usuario hace clic en «Enviar», el botón debe mostrar que el proceso está en curso:
.submit-button {
position: relative;
min-width: 120px;
transition: all 0.3s ease;
}
.submit-button.loading {
pointer-events: none;
}
.spinner {
width: 20px;
height: 20px;
animation: rotate 1s linear infinite;
}
@keyframes rotate {
100% { transform: rotate(360deg); }
}9. Toasts y notificaciones
Principios:
Aparecen en el lateral (arriba a la derecha o a la izquierda)
Entran suavemente
Desaparecen automáticamente después de 3-5 segundos
Se puede cerrar manualmente
.toast {
position: fixed;
top: 20px;
right: -300px;
background: white;
padding: 16px 20px;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
min-width: 250px;
transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.toast.show {
right: 20px;
}10. Principios importantes de las animaciones
Timing functions (funciones de tiempo):
No uses simplemente ease o linear. Estudia cubic-bezier:
ease-in-out — se acelera y desacelera suavemente
cubic-bezier(0.4, 0, 0.2, 1) — Material Design easing, muy agradable
cubic-bezier(0.25, 0.46, 0.45, 0.94) — easeOutQuad para animaciones rápidas
Duración:
Microinteracciones (hover, clics): 100-200ms
Transiciones entre estados: 200-300ms
Ventanas modales, cajones: 300-400ms
Animaciones de páginas: 400-600ms
Más de 600 ms ya es demasiado lento.
Regla de los 60 FPS:
Anima solo las propiedades que no causan reflujo:
✅
transform,opacity❌
width,height,top,left,margin
Conclusión
Las animaciones de calidad no tienen que ver con la complejidad, sino con los detalles. No necesitas aprender 3D o física. Solo necesitas:
Añadir suavidad a todo
Dar retroalimentación sobre las acciones
Utilizar las funciones de tiempo correctas
Ser consistente
Empieza con un botón. Haz que sea agradable. Luego, otro. Luego los formularios. Luego las tarjetas. En un mes, tu aplicación tendrá un aspecto increíble.
Todo esto y mucho más se puede estudiar en Codice - en detalle, con tareas prácticas y ejemplos reales. No solo analizamos la teoría, sino que también mostramos cómo funciona todo en proyectos reales.
Y si necesitas ayuda, tienes preguntas o quieres discutir el código, tenemos una gran comunidad activa en Canal de Telegram¡Más de 2000 desarrolladores que siempre te ayudarán, aconsejarán y apoyarán!