Animation

Easing preview tile

Eine Kachel, die unter jeder von Ihnen ausgewählten Beschleunigungskurve die gleiche Skalierung abspielt, wobei die Kurve daneben gezeichnet wird und eine Markierung synchron darauf verläuft.

circInOut · 1000ms

Easing preview tile verwenden

Eine Kachel, die unter jeder von Ihnen ausgewählten Beschleunigungskurve die gleiche Skalierung abspielt, wobei die Kurve daneben gezeichnet wird und eine Markierung synchron darauf verläuft.

Teste die Vorschau mit Maus und Tastatur. Prüfe den sichtbaren Fokus und das Layout auf schmalen Bildschirmen in deiner eigenen Seite. Nenne deinem Agenten die Nummer oder den Bezeichner, um diese Komponente abzurufen.

Eigenschaften: easing, duration, delay, mirror, accent

Welche Frameworks sind verfügbar?

Der Katalog enthält diese Versionen: react, vue, svelte, astro, html. Die Vorschau auf dieser Seite verwendet React.

Wie greife ich auf die Implementierung zu?

Code, Framework-Versionen und Installationsbefehle sind im Arbeitsbereich oben verfügbar.

Verbinde deinen Agenten

Ähnliche Komponenten

1773Entrance timing playgroundAnimationEine Disc spielt auf Abruf den gleichen Eingangszug ab, sodass Sie genau spüren können, welchen Beitrag Dauer, Verzögerung und Entspannungskurve jeweils leisten.

1808Spring easing toggleAnimationEine Kachel, die zwischen zwei Stopps auf einer Federkurve gleitet, die in einen einfachen CSS-Übergang eingebettet ist, wobei die generierte Kurve daneben dargestellt wird.

1780Interruptible hover swellAnimationEine Kachel, deren zweistufiges Hover-Anschwellen immer bei ihrer aktuellen Größe beginnt, sodass sie beim Ein- und Ausschalten des Zeigers niemals einrastet.

1782Keyframe morph loopAnimationEin Quadrat, das eine Schleifenroutine aus Wachsen, Drehen und Runden zu einem Kreis durchführt und dabei jede Pose beibehält, da die Timing-Stopps ungleichmäßig sind.

1797Press and hover scale tileAnimationEine Kachel, die beim Schweben anschwillt und beim Drücken zusammendrückt, wobei das Drücken immer das Schweben schlägt und beide von einer Feder gelöst werden, sodass die Gesten niemals miteinander in Konflikt geraten.

1743Scale in on viewAnimationEin Wrapper, der sein untergeordnetes Element klein hält, bis es zum ersten Mal in die Ansicht gescrollt wird, und es dann auf die volle Größe zurückversetzt, mit einer optionalen Staffelung pro Element für Listen.