HomeCasa Prompts

Flüssige, barrierefreie CSS-Animationen und Mikrointeraktionen

Entwirf und programmiere CSS-Animationen für Buttons, Menüs, Karten oder Scroll-Effekte, mit Motion-Spezifikation, flüssiger Performance und einer Alternative für reduzierte Bewegung. Entwickelt für ChatGPT, Claude, Gemini und Microsoft Copilot. Er enthält 4 anpassbare Variablen und lässt sich kostenlos mit einem Klick kopieren.

Fortgeschritten · Code · Redaktionelle Prüfung ausstehend

Entwickelt für:

Prompt

Arbeite als Frontend-Entwickler mit Schwerpunkt auf Motion Design im Web, Animations-Performance und Barrierefreiheit.

Kontext:
- Was animiert werden soll: {{element}}
- Gewünschte Wirkung: {{wirkung}}
- Technik: {{technik}}
- Projektvorgaben: {{vorgaben}}

Wenn die Interaktion unklar ist (Auslöser, Dauer, ob sie unterbrochen werden kann), frag nach, bevor du Code schreibst.

Liefere:
1. Eine Motion-Spezifikation als Tabelle: Auslöser, sich ändernde Eigenschaften, Dauer, Easing-Kurve, Verzögerung und Endzustand, passend zu einer Wirkung „{{wirkung}}“.
2. CSS-Variablen für Dauern und Kurven, im ganzen Projekt wiederverwendbar.
3. HTML und CSS (und minimales JavaScript, falls {{technik}} es braucht), wobei möglichst nur transform und opacity animiert werden.
4. Eine Alternative für prefers-reduced-motion: was entfällt, was zu einem einfachen Überblenden wird und was bleibt, weil es Information trägt.
5. Sichtbare Fokuszustände und korrekte Tastaturbedienung bei interaktiven Elementen; die Animation darf den Fokus nie verdecken oder die Reaktion verzögern.
6. Performance-Hinweise: wann will-change sinnvoll ist und wann man es wieder entfernt, keine Layout auslösenden Eigenschaften animieren, und wie man das im Performance-Panel prüft.
7. Verhalten in Browsern ohne Unterstützung einer verwendeten API, damit der Inhalt nutzbar bleibt.

Vorgaben:
- Keine Animationen, die öfter als dreimal pro Sekunde blinken, und keine automatische Bewegung über fünf Sekunden ohne Pausenmöglichkeit.
- Keine externen Bibliotheken, außer {{technik}} verlangt es.
- Inhalte müssen sichtbar und nutzbar sein, auch wenn die Animation nie läuft.

Format: Spezifikationstabelle, Codeblöcke getrennt nach Datei und eine Testliste.

So verwenden Sie ihn

  1. Beschreibe die konkrete Interaktion und die Wirkung, die sie haben soll. 2. Entscheide, ob reines CSS reicht oder etwas JavaScript nötig ist. 3. Teste das Ergebnis mit aktivierter Bewegungsreduzierung im Betriebssystem und auf einem Mittelklasse-Smartphone.

Anwendungsbeispiel

Element: Produktkarten, die beim Scrollen erscheinen, und ein In-den-Warenkorb-Button mit Bestätigung · Wirkung: dezent und professionell · Technik: CSS + IntersectionObserver · Vorgaben: keine Bibliotheken.

Beispielergebnis

Bewegungsspezifikation

AuslöserEigenschaftenDauerKurveEndzustand
Karte erscheint im Viewportopacity, transform300 mscubic-bezier(0.2, 0, 0, 1)Sichtbar, an ihrem Platz
Klick auf „In den Warenkorb"transform (Skalierung)150 msgleiche KurveBestätigungs-Icon

animationen.css

:root {
  --dauer-schnell: 150ms;
  --dauer-basis: 300ms;
  --kurve-aus: cubic-bezier(0.2, 0, 0, 1);
}

/* Nur ausgeblendet, wenn JS geladen ist: ohne JS bleibt alles sichtbar */
.js .produktkarte {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--dauer-basis) var(--kurve-aus), transform var(--dauer-basis) var(--kurve-aus);
}
.js .produktkarte.ist-sichtbar { opacity: 1; transform: none; }

.warenkorb-button { transition: transform var(--dauer-schnell) var(--kurve-aus); }
.warenkorb-button:active { transform: scale(0.97); }
.warenkorb-button:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }
.warenkorb-button[data-status="hinzugefuegt"] .icon-check { animation: einblenden var(--dauer-basis) var(--kurve-aus); }

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

@media (prefers-reduced-motion: reduce) {
  .js .produktkarte { transform: none; transition: opacity var(--dauer-schnell) linear; }
  .warenkorb-button, .warenkorb-button[data-status="hinzugefuegt"] .icon-check { transition: none; animation: none; }
}

Animiert werden nur transform und opacity, die kein Layout auslösen. Der IntersectionObserver setzt .ist-sichtbar und beobachtet die Karte danach nicht mehr …

Wichtige Fakten

Kategorie
Programmierung & Entwicklung · HTML & CSS
Ausgabetyp
Code
Niveau
Fortgeschritten
Entwickelt für
ChatGPT, Claude, Gemini und Microsoft Copilot
Verifiziert in
Redaktionelle Prüfung ausstehend
Variablen
Was animiert werden soll, Gewünschte Wirkung, Technik und Projektvorgaben
Sprache
Deutsch
Preis
Kostenlos, ohne Anmeldung
Aktualisiert
07.11.2026

Häufig gestellte Fragen

Warum nur transform und opacity animieren?

Weil der Browser sie animieren kann, ohne das Seitenlayout neu zu berechnen, meist auf der GPU. Animationen von width, top oder margin erzwingen pro Frame eine Layout-Berechnung und führen zu Ruckeln.

Was ist prefers-reduced-motion?

Eine Media Query, die erkennt, ob jemand im System reduzierte Bewegung eingestellt hat, etwa wegen Übelkeit oder vestibulärer Störungen. Sie zu respektieren ist gute Praxis für Barrierefreiheit.

Wofür ist dieser Prompt gedacht?

Entwirf und programmiere CSS-Animationen für Buttons, Menüs, Karten oder Scroll-Effekte, mit Motion-Spezifikation, flüssiger Performance und einer Alternative für reduzierte Bewegung.

Mit welchen KI-Tools funktioniert er?

Er ist für ChatGPT, Claude, Gemini und Microsoft Copilot entwickelt. Wir haben ihn in diesen Tools noch nicht überprüft, daher können die Ergebnisse variieren.

Wie passe ich den Prompt an?

Klicken Sie auf „Anpassen“ und füllen Sie die Variablen aus (Was animiert werden soll, Gewünschte Wirkung, Technik und Projektvorgaben). Der Text wird sofort aktualisiert und lässt sich anschließend mit einem Klick kopieren. Die Werte werden nur in Ihrem Browser gespeichert.

Brauche ich Erfahrung, um ihn zu verwenden?

Er ist für Fortgeschrittene: Es hilft, das Thema zu kennen, um guten Kontext zu liefern und das Ergebnis kritisch zu prüfen.

Ist dieser Prompt kostenlos?

Ja. Jeder Prompt von HomeCasa Prompts ist kostenlos, ohne Anmeldung und ohne Abonnement. Sie können ihn auch in beruflichen Projekten verwenden.

Kann ich der KI-Ausgabe vertrauen?

Betrachten Sie sie als hochwertigen Entwurf: Prüfen Sie Daten, Zahlen und wichtige Aussagen immer, bevor Sie etwas veröffentlichen oder Entscheidungen treffen.

Ähnliche Prompts