HomeCasa Prompts

Smooth, accessible CSS animations and micro-interactions

Design and code CSS animations for buttons, menus, cards or scroll reveals, with a motion spec, 60 fps-friendly performance and a reduced-motion alternative. Designed for ChatGPT, Claude, Gemini and Microsoft Copilot. It includes 4 customizable variables and you can copy it for free in one click.

Intermediate · Code · Pending editorial review

Designed for:

Prompt

Act as a frontend developer who specializes in web motion design, animation performance and accessibility.

Context:
- What I want to animate: {{element}}
- Desired feel: {{feel}}
- Technology: {{technology}}
- Project constraints: {{constraints}}

If the interaction is unclear (what triggers it, how long it lasts, whether it can be interrupted), ask me before writing code.

Deliverables:
1. A motion spec table: trigger, properties that change, duration, easing curve, delay and end state, consistent with a {{feel}} feel.
2. CSS variables for durations and curves, reusable across the project.
3. The HTML and CSS (and minimal JavaScript if {{technology}} needs it), animating only transform and opacity wherever possible.
4. A prefers-reduced-motion alternative: what is removed, what becomes a simple fade and what stays because it carries meaning.
5. Visible focus states and correct keyboard behavior if the element is interactive; the animation must never hide focus or delay the response.
6. Performance notes: when to use will-change and when to remove it, avoiding properties that trigger layout, and how to check in the Performance panel.
7. Behavior in browsers that lack any API used, so the content stays usable.

Constraints:
- No animations that flash more than three times per second, and no auto-playing motion longer than five seconds without a way to pause it.
- No external libraries unless {{technology}} calls for one.
- Content must be visible and usable even if the animation never runs.

Output format: spec table, code blocks split by file and a test checklist.

How to use it

  1. Describe the specific interaction and the feeling you want it to convey. 2. Choose whether CSS alone is enough or you need a bit of JavaScript. 3. Test the result with reduced motion turned on in your OS and on a mid-range phone.

Usage example

Element: product cards that reveal on scroll and an add-to-cart button with confirmation · Feel: subtle and professional · Technology: CSS + IntersectionObserver · Constraints: no libraries.

Sample output

Motion spec

TriggerPropertiesDurationEasingEnd state
Card enters the viewportopacity, transform300 mscubic-bezier(0.2, 0, 0, 1)Visible, in place
Press "Add to cart"transform (scale)150 mssame curveConfirmation icon

motion.css

:root {
  --dur-fast: 150ms;
  --dur-base: 300ms;
  --ease-out: cubic-bezier(0.2, 0, 0, 1);
}

/* Hidden only once JS has loaded: without JS, content looks the same */
.js .product-card {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.js .product-card.is-visible { opacity: 1; transform: none; }

.add-to-cart { transition: transform var(--dur-fast) var(--ease-out); }
.add-to-cart:active { transform: scale(0.97); }
.add-to-cart:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }
.add-to-cart[data-state="added"] .icon-check { animation: pop-in var(--dur-base) var(--ease-out); }

@keyframes pop-in { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .js .product-card { transform: none; transition: opacity var(--dur-fast) linear; }
  .add-to-cart, .add-to-cart[data-state="added"] .icon-check { transition: none; animation: none; }
}

Only transform and opacity animate, so nothing triggers layout. The IntersectionObserver adds .is-visible and then stops observing each card…

Key facts

Category
Programming & development · HTML & CSS
Output type
Code
Level
Intermediate
Designed for
ChatGPT, Claude, Gemini and Microsoft Copilot
Verified in
Pending editorial verification
Variables
What I want to animate, Desired feel, Technology and Constraints
Language
English
Price
Free, no sign-up
Updated
Nov 7, 2026

Frequently asked questions

Why animate only transform and opacity?

Because the browser can animate them without recalculating page layout, usually on the GPU. Animating width, top or margin forces a layout recalculation every frame and causes jank.

What is prefers-reduced-motion?

A media query that detects whether the person has asked their system to reduce motion, for example because of motion sickness or vestibular disorders. Respecting it is good accessibility practice.

What is this prompt for?

Design and code CSS animations for buttons, menus, cards or scroll reveals, with a motion spec, 60 fps-friendly performance and a reduced-motion alternative.

Which AI tools does it work with?

It is designed for ChatGPT, Claude, Gemini and Microsoft Copilot. We have not verified it in these tools yet, so results may vary between them.

How do I customize the prompt?

Click “Customize” and fill in the variables (What I want to animate, Desired feel, Technology and Constraints). The text updates instantly and you can then copy it in one click. Values are stored only in your browser.

Do I need experience to use it?

It is intermediate: it helps to know the topic so you can provide good context and review the result critically.

Is this prompt free?

Yes. Every HomeCasa Prompts prompt is free, with no sign-up or subscription. You can also use them in professional projects.

Can I trust the AI output?

Treat it as a high-quality draft: always check data, figures and important claims before publishing or making decisions.

Related prompts