CSS-Übergangsgenerator

Der CSS Transition Generator ist ein visueller Editor für die CSS Transition-Eigenschaft Sie wählen aus, welche Eigenschaft Sie animieren möchten, legen die Dauer fest, wählen eine Timing-Funktion aus und fügen eine Verzögerung hinzu, dann lösen Sie eine Live-Vorschau aus, um die exakte Lockerung vor dem Kopieren der Deklaration zu beobachten Sie können mehrere Übergänge in einer Kurzschrift schichten - zum Beispiel beim Verschieben einer Transformation eine verblassende Deckkraft - und jede Ebene erhält ihre eigene Eigenschaft, Dauer, Zeitmessung und Verzögerung.

Ein Übergang weist den Browser an, die Änderung zwischen zwei Werten einer Eigenschaft zu animieren, anstatt sofort zu wechseln Ändern Sie eine Hintergrundfarbe im Schwebezustand ohne Übergang und es schnappt; fügen Sie den Übergang hinzu: Hintergrundfarbe 200 ms erleichtert sich und dieselbe Änderung erleichtert sich über eine Fünftelsekunde. Der Übergang lebt im Basiszustand, nicht im Schwebezustand, sodass das Element sowohl in die Änderung hinein als auch aus ihr heraus animiert, was dazu führt, dass sich eine Interaktion auf dem Rückweg beendet und nicht abrupt anfühlt.

Alles passiert in Ihrem Browser Starten Sie von einer Voreinstellung wie Fade, Button hover oder Bounce, passen Sie die Schieberegler an und wählen Sie aus, drücken Sie den Vorschauauslöser, um die Bewegung zu sehen, und kopieren Sie die Kurzschrift Das Tool schreibt die vier Teile in der Reihenfolge, die die Spezifikation benötigt - Eigenschaft, Dauer, Timing-Funktion, Verzögerung - und lässt die Verzögerung weg, wenn sie Null ist Kein Konto, kein Upload, und es arbeitet offline weiter, sobald die Seite geladen wurde.

Der häufigste Fehler besteht darin, eine Eigenschaft zu übertragen, die keine Zwischenwerte hat. anzeigen: keine anzeigen: block kann nicht animiert werden, da die Anzeige keine animierbare Eigenschaft ist - es gibt keine Hälfte zwischen keiner und block - weshalb ein Fade-in auf Display allein springt Die Fixierung besteht darin, Deckkraft und Sichtbarkeit zusammen zu übergehen oder das neuere zulässige diskrete Verhalten zu verwenden. Es lohnt sich auch, Transformation und Deckkraft gegenüber Breite, Höhe, oben oder links zu animieren: Die ersten beiden sind auf der GPU zusammengesetzt und lösen kein Layout aus, sodass sie glatt bleiben, während animierende Layouteigenschaften die Seite auf jedem Frame rekalkulieren und die übliche Quelle scherzhafter, stotternder Übergänge sind.