Suche…


Syntax

  • Übergang: [Übergangseigenschaft] [Übergangsdauer] [Übergangszeitfunktion] [Übergangsverzögerung];

Parameter

Parameter Einzelheiten
Übergangseigenschaft Die spezifische CSS-Eigenschaft, deren Wertänderung umgestellt werden muss (oder all , wenn alle umschaltbaren Eigenschaften umgestellt werden müssen.
Übergangszeit Die Dauer (oder Periode) in Sekunden ( s ) oder Millisekunden ( ms ), über die der Übergang stattfinden muss.
Übergangszeitfunktion Eine Funktion, die beschreibt, wie die Zwischenwerte während des Übergangs berechnet werden. Häufig verwendete Werte sind ease , ease-in , ease-out , ease-in-out , linear , cubic-bezier() , die steps() . Weitere Informationen zu den verschiedenen Timing-Funktionen finden Sie in den W3C-Spezifikationen .
Übergangsverzögerung Die Zeit, die vergangen sein muss, bevor der Übergang beginnen kann. Kann in Sekunden ( s ) oder Millisekunden ( ms ) angegeben werden

Bemerkungen

Einige ältere Browser unterstützen nur transition Herstellerpräfix :

  • -webkit : Chrome 25-, Safari 6-, Safari & Chrome für iOS 6.1-, Android 4.3- Browser, Blackberry Browser 7-, UC Browser 9.9- für Android.
  • -moz : Firefox 15-.
  • -o : Opera 11.5-, Opera Mobile 12-.

Beispiel:

-webkit-transition: all 1s;
-moz-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;

Übergangskurzschrift

CSS

div{
    width: 150px;
    height:150px;
    background-color: red;
    transition: background-color 1s;
}
div:hover{
    background-color: green;
}

HTML

<div></div>

In diesem Beispiel wird die Hintergrundfarbe geändert, wenn das div angezeigt wird.

Transition (Longhand)

CSS

div {
  height: 100px;
  width: 100px;
  border: 1px solid;
  transition-property: height, width;
  transition-duration: 1s, 500ms;
  transition-timing-function: linear;
  transition-delay: 0s, 1s;
}
div:hover {
  height: 200px;
  width: 200px;
}

HTML

<div></div>
  • Übergangseigenschaft : Gibt die CSS-Eigenschaften an, für die der Übergangseffekt gilt. In diesem Fall wird das div sowohl horizontal als auch vertikal erweitert, wenn es im Hover-Modus ist.
  • Übergangsdauer : Gibt die Zeitdauer an, für die ein Übergang abgeschlossen ist. Im obigen Beispiel dauern die Höhen- und Breitenübergänge 1 Sekunde bzw. 500 Millisekunden.
  • Transition-Timing-Funktion : Bestimmt die Geschwindigkeitskurve des Übergangseffekts. Ein linearer Wert zeigt an, dass der Übergang vom Anfang bis zum Ende die gleiche Geschwindigkeit hat.
  • Übergangsverzögerung : Gibt an, wie lange es dauert, bis der Übergangseffekt beginnt. In diesem Fall beginnt die Höhe sofort mit dem Übergang, während die Breite 1 Sekunde wartet.

Kubik-Bezier

Die cubic-bezier Funktion ist eine Übergangszeitfunktion, die häufig für benutzerdefinierte und glatte Übergänge verwendet wird.

transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);

Die Funktion benötigt vier Parameter:

cubic-bezier(P1_x, P1_y, P2_x, P2_y)

Kubik-Bezier

Diese Parameter werden auf Punkte abgebildet, die Teil einer Bézier-Kurve sind :

Bezier-Kurve

Bei CSS-Bézier-Kurven liegen P0 und P3 immer an derselben Stelle. P0 liegt bei (0,0) und P3 bei (1,1), was bedeutet, dass die an die Cubic-Bezier-Funktion übergebenen Parameter nur zwischen 0 und 1 liegen können.

Wenn Sie Parameter übergeben, die nicht in diesem Intervall liegen, verwendet die Funktion standardmäßig einen linear Übergang.

Da Cubic-Bezier der flexibelste Übergang in CSS ist, können Sie alle anderen Übergangszeitfunktionen in Cubic-Bezier-Funktionen übersetzen:

linear : cubic-bezier(0,0,1,1)

ease-in : cubic-bezier(0.42, 0.0, 1.0, 1.0)

ease-out : cubic-bezier(0.0, 0.0, 0.58, 1.0)

cubic-bezier(0.42, 0.0, 0.58, 1.0) ease-in-out : cubic-bezier(0.42, 0.0, 0.58, 1.0)



Modified text is an extract of the original Stack Overflow Documentation
Lizenziert unter CC BY-SA 3.0
Nicht angeschlossen an Stack Overflow