Cómo usar: Generador de efectos hover CSS
- Elige un preajuste de hover, como Grow, Lift, Tilt o Buzz.
- Cambia la vista previa entre botón, tarjeta, icono y texto, y pasa el cursor por encima para probarlo.
- Ajusta la duración, el easing y los keyframes hasta que se sienta bien.
- Copia el CSS: también se aplica con
:focus-visiblepara usuarios de teclado.
Animación hover frente a transición
Para un cambio simple de A a B, basta con una transition, que se revierte con suavidad cuando el puntero sale del elemento. Las animaciones con keyframes en :hover brillan cuando el efecto tiene varios pasos (un rebote, una vibración, un balanceo) o debe repetirse mientras está el cursor encima. Este generador produce los selectores :hover y :focus-visible, para que los usuarios de teclado reciban la misma respuesta, y mantiene los efectos sutiles: entre 150 y 300 ms se siente ágil.
Qué puedes crear
- Línea de tiempo de keyframes: añade todos los keyframes que quieras, arrástralos a nuevos porcentajes y asigna a cada uno su propio easing.
- Propiedades: traslación X/Y, rotación, rotación 3D X/Y, escala, sesgo, opacidad, desenfoque, brillo (box-shadow), color de fondo y radio de borde. Los valores que faltan se interpolan, así que las transformaciones nunca saltan.
- Disparadores: al cargar, al pasar el cursor, al hacer clic, al entrar en la vista o una animación dirigida por el scroll solo con CSS.
- Escalonado: anima una lista elemento tras elemento con una única propiedad personalizada de CSS.
- Inspección: pausa, recorre fotograma a fotograma, reduce la velocidad a ¼ y activa la piel de cebolla para ver todos los keyframes a la vez.
- Exportación: shorthand o longhand de CSS, HTML, JavaScript, Tailwind v3 y v4, un mixin de SCSS, un archivo de demo independiente o un enlace para compartir.
El shorthand de animation
| Parte | Ejemplo | Significado |
|---|---|---|
| nombre | fade-in-up | La regla @keyframes que se ejecuta |
| duración | 0.6s | Duración de un ciclo |
| función de temporización | cubic-bezier(.33,1,.68,1) | Curva de velocidad entre keyframes |
| retardo | 0.2s | Espera antes de empezar; los valores negativos empiezan a mitad del recorrido |
| número de repeticiones | infinite | Cuántos ciclos se ejecutan |
| dirección | alternate | Reproduce hacia atrás en cada ciclo alterno |
| modo de relleno | both | Mantiene el primer fotograma antes y el último después de reproducirse |
Accesibilidad
Algunas personas se marean o sienten náuseas con el movimiento. Con Respetar prefers-reduced-motion activado, el CSS desactiva la animación para los visitantes que hayan activado “reducir movimiento” en su sistema operativo. Evita parpadeos de más de tres veces por segundo y mantén las animaciones en bucle sutiles, o da a los usuarios una forma de pausarlas.
Consejos de rendimiento
Anima transform y opacity en lugar de top, left, width o margin, que fuerzan un recálculo del layout en cada fotograma. Añade will-change solo a los elementos que están a punto de animarse. Ajusta tu easing con el generador cubic-bezier, añade un spinner con el generador de loaders CSS y combina las animaciones con sombras o degradados.
También se busca como: efectos hover css, animación hover css, efecto hover botón, generador hover css, efecto hover tarjeta, hover effects css, keyframes hover css.
Herramientas que combinan con: Generador de efectos hover CSS
- Generador de animaciones CSS — Diseña animaciones CSS sobre una línea de tiempo real de keyframes.
- Generador de Keyframes CSS — Un editor visual para @keyframes.
- Generador de Glassmorphism — Diseña una tarjeta de cristal esmerilado con controles en vivo y copia CSS compatible con todos los navegadores: con el prefijo -webkit-backdrop-filter y un fallback para navegadores antiguos.
- Calculadora de abrazaderas — Introduce un tamaño mínimo y máximo y el rango de la ventana de visualización: obtendrás un valor fácil de ajustar con el zoom clamp() con una explicación de los cálculos, una vista previa en directo y una escala completa y fluida de tipo o espacio.
Preguntas frecuentes
¿Puedo usar el CSS generado gratis?
¿Puedo editar una animación que ya tengo?
¿Cómo inicio la animación cuando el elemento entra en la vista?
animation-timeline: view(), sin JavaScript, en los navegadores que lo soportan.¿Funciona con Tailwind CSS?
tailwind.config.js para v3 y un bloque @theme para v4, así puedes usar la animación como una clase animate-*.¿Qué propiedades son mejores para animar con fluidez?
transform y opacity se ejecutan en el compositor de la GPU y se mantienen fluidas incluso en móviles lentos. El desenfoque, las sombras, los colores y el radio de borde cuestan más, así que úsalos con moderación en elementos grandes.