Para crear animaciones en CSS tienes dos herramientas habituales: transition suaviza un cambio entre estados y animation utiliza una secuencia definida con @keyframes. La elección depende de qué inicia el movimiento y cómo debe desarrollarse.
Para un efecto al pasar el ratón, una transición suele ser suficiente. Para una entrada que se reproduce al aparecer el elemento en el documento, puedes definir keyframes. Añade movimiento cuando ayude a entender la interacción, no para distraer de ella.
Ejemplo de transición al interactuar
<a class="enlace-tarjeta" href="/css/">Aprender CSS</a>
<style>
.enlace-tarjeta {
display: inline-block;
padding: 18px 24px;
border-radius: 12px;
color: #fff;
background: #1d4ed8;
text-decoration: none;
transition: transform .2s ease, background-color .2s ease;
}
.enlace-tarjeta:hover,
.enlace-tarjeta:focus-visible {
transform: translateY(-3px);
background: #1e40af;
}
.enlace-tarjeta:focus-visible {
outline: 3px solid #0f172a;
outline-offset: 4px;
}
</style>El enlace mantiene su función de navegación y ofrece un estado para teclado. La transición se declara en el estado base para suavizar también el regreso, no solo la entrada.
Ejemplo de animación con keyframes
<article class="aviso">
<h2>Tu proyecto está listo</h2>
<p>Revisa los últimos detalles antes de publicarlo.</p>
</article>
<style>
.aviso {
padding: 24px;
background: #eef6ff;
border-radius: 14px;
animation: entrada .45s ease-out both;
}
@keyframes entrada {
from { opacity: 0; transform: translateY(16px); }
to { opacity: 1; transform: translateY(0); }
}
</style>entrada identifica la secuencia. La duración es de 0,45 segundos y both aplica las reglas de relleno antes y después de la ejecución cuando corresponda. No hay JavaScript ni una librería detrás del ejemplo.
Propiedades que debes reconocer
- animation-duration: duración de cada ciclo.
- animation-delay: espera inicial.
- animation-iteration-count: número de repeticiones.
- animation-direction: sentido de reproducción.
- animation-timing-function: ritmo del cambio.
- animation-fill-mode: aplicación de estados fuera del intervalo activo.
La forma abreviada animation puede restablecer valores que no escribas. Si una regla deja de funcionar al añadir otra, revisa las propiedades calculadas.
Cómo respetar el movimiento reducido
Añade esta regla después de los ejemplos:
@media (prefers-reduced-motion: reduce) {
.aviso { animation: none; }
.enlace-tarjeta { transition: none; }
.enlace-tarjeta:hover,
.enlace-tarjeta:focus-visible { transform: none; }
}La información permanece visible sin necesitar el movimiento. Si utilizas animaciones largas o continuas, valora además un control para pausarlas. Evita parpadeos y grandes desplazamientos inesperados.
Rendimiento y errores frecuentes
Transform y opacity suelen ser buenas opciones para efectos sencillos, pero debes medir el resultado en la página real. Animar tamaños o posiciones que alteran la distribución puede requerir más trabajo del navegador. No añadas will-change a todos los elementos sin comprobar su necesidad.
Si no ves la animación, revisa que el nombre de keyframes coincida, que la duración no sea cero y que otra regla no sobrescriba transform o animation. Hover no es una interacción fiable en todas las pantallas táctiles.
Preguntas frecuentes
¿Se repite al hacer scroll?
No por defecto. El ejemplo se ejecuta al aplicarse la animación; vincularla a la visibilidad requiere otra configuración.
¿Una animación hace que cargue más rápido la web?
No. Puede mejorar una interacción, pero no sustituye la optimización de recursos y renderizado.
Para más componentes, consulta los snippets de botones y sigue en la ruta de CSS.
Referencia técnica: documentación de MDN.
