HomeCasa Prompts

Animazioni e microinterazioni CSS fluide e accessibili

Progetta e programma animazioni CSS per pulsanti, menu, card o comparse allo scroll, con specifica del movimento, prestazioni fluide e alternativa per il movimento ridotto. Pensato per ChatGPT, Claude, Gemini e Microsoft Copilot. Include 4 variabili personalizzabili e puoi copiarlo gratuitamente con un clic.

Intermedio · Codice · In attesa di revisione editoriale

Pensato per:

Prompt

Agisci come sviluppatore frontend specializzato in motion design per il web, prestazioni delle animazioni e accessibilità.

Contesto:
- Cosa voglio animare: {{elemento}}
- Sensazione desiderata: {{sensazione}}
- Tecnologia: {{tecnologia}}
- Vincoli del progetto: {{vincoli}}

Se l'interazione non è chiara (cosa la attiva, quanto dura, se si può interrompere), chiedimelo prima di scrivere codice.

Consegna:
1. Una specifica del movimento in tabella: attivatore, proprietà che cambiano, durata, curva di easing, ritardo e stato finale, coerente con una sensazione {{sensazione}}.
2. Variabili CSS per durate e curve, riutilizzabili in tutto il progetto.
3. L'HTML e il CSS (e il JavaScript minimo se {{tecnologia}} lo richiede), animando solo transform e opacity quando possibile.
4. Un'alternativa con prefers-reduced-motion: cosa si elimina, cosa diventa una semplice dissolvenza e cosa resta perché porta informazione.
5. Stati di focus visibili e comportamento corretto da tastiera se l'elemento è interattivo; l'animazione non deve mai nascondere il focus né ritardare la risposta.
6. Note sulle prestazioni: quando usare will-change e quando toglierlo, evitare proprietà che provocano ricalcolo del layout e come verificarlo nel pannello Performance.
7. Comportamento nei browser che non supportano qualche API usata, perché il contenuto resti utilizzabile.

Vincoli:
- Nessuna animazione che lampeggi più di tre volte al secondo né movimento automatico oltre i cinque secondi senza possibilità di metterlo in pausa.
- Nessuna libreria esterna a meno che {{tecnologia}} non lo richieda.
- Il contenuto deve essere visibile e utilizzabile anche se l'animazione non parte.

Formato: tabella della specifica, blocchi di codice separati per file e un elenco di test.

Come usarlo

  1. Descrivi l’interazione concreta e la sensazione che vuoi trasmettere. 2. Scegli se basta il CSS o serve un po’ di JavaScript. 3. Prova il risultato con la riduzione del movimento attiva nel sistema e su uno smartphone di fascia media.

Esempio d'uso

Elemento: card prodotto che compaiono allo scroll e pulsante aggiungi al carrello con conferma · Sensazione: sobria e professionale · Tecnologia: CSS + IntersectionObserver · Vincoli: nessuna libreria.

Esempio di risultato

Specifica del movimento

TriggerProprietàDurataCurvaStato finale
La card entra nel viewportopacity, transform300 mscubic-bezier(0.2, 0, 0, 1)Visibile, al suo posto
Clic su «Aggiungi al carrello»transform (scala)150 msstessa curvaIcona di conferma

animazioni.css

:root {
  --durata-rapida: 150ms;
  --durata-base: 300ms;
  --curva-uscita: cubic-bezier(0.2, 0, 0, 1);
}

/* Nascosta solo se il JS è caricato: senza JS il contenuto resta visibile */
.js .card-prodotto {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--durata-base) var(--curva-uscita), transform var(--durata-base) var(--curva-uscita);
}
.js .card-prodotto.visibile { opacity: 1; transform: none; }

.pulsante-carrello { transition: transform var(--durata-rapida) var(--curva-uscita); }
.pulsante-carrello:active { transform: scale(0.97); }
.pulsante-carrello:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }
.pulsante-carrello[data-stato="aggiunto"] .icona-check { animation: comparsa var(--durata-base) var(--curva-uscita); }

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

@media (prefers-reduced-motion: reduce) {
  .js .card-prodotto { transform: none; transition: opacity var(--durata-rapida) linear; }
  .pulsante-carrello, .pulsante-carrello[data-stato="aggiunto"] .icona-check { transition: none; animation: none; }
}

Si animano solo transform e opacity, che non causano ricalcoli del layout. L'IntersectionObserver aggiunge .visibile e poi smette di osservare ogni card…

Dati chiave

Categoria
Programmazione e sviluppo · HTML e CSS
Tipo di output
Codice
Livello
Intermedio
Pensato per
ChatGPT, Claude, Gemini e Microsoft Copilot
Verificato in
In attesa di verifica editoriale
Variabili
Cosa voglio animare, Sensazione desiderata, Tecnologia e Vincoli
Lingua
Italiano
Prezzo
Gratuito, senza registrazione
Aggiornato
07/11/2026

Domande frequenti

Perché animare solo transform e opacity?

Perché il browser può animarle senza ricalcolare il layout della pagina, di solito sulla GPU. Animare width, top o margin obbliga a ricalcolare il layout a ogni fotogramma e crea scatti.

Cos’è prefers-reduced-motion?

Una media query che rileva se la persona ha chiesto al sistema di ridurre il movimento, per esempio per chinetosi o disturbi vestibolari. Rispettarla è una buona pratica di accessibilità.

A cosa serve questo prompt?

Progetta e programma animazioni CSS per pulsanti, menu, card o comparse allo scroll, con specifica del movimento, prestazioni fluide e alternativa per il movimento ridotto.

Con quali strumenti di IA funziona?

È pensato per ChatGPT, Claude, Gemini e Microsoft Copilot. Non lo abbiamo ancora verificato in questi strumenti, quindi i risultati possono variare da uno all'altro.

Come personalizzo il prompt?

Clicca su «Personalizza» e compila le variabili (Cosa voglio animare, Sensazione desiderata, Tecnologia e Vincoli). Il testo si aggiorna all'istante e poi puoi copiarlo con un clic. I valori vengono salvati solo nel tuo browser.

Serve esperienza per usarlo?

È di livello intermedio: conviene conoscere l'argomento per fornire un buon contesto e valutare il risultato con occhio critico.

Questo prompt è gratuito?

Sì. Tutti i prompt di HomeCasa Prompts sono gratuiti, senza registrazione né abbonamento. Puoi usarli anche in progetti professionali.

Posso fidarmi dell'output dell'IA?

Consideralo una bozza di alta qualità: verifica sempre dati, cifre e affermazioni importanti prima di pubblicare o prendere decisioni.

Prompt correlati