Der Unterschied zwischen einer Schnittstelle, die sich billig anfühlt, und einer, die sich überlegt anfühlt, beträgt normalerweise eine Fünftelsekunde. Eine Taste, die in dem Moment, in dem Ihr Zeiger sie berührt, in die Hover-Farbe einrastet, liest sich abrupt; Die gleiche Taste, die über zweihundert Millisekunden auf diese Farbe gelockert wird, liest sich wie fertig. Diese Erleichterung ist ein CSS-Übergang, und für etwas so Kleines ist es bemerkenswert, wie oft ich gesehen habe, wie es falsch gemacht wurde, den Hover-Zustand anstelle des Basiszustands aufzusetzen, durch Versuch und Irrtum über ein Dutzend Auffrischungen abgestimmt oder auf eine Eigenschaft angewendet, die überhaupt nicht animiert werden kann.
Ein Übergang ist die browser' s Art, die Veränderung zwischen zwei Werten einer Eigenschaft im Laufe der Zeit zu animieren, anstatt sofort zu wechseln Es ist das Arbeitstier hinter Hover-Effekten, Fokuszuständen, expandierenden Panels und umgeschalteten Klassen, und es ist fast immer das erste bisschen Bewegung, das jemand einem Projekt hinzufügt Aber die Kurzschrift presht vier Werte in einer festen Reihenfolge in eine Zeile, die Timing-Funktion ist der Teil, der bestimmt, wie sich die Bewegung anfühlt, und es gibt eine bekannte Klippe, von der Leute abfallen, wenn sie versuchen, etwas aus der Reihe heraus zu verblassen display: none. Der Aufbau des Übergangs, wo Sie ihn spielen sehen können, spart all das.
der CSS-Übergangsgenerator Lassen Sie eine Eigenschaft auswählen, die Dauer und Verzögerung in Millisekunden festlegen und eine Timing-Funktion aus den CSS-Schlüsselwörtern und einem Satz kuratierter kubisch-bezier-Kurven auswählen. Sie können mehrere Übergänge in einer Kurzschrift stapeln, und eine Trigger-Taste spielt die Bewegung auf einem Live-Vorschauelement ab, sodass Sie die Entspannung spüren, bevor Sie sich darauf festlegen. Die genaue Deklaration befindet sich in einem kopierfertigen Feld unten.
tl; dr: Ein CSS-Übergang animiert die Änderung zwischen zwei Werten einer Eigenschaft über eine eingestellte Dauer, Sie gehört auf den Basiszustand, nicht den Hover-Zustand, so dass das Element in beide Richtungen lockert Die Kurzschriftreihenfolge ist Eigenschaft, Dauer, Timing-Funktion, Verzögerung Man kann nicht übergehen
display, da es keine Zwischenwerte hat und Sie die Animation bevorzugen solltentransformundopacityFür eine reibungslose Leistung Dieser Generator legt jedes Teil mit einer Live-Hover-Vorschau frei, unterstützt mehrere Ebenen und sendet sauberes CSS aus. Es läuft vollständig in Ihrem Browser ohne Anmeldung.
Welches Problem löst ein CSS-Übergangsgenerator?
Der schwierige Teil eines Übergangs ist nicht die Syntax; Es ist so, dass man Bewegungen nicht durch Lesen beurteilen kann. transition: transform 400ms cubic-bezier(0.68, -0.55, 0.27, 1.55) Beschreibt eine bestimmte abprallende Leichtigkeit, aber die einzige Möglichkeit zu wissen, ob sich dieser Abprall für Ihren Knopf richtig anfühlt, besteht darin, zuzusehen, wie er passiert. Und wenn Sie zusehen, wie er in Ihrem eigenen Projekt passiert, schreiben Sie die Regel, richten Sie den Schwebezustand ein, speichern Sie und bewegen Sie Ihre Maus über das Element, passen Sie dann eine Zahl an und machen Sie alles noch einmal. Diese Schleife ist langsam genug, dass sich die meisten Menschen mit dem ersten zufrieden geben, was funktioniert, und nicht mit dem, was sich am besten anfühlt.
Ein Generator macht aus dieser Schleife einen einzigen Klick, man setzt eine Dauer und drückt den Auslöser, und das Vorschauelement spielt den Übergang vor sich ab, ändert die Zeitfunktion und drückt sie erneut, und man spürt den Unterschied zwischen einer linearen Folie und einem Leichtigkeits-Ausgleich sofort, nach ein paar Runden entwickelt man ein Gespür dafür, wie sich zweihundert Millisekunden gegenüber fünfhundert anfühlen, das ist die Intuition, die Bewegung trennt, die hilft, von Bewegung, die im Weg steht, wenn man zufrieden ist, ist das funktionierende CSS bereits geschrieben, also gibt es nichts zu transkribieren.
Hier gilt das gleiche Zuverlässigkeitsargument wie bei jedem visuellen CSS-Builder: Sie können keinen Fehlbild erzeugen transition Wert durch Ziehen von Schiebereglern und Auswahl aus Menüs, so dass die Ausgabe immer sicher einzufügen ist Das ist der Grund, warum ich diese Art von Werkzeug nahe halte, der gleiche Instinkt hinter dem Griff nach dem CSS-Transformationsgenerator Wenn ich eine Transformation brauche, anstatt Grad in meinem Kopf zu zählen.
Wohin geht der Übergang, in den Basiszustand oder den Hover-Zustand?
Das ist der Fehler, den ich am meisten sehe, und es lohnt sich, ihn klar zu formulieren, weil der Fix so einfach ist Der Übergang gehört auf das Element' s Basiszustand, nicht auf seinen :hover Regel. wenn der Übergang auf dem Basiszustand deklariert wird, animiert der Browser die Eigenschaft in beide Richtungen: Sie lässt sich in den Hoverwechseln ein, wenn der Zeiger ankommt, und sie wird wieder ausgelassen, wenn der Zeiger geht. Diese Symmetrie ist es, die eine Interaktion vollständig anfühlen lässt.
Setzen Sie den Übergang nur auf :hover Und man bekommt einen schiefen Effekt Die Eigenschaft animiert auf dem Weg hinein glatt, denn der Übergang ist vorhanden, während das Element geschwebt wird, aber in dem Moment, in dem der Zeiger geht, wird die :hover Regel nicht mehr gilt, der Übergang geht mit, und die Eigenschaft schnappt sofort zurück Das Ergebnis ist ein Knopf, der anmutig nach oben lockert und dann wieder nach unten ruckelt, was schlimmer aussieht als gar keine Animation Die Ausgabe von generator' s wird geschrieben, um auf den Basiszustand zu gehen, und die Führung wird aus genau diesem Grund in das Werkzeug eingebrannt. Deklarieren Sie es einmal, am Element selbst, und lassen Sie es durch die Zustandsänderungen auslösen.
Wie ist die richtige Reihenfolge der Übergangskurzschrift?
der transition Kurzschrift packt bis zu vier Werte in eine Zeile, und die Reihenfolge wird durch die Spezifikation festgelegt: Eigenschaft, Dauer, Timing-Funktion, Verzögerung Also transition: opacity 300ms ease-in-out 100ms Bedeutet die Eigenschaft der Deckkraft, über dreihundert Millisekunden animiert, mit einer easy-in-out-Kurve, nach hundert Millisekunden Verzögerung, Holen Sie die Bestellung falsch und der Browser ignoriert entweder die Deklaration oder liest sie als etwas, das Sie nicht beabsichtigt haben.
Die eine Regel, die Menschen fängt, sind die beiden Zeitwerte Sowohl die Dauer als auch die Verzögerung sind Zeiten, und CSS unterscheidet sie rein nach Position: Der erste Zeitwert ist immer die Dauer, und der zweite ist immer die Verzögerung, schreibt man nur einen Zeitwert, wird er als Dauer gelesen, und die Verzögerung bleibt bei ihrem Standardwert Null Daher ist ein scheinbar zu früh beginnender Übergang oft ein Fall einer versehentlich zuerst geschriebenen Verzögerung Der Generator umgeht das ganze Problem, indem er die Kurzschrift in der richtigen Reihenfolge für Sie aufbaut, und er lässt die Verzögerung bei Null vollständig weg, sodass Sie niemals einen Nachlauf versenden 0ms Das bringt nichts Hier die Anatomie in einer Tabelle.
| Teil | Beispiel | Was es kontrolliert |
|---|---|---|
| Eigentum | opacity |
Welche Eigenschaft animiert, oder all Für jeden animierbaren |
| Dauer | 300ms |
Wie lange dauert die Animation; der erste Zeitwert |
| Zeitsteuerung | ease-in-out |
Die Beschleunigungskurve der Bewegung |
| Verzögerung | 100ms |
Wie lange warten, bevor Sie starten; der zweite Zeitwert |
Warum wird mein Display: kein Übergang nicht animiert?
Das ist die Klippe, und fast jeder geht mindestens einmal davon abDu willst, dass ein Element einblendet, also gehst du über display aus none auf block und eingestellt opacityUnd das Element erscheint einfach ohne Verblassen. Der Grund ist grundlegend: display Ist keine animierbare Eigenschaft Zwischendurch gibt es keine none und block„Kein Wert, auf den der Browser bei der Fünfzig-Prozent-Marke interpolieren kann, daher gibt es nichts dazwischen. Die Änderung erfolgt sofort und jede darauf geschichtete Opazitätsanimation wird abgeschnitten, weil das Element von Anfang an nicht gerendert wurde.
Der klassische Fix ist das Animieren opacity und visibility Zusammen und gehen display Raus. visibility Übergang kann, weil, während es auch eine diskrete Eigenschaft ist, durch die Kopplung mit einer Dauer kann der Browser das Element sichtbar halten, bis die Opazität auf dem Weg nach draußen veraltet ist Der moderne Fix ist transition-behavior: allow-discreteEine neuere Funktion, mit der Sie diskrete Eigenschaften animieren können display An den Endpunkten eines Übergangs, sodass Sie wirklich aussteigen können display: none In Browsern, die es unterstützen So oder so ist die Lektion die gleiche: Überprüfen Sie, ob die Eigenschaft, die Sie übergehen, Zwischenwerte hat, bevor Sie eine Stunde damit verbringen, sich zu fragen, warum sich nichts bewegt. Dies ist die Art von Gotcha, die eine Live-Vorschau in Sekunden aufdeckt, was einen großen Teil des Arguments für den Aufbau von Bewegung darstellt, wo Sie sie beobachten können.
Was ist eine Timing-Funktion und warum ist sie so wichtig?
Die Timing-Funktion ist der Teil eines Übergangs, der entscheidet, wie sich die Bewegung anfühlt, und sie leistet weit mehr Arbeit als die Dauer Zwei Übergänge gleicher Länge können sich je nach Kurve ganz anders anfühlen A linear Übergang bewegt sich mit konstanter Geschwindigkeit und fühlt sich mechanisch an, wie ein Maschinenteil An ease-out Der Übergang beginnt schnell und verlangsamt sich bei seiner Ankunft, was sich natürlich anfühlt, weil er nachahmt, wie physische Objekte verlangsamen, und es ist die richtige Standardeinstellung für die meisten Schnittstellenbewegungen. ease-in Das Gegenteil tut und am besten für Dinge ist, die den Bildschirm verlassen.
Darunter sind all dies kubisch-beziersche Kurven Die Stichworte ease, ease-in, ease-out und ease-in-out Sind nur freundliche Namen für bestimmte cubic-bezier(x1, y1, x2, y2) Werte, wo die beiden Kontrollpunkte die Beschleunigung prägen Was cubic-bezier mächtig macht, ist, dass ein Kontrollpunkt mit einem y Wert über eins oder unter Null schiebt die Animation über ihren Endpunkt und zurück, wodurch Sie ein Überschwingen oder einen Absprung aufbauen Der Generator enthält eine Materialstandardkurve für saubere Schnittstellenbewegung und eine Rückenkurve, die für ein federndes, verspieltes Gefühl überschießt, plus a steps() Funktion für Bewegung, die in diskreten Rahmen springt, anstatt zu gleiten, wodurch Sie ein Sprite oder einen tickenden Zähler animieren Wählen Sie eine Kurve und drücken Sie den Abzug ist der schnellste Weg, ein Gefühl für das zu schaffen, was jeder tut.
Wann sollte ich mehrere Übergangsschichten verwenden?
Ein einzelner Übergang belebt eine Eigenschaft, aber reale Interaktionen ändern oft mehrere auf einmal Eine Taste, die sich im Schwebeflug hebt, könnte ihre Hintergrundfarbe verschieben, ihre Transformation anstoßen und ihren Schatten vertiefen, und jede von ihnen möchte möglicherweise ihr eigenes Timing Die transition Property verarbeitet dies mit einer durch Kommas getrennten Liste, wobei jeder Eintrag ein vollständiger Übergang mit seiner eigenen Eigenschaft, Dauer, Zeitfunktion und Verzögerung ist.
Der Generator unterstützt dies direkt: Fügen Sie für jede Eigenschaft eine Ebene hinzu, stimmen Sie jede unabhängig ab und das Werkzeug verbindet sie in einer Kurzschrift transition: background-color 200ms ease, transform 200ms ease-out. Der Grund, Eigenschaften getrennte Übergänge zu geben, anstatt sie zu verwenden all Kontrolle und Leistung ist. transition: all Bequem ist, aber es animiert jede Eigenschaft, die sich ändert, auch die, die Sie nicht beabsichtigt haben, und es zwingt den Browser, alles auf Änderungen zu beobachten Die Benennung der spezifischen Eigenschaften ist sowohl vorhersehbarer als auch billiger Die im Tool voreingestellte langsame Enthüllung zeigt einen zweischichtigen Übergang, verblassende Deckkraft und das Verschieben einer Transformation zusammen mit einer gemeinsamen Verzögerung, was das Standardrezept für ein Element ist, das sich leichter in Sichtweite bringt Wenn Sie die Transformationsseite dieser Paarung einstellen, wird die CSS-Transformationsgenerator Begleitwerkzeug ist, und die beiden werden fast immer zusammen verwendet.
Welche Eigenschaften sollte ich für eine reibungslose Performance animieren?
Nicht alle Eigenschaften sind gleich billig zu animieren, und die Wahl hat einen direkten Einfluss darauf, ob Ihr Übergang mit glatten sechzig Bildern pro Sekunde läuft oder stottert Die beiden Eigenschaften, die Sie bevorzugen sollten, sind transform und opacity. Beide können an die GPU übergeben und zusammengesetzt werden, ohne das Seitenlayout neu zu berechnen, so dass die Animation auch auf bescheidener Hardware glatt bleibt Deshalb eine Karte, die mit transform: translateX Fühlt sich butterartig an, während dieselbe Karte mit animiert wird left Fühlt sich rau an.
Die Eigenschaften, die eine Animation vermeiden sollten, sind diejenigen, die das Layout auslösen: width, height, top, left, margin und padding. Das Ändern eines dieser Punkte zwingt den Browser, die Position und Größe des Elements und alles, was davon betroffen ist, auf jedem einzelnen Bild der Animation neu zu berechnen, was teuer ist und die häufigste Ursache für scherzhafte Bewegung ist Wenn Sie feststellen, dass Sie eine Breite animieren möchten, lohnt es sich normalerweise zu fragen, ob ein transform: scaleX Würde einen ähnlichen Effekt günstiger erzeugen Der Generator ermöglicht es Ihnen, jede Eigenschaft auszuwählen, sodass Sie nie blockiert werden, sondern die darin aufgeführten Eigenschaften transform und opacity Ganz oben, weil das die sind, nach denen man zuerst greifen sollte Die umfassenderen Argumente für den Aufbau eines überlegten Satzes solcher Werkzeuge sind in der Webentwickler-Toolkit Stück, und die Workflow-Gewohnheiten dahinter sind in der Entwicklerproduktivitätstools Führung.
Wie hält der Generator die Vorschau ehrlich?
Jeder visuelle Builder ist dem gleichen Risiko ausgesetzt: Die Vorschau und der exportierte Code driften auseinander, bis das Tool Ihnen einen Wert beibringt, der sich nicht reproduzieren lässt Dieser Generator wendet genau das an transition Wert, den es an das Vorschauelement ausgibt und mit einer realen Zustandsänderung auslöst, also ist die Bewegung, die Sie sehen, die Bewegung, die das kopierte CSS erzeugen wird Es gibt keinen separaten Animationspfad, der nicht zustimmen könnte.
Da ein Übergang nur ausgeführt wird, wenn sich eine Eigenschaft ändert, benötigt die Vorschau einen Zustand, zwischen dem umgeschaltet werden kann, was die Trigger-Taste tut: Sie dreht das Element zwischen zwei Wertesätzen, sodass der Übergang ausgelöst wird und Sie es beobachten können Dies spiegelt wider, wie ein Übergang in freier Wildbahn funktioniert, wo ein Hover, ein Fokus oder eine umgeschaltete Klasse ihn auslöst Die Ausgabe bleibt ebenfalls minimal, die Verzögerung wird bei Null weggelassen und nur die von Ihnen hinzugefügten Ebenen aufgelistet, die gleiche Disziplin, nur sinnvolle Erklärungen abzugeben, die durch die Gradientengenerator und das Kastenschattengeneratordrohen
Welche Browser unterstützen CSS-Übergänge?
CSS-Übergänge werden in jedem aktuellen Browser unterstützt und das schon seit weit über einem Jahrzehnt Die transition Eigenschaft und all seine Langgriffe sind universell und vorbestimmt, so dass die Ausgabe dieses Generators in Chrome, Firefox, Safari und Edge ohne Anbieterpräfixe oder Fallbacks funktioniert Die neueren transition-behavior: allow-discrete Fähigkeit zur Animation diskreter Eigenschaften wie display Ist neueren Datums und hat eine engere Unterstützung, so behandeln Sie diese spezifische Technik als progressive Verbesserung und behalten Sie die Opazitäts-und-Sichtbarkeit-Paarung als Ihren Fallback Für die maßgeblichen Regeln ist die CSS Transitions Module Level 1 Spezifikation aus dem W3 C die primäre Quelle, und es lohnt sich zu lesen, sobald der Generator Ihnen ein Gefühl dafür gegeben hat, wie die Stücke passen.
Wenn Sie einen größeren Satz visueller CSS-Tools zusammenbauen, können Sie den Transformationsgenerator und die CSS-Filtergenerator Pair natürlich mit diesem, da ein Übergang ist, was die Transformationen und Filter glättet, die Sie mit ihnen bauen Alles hier läuft client-seitig, und das CSS, das Sie kopieren, ist Ihr, das Sie ohne Laufzeit, ohne Build-Schritt und ohne Abhängigkeit verwenden können.
Häufig gestellte Fragen
Was ist ein CSS-Übergangsgenerator?
Ein CSS-Übergangsgenerator ist ein visuelles Werkzeug, das einen CSS-Übergang aus den von Ihnen gewählten Einstellungen erstellt. Sie wählen eine Eigenschaft, Dauer, Zeitfunktion und Verzögerung aus und geben die Übergangskurzschrift mit einer Live-Vorschau aus, die Sie auslösen können, um die Lockerung zu beobachten.
Wo stelle ich den Übergang, auf den Basiszustand oder den Hover-Zustand?
Setzen Sie es auf den Basiszustand Ein auf der Basisregel deklarierter Übergang belebt die Eigenschaft in beide Richtungen, in die Hover-Änderung und wieder aus ihr heraus. Die Deklaration nur im Hover belebt die Änderung, lässt sie aber sofort zurückschnappen, wenn der Zeiger geht.
Wie ist die Reihenfolge der Übergangskurzschrift?
Die Reihenfolge ist Eigenschaft, Dauer, Timing-Funktion, Verzögerung, zum Beispiel Übergang: Opazität 300 ms easy-in-out 100 ms. Der erste Zeitwert ist immer die Dauer und der zweite ist immer die Verzögerung, also wird ein einzelner Zeitwert als Dauer gelesen.
Warum wird mein Display: keines angezeigt: Blockübergang nicht animiert?
Denn Display ist keine animierbare Eigenschaft Zwischen Null und Block gibt es keinen Zwischenwert, so dass der Browser nichts zwischen Transition opacity und visibility samply statt, oder Transition-behavior: tlow-diskrete in neueren Browsern zum Einblenden aus Display: none.
Kann ich mehr als eine Immobilie gleichzeitig übertragen?
Ja. Trennen Sie jeden Übergang mit einem Komma, zum Beispiel Übergang: Opazität 300 ms Leichtigkeit, transformieren Sie 200 ms Leichtigkeit-Aus Dieser Generator erstellt diese Liste für Sie, wenn Sie Ebenen hinzufügen, und gibt jeder Eigenschaft ihre eigene Dauer, Zeitfunktion und Verzögerung.
Was ist eine kubisch-bezier-Zeitfunktion?
Eine kubisch-bezier-Timing-Funktion definiert eine benutzerdefinierte Beschleunigungskurve von zwei Kontrollpunkten, geschrieben kubisch-bezier (x1, y1, x2, y2).Die Schlüsselwörter Leichtigkeit, Leichtigkeit-Ein, Leichtigkeit-Aus und Leichtigkeit-Aus-Aus-Kurzbefehle für bestimmte Kurven, und Kontrollpunkte über 1 oder unter 0 erzeugen ein Überschwingen, so wird ein Abprall aufgebaut.
Welche Eigenschaften sollte ich für eine reibungslose Performance animieren?
Transformieren und Opazität bevorzugen Sie sind auf der GPU zusammengesetzt und lösen kein Layout aus, daher animieren sie mit 60 fps. Die Animation von Breite, Höhe, oben, links oder am Rand zwingt den Browser, das Layout auf jedem Frame neu zu berechnen, was die häufigste Ursache für Stotterübergänge ist.
Ist das generierte Übergangs-CSS kostenlos und sicher zu verwenden?
Ja. Das Tool ist völlig kostenlos ohne Anmelde - oder Nutzungsbeschränkungen, und es sendet standardmäßiges, vorfixiertes CSS aus, das in jedem modernen Browser unterstützt wird. Alle Verarbeitungen finden in Ihrem Browser statt, sodass nichts hochgeladen wird und das Tool nach dem Laden offline funktioniert.
