Cómo usar: CSS Hover Animation Generator
- Choose a hover preset such as Grow, Lift, Tilt or Buzz.
- Switch the preview between button, card, icon and text, and hover it to test.
- Adjust duration, easing and keyframes until it feels right.
- Copy the CSS — it also applies on
:focus-visiblefor keyboard users.
Hover animation vs transition
For a simple A-to-B change, a transition is enough and reverses smoothly when the pointer leaves. Keyframe animations on :hover shine when the effect has several steps (a bounce, a buzz, a wobble) or should loop while hovered. This generator outputs both :hover and :focus-visible selectors so keyboard users get the same feedback, and keeps effects subtle — around 150–300 ms feels responsive.
What you can build
- Keyframe timeline — add as many keyframes as you like, drag them to new percentages, and give each its own easing.
- Properties — translate X/Y, rotate, 3D rotate X/Y, scale, skew, opacity, blur, glow (box-shadow), background color and border radius. Missing values are interpolated, so transforms never jump.
- Triggers — on load, hover, click, when scrolled into view, or a CSS-only scroll-driven animation.
- Stagger — animate a list one item after another with a single CSS custom property.
- Inspect — pause, scrub frame by frame, slow down to ¼ speed and switch on onion skin to see every keyframe at once.
- Export — CSS shorthand or longhand, HTML, JavaScript, Tailwind v3 and v4, a SCSS mixin, a standalone demo file or a share link.
The animation shorthand
| Part | Example | Meaning |
|---|---|---|
| name | fade-in-up | The @keyframes rule to run |
| duration | 0.6s | Length of one cycle |
| timing function | cubic-bezier(.33,1,.68,1) | Speed curve between keyframes |
| delay | 0.2s | Wait before starting; negative values start part-way through |
| iteration count | infinite | How many cycles |
| direction | alternate | Play backwards on every other cycle |
| fill mode | both | Keep the first frame before and the last frame after playing |
Accessibility
Some people get dizzy or nauseous from motion. With Respect prefers-reduced-motion on, the CSS switches the animation off for visitors who have enabled “reduce motion” in their operating system. Avoid flashing more than three times a second, and keep looping animations subtle or give users a way to pause them.
Performance tips
Animate transform and opacity instead of top, left, width or margin, which force layout on every frame. Add will-change only to elements that are about to animate. Shape your easing with the cubic-bezier generator, add a spinner from the CSS loader generator, and pair animations with box shadows or gradients.
También se busca como: css hover effects, hover animation css, button hover effect, css hover generator, card hover effect, hover effects css.
Herramientas que combinan con: CSS Hover Animation Generator
- CSS Animation Generator — Design CSS animations on a real keyframe timeline.
- CSS Keyframes Generator — A visual editor for @keyframes.
- Glassmorphism Generator — Design a frosted-glass card with live sliders and copy cross-browser CSS — with the -webkit-backdrop-filter prefix and a fallback for older browsers.
- 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
Is the generated CSS free to use?
Can I edit an animation I already have?
How do I start the animation when the element scrolls into view?
animation-timeline: view() with no JavaScript in browsers that support it.Does it work with Tailwind CSS?
tailwind.config.js block for v3 and an @theme block for v4, so you can use the animation as an animate-* class.Which properties are best for smooth animation?
transform and opacity run on the GPU compositor and stay smooth even on slow phones. Blur, shadows, colors and border radius cost more, so use them sparingly on large elements.