Farbformate umwandeln
HEX-, RGB- und HSL-Farben mit Transparenz umrechnen, als Farbfeld ansehen und als CSS-Wert kopieren.
CSS-cubic-bezier-Editor
Zwei Kontrollpunkte bearbeiten, den Übergang abspielen und eine cubic-bezier-Kurve für CSS erzeugen.
X liegt zwischen 0 und 1; Y darf darüber hinausgehen. Ziehen oder Pfeiltasten verwenden, mit Umschalt für größere Schritte.
CSS
Über dieses Tool
Stimmen Sie Beschleunigung oder Überschwingen einer Überblendung anhand von Kurve und Bewegung ab.
Anwendung
Wählen Sie eine übliche Verlaufskurve, ziehen Sie die Kontrollpunkte oder geben Sie X1, Y1, X2 und Y2 ein. Pfeiltasten und Umschalt stehen ebenfalls zur Fein- beziehungsweise Grobeinstellung bereit. Legen Sie die Vorschaudauer fest, starten oder stoppen Sie die Bewegung und übernehmen Sie anschließend das CSS.
X liegt zwischen 0 und 1, Y zwischen −2 und 3; dadurch sind Vor- und Überschwingeffekte möglich. Exportiert wird nur die Timing-Deklaration, nicht die Vorschaudauer oder eine vollständige Animation. Bei aktivierter Systemoption für reduzierte Bewegung entfällt die Wiedergabe; Bearbeitung und Export funktionieren weiterhin.
Häufige Fragen
Wird eine komplette Animation erzeugt?
Exportiert wird nur transition-timing-function. Dauer und animierte Eigenschaften legen Sie im Stylesheet fest. x liegt zwischen 0 und 1, y zwischen −2 und 3.
Warum bewegt sich bei Wiedergabe nichts, obwohl die Kurve gültig ist?
Die Vorschau berücksichtigt die Systemeinstellung für reduzierte Bewegung. Ist diese aktiv, wird die bewegte Animation nicht abgespielt; Bearbeiten und Exportieren funktionieren weiterhin. Prüfen Sie andernfalls, ob die Vorschauzeit zwischen 100 und 5.000 ms liegt. Diese Dauer gilt nur für die Vorschau.
Verwandte Werkzeuge
Wird in einem neuen Tab geöffnet
Kommentare
0