Radial Fill

Die neue Ansicht erscheint in einem Kreis, der sich vom Klickpunkt aus ausdehnt.

Füge bei [wo] einen „Circular Reveal“-Übergang hinzu (auch clip-path circle expand oder theme toggle reveal genannt).
Die neue Ansicht soll in einem Kreis erscheinen, der vom gedrückten Bedienelement aus wächst, bis er die ganze Fläche bedeckt: weich und gleichmäßig, sanft beschleunigend und abbremsend.
Lass den Kreis genau dort beginnen, wo gedrückt wurde, und wechsle bei reduzierter Bewegung (prefers-reduced-motion) sofort ohne Kreis.

Eine kreisförmige Welle breitet sich vom genauen Klick- oder Tippunkt aus und verblasst.

Füge bei [wo] einen „Ripple“-Effekt hinzu (auch material ripple oder ink ripple genannt).
Bei jedem Klick oder Tippen soll sich eine weiche, kreisförmige Welle vom genauen Druckpunkt ausbreiten, bis sie das Element bedeckt, und dabei verblassen: schnell und leicht.
Beschneide die Welle auf die Form des Elements, lass jeden schnellen Druck seine eigene Welle starten und starte sie bei Tastatureingaben aus der Mitte.

Beim Hovern dehnt sich ein Rechteck im Element aus oder zieht sich zusammen und ändert so den Hintergrund.

Füge bei [wo] einen „Rectangle Fill“-Hover-Effekt hinzu.
Die neue Hintergrundfarbe soll sich von allen vier Kanten her schließen, während ein inneres Rechteck zur Mitte schrumpft, und sich beim Verlassen des Zeigers wieder öffnen, während die Beschriftung die Farbe wechselt, um lesbar zu bleiben: weich und schnell.
Halte die Beschriftung über der Füllung und zeige denselben Effekt beim Tastaturfokus.

Beim Hovern öffnet oder schließt sich der Hintergrund wie Fensterläden von der Mitte oder von den Rändern aus.

Füge bei [wo] einen „Shutter Fill“-Hover-Effekt hinzu (auch shutter genannt).
Die neue Hintergrundfarbe soll sich von einer senkrechten Linie in der Mitte wie Fensterläden zu beiden Seiten öffnen und sich beim Verlassen wieder zur Mitte schließen, während die Schriftfarbe wechselt, damit der Text lesbar bleibt: weich und schnell.
Schneide die Füllung am Rand des Elements ab, halte den Text darüber und zeige denselben Effekt beim Tastaturfokus.

Das Element dreht sich beim Hovern um ein paar Grad.

Füge bei [wo] einen „Rotate“-Hover-Effekt hinzu.
Das Element soll sich leicht im Uhrzeigersinn drehen, solange der Zeiger darüber ist, und beim Verlassen zurückdrehen: weich und dezent.
Verhindere, dass sich das umgebende Layout verschiebt, und zeige denselben Effekt beim Tastaturfokus.

Die Ecken des Elements runden sich beim Hovern weich ab.

Füge bei [wo] einen „Round Corners“-Hover-Effekt hinzu.
Die spitzen Ecken des Elements sollen sich weich abrunden, solange der Zeiger darüber ist, und beim Verlassen wieder spitz werden: sanft und schnell.
Lass die Größe des Elements unverändert und zeige denselben Effekt beim Tastaturfokus.