Über CSS3 wird das Übergangsattribut verwendet, um Übergangseffekte zu erzielen

Das neue Transformationsattribut in CSS3 kann den Übergangseffekt von Elementen während des Transformationsprozesses realisieren und grundlegende Animationen realisieren. In diesem Artikel erfahren Sie, wie CSS3 das Übergangsattribut verwendet, um Übergangseffekte zu erzielen. Freunde, die es benötigen, können sich auf diesen Artikel beziehen

Ausführliche Erklärung des Attributs

Der Zweck des Übergangsattributs besteht darin, einige CSS-Eigenschaften (z. B. Hintergrund) mit einem sanften Übergangseffekt erscheinen zu lassen. Es handelt sich um eine zusammengeführte Eigenschaft, die aus den folgenden vier Eigenschaften besteht:

• transition-property: Legen Sie die CSS-Eigenschaft des Anwendungsübergangs fest, z. B. den Hintergrund.

• Übergangsdauer: Legen Sie die Zeit fest, die für den Übergangseffekt benötigt wird. Der Standardwert ist 0.

• Übergangs-Timing-Funktion: Stellen Sie die Zeitkurve des Übergangseffekts ein. Der Standardwert ist „einfach“.

• Übergangsverzögerung: Gibt an, wann der Übergangseffekt beginnt. Der Standardwert ist 0.

Beispiel:

 button{
    transition: background 1s;
    -webkit-transition: background 1s; /* Safari */
 }

Beim Definieren des Übergangsattributs sind „transition-property“ und „transition-duration“ erforderlich, andere Zwei sind optional.

Übergangseigenschaft und Übergangsdauer

Übergangseigenschaft wird verwendet, um die CSS-Eigenschaften zum Anwenden von Übergangseffekten anzugeben. Diese Eigenschaften umfassen (. ist möglicherweise nicht vollständig):

• Breite

• Höhe

• Farbe

• Hintergrund (Farbe, Bild, Position)

• transformieren (im nächsten Beitrag)

• Rand (Farbe, Breite)

• Position (oben, unten, links, rechts)

• Text (Größe, Stärke, Schatten, Wortabstand)

• Rand

• Auffüllung

• Deckkraft

• Sichtbarkeit

• z-index

• all

Das Attribut „transition-duration“ wird zum Festlegen der verwendet Übergangseffektzeit des angegebenen Attributs, die Sekunden (s) oder Millisekunden (ms) betragen kann.

Übergangsverzögerung und Übergangszeitfunktion

Übergangsverzögerung wird verwendet, um die Startzeit des Übergangseffekts festzulegen ist 0. Sie können Sekunden (s) oder Millisekunden (ms) angeben. Wenn die Übergangsverzögerung eine negative Zahl ist, bedeutet dies, dass der Übergangseffekt früh beginnt.

Übergangs-Timing-Funktion wird verwendet, um die Übergangseffekte einzustellen:

• Leichtigkeit – langsam am Anfang, schnell in der Mitte, langsam am Ende Ende

• ease-in – Einblendeffekt, langsames Ein- und Ausblenden

• ease-out – Ausblendeffekt, schnelles Einfahren und langsam aus.

• ease-in-out – Langsam beginnen und langsam enden

• cubic-bezier(n,n,n,n ) – Definieren Sie Ihren eigenen Wert in der Kubik-Bezier-Funktion. Mögliche Werte sind numerische Werte zwischen 0 und 1

Beispiel:

 button{
   transition: background 1s ease-in-out 2s;
   -webkit-transition: background 1s ease-in-out 2s; /* Safari */
 }

Mehrere Attribute

Bei mehreren Attributen werden die Auswirkungen jedes Attributs durch Kommas getrennt:

  button{
     transition: background 1s ease-in-out 2s, width 2s linear;
     -webkit-transition: background 1s ease-in-out 2s, width 2s linear; /* Safari */
   }

Kompatibilität

Internet Explorer 10, Firefox, Opera und Chrome unterstützen das Übergangsattribut.

Safari unterstützt ein alternatives -webkit-transition-Attribut.

Internet Explorer 9 und frühere Browser unterstützen das Übergangsattribut nicht.

Auslöser

Es ist zu beachten, dass der Übergangseffekt zuvor definierte Attribute erfordert und der Übergangseffekt durch Auslösen angewendet wird. wie zum Beispiel: Hover, :Fokus und :Aktiv usw.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

So verwenden Sie CSS3, um einen sich ständig ändernden Textschatten-Textschatteneffekt zu erzielen

CSS3-Animation zum Implementieren eines einfache Diashow-Karusselleffekte

Das obige ist der detaillierte Inhalt vonÜber CSS3 wird das Übergangsattribut verwendet, um Übergangseffekte zu erzielen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!