Der Übergang umfasst hauptsächlich die Einführung von vier Attributwerten

Übergang enthält hauptsächlich vier Attributwerte:
Attribute zum Ausführen der Transformation: transition-property,
Zeit für die Dauer der Transformation: transition-duration,
Während der Dauer, die Transformationsrate Änderungentransition-timing-function ,
Transformationsverzögerungszeittransition-delay.
Sehen wir uns diese vier Attributwerte separat an

1. Übergangseigenschaft

Syntax:

transition-property ： none | all | [ <IDENT> ] [ ',' <IDENT> ]*

transition-property Ja Wird verwendet, um anzugeben, dass der Übergangseffekt ausgeführt wird, wenn sich eines der Attribute des Elements ändert. Er hat hauptsächlich die folgenden Werte: none (keine Attribute ändern sich). Dies ist auch der Standardwert (Name des Elementattributs). Wenn der Wert „none“ ist, wird die Ausführung des Übergangs sofort gestoppt. Wenn er als „all“ angegeben ist, wird der Übergangseffekt ausgeführt, wenn sich ein Attributwert des Elements ändert. ident kann einen bestimmten Attributwert des Elements angeben. Die entsprechenden Typen sind wie folgt:

• 1. Farbe: Transformiert durch Rot-, Grün-, Blau- und Transparenzkomponenten (jeder numerische Wert wird verarbeitet), wie zum Beispiel: Hintergrundfarbe, Rahmenfarbe , Farbe, CSS-Attribute wie Umrissfarbe;

• 2. Länge: reelle Zahlen wie: Wortabstand, Breite, vertikale Ausrichtung, oben, rechts, unten, links, Polsterung, Umrissattribute wie Breite, Rand, Mindestbreite, Mindesthöhe, Maximalbreite, Zeilenhöhe, Höhe, Randbreite, Randabstand, Hintergrundposition; >

3. Prozentsatz: reelle Zahlen wie: Wortabstand, Breite, vertikale Ausrichtung, oben, rechts, unten, links, minimale Breite, minimale Höhe, maximale Breite, maximale Höhe, line-height, height, background-position und andere Attribute;
4. Ganzzahlige diskrete Schritte (ganze Zahlen) treten im realen digitalen Raum auf und werden mit floor() in ganze Zahlen umgewandelt. wie zum Beispiel: Outline-Offset, Z-Index und andere Attribute;
5. Realer (Gleitkomma-)Wert, wie zum Beispiel: Zoom, Deckkraft, Schriftstärke und andere Attribute ;
6. Einzelheiten finden Sie unter: „CSS3-Transformation“
7 , Breite und Höhe (in numerische Werte umgewandelt), wie zum Beispiel: Zuschneiden
8. Sichtbarkeit: diskrete Schritte im Bereich von 0 bis 1, 0 bedeutet „versteckt“, 1 bedeutet vollständig „angezeigt“, wie zum Beispiel: Sichtbarkeit
9. Schatten: Wirkt auf Farb-, X-, Y- und Unschärfeattribute, wie zum Beispiel: Textschatten
10. Verlauf: Durch jede Änderung ändern sich Position und Farbe des Anschlags. Sie müssen denselben Typ (radial oder linear) und denselben Stoppwert haben, um eine Animation auszuführen, z. B.: Hintergrundbild
11. Paint Server (SVG): wird nur unterstützt Die folgende Situation: Von Farbverlauf zu Farbverlauf und von Farbe zu Farbe, dann ist die Arbeit ähnlich wie oben
12. Durch Leerzeichen getrennte Liste von oben: Wenn die Liste den gleichen Elementwert hat , dann ändert sich jedes Element gemäß den oben genannten Regeln, andernfalls gibt es keine Änderung
13 eine Abkürzungseigenschaft: Wenn alle Teile der Abkürzung animiert werden können, wird sie geändert wie alle einzelnen Eigenschaftsänderungen
Welche spezifischen CSS-Attribute können den Übergangseffekt erzielen? Alle CSS-Attributwerte und Werttypen, die den Übergangseffekt erzielen können, sind im W3C-Beamten aufgeführt Website. Sie können hier klicken, um mehr zu erfahren. Hier muss daran erinnert werden, dass nicht alle Attributänderungen den Übergangsaktionseffekt auslösen, z. B. die adaptive Breite der Seite. Wenn der Browser die Breite ändert, wird der Übergangseffekt nicht ausgelöst. Allerdings lösen Änderungen an den in der obigen Tabelle gezeigten Attributtypen einen Übergangsaktionseffekt aus.

2. Übergangsdauer

Syntax:

transition-duration ： <time> [, <time>]*

wird verwendet, um die Dauer des Elementkonvertierungsprozesses anzugeben value: ist ein numerischer Wert, die Einheit ist s (Sekunden) oder ms (Millisekunden) und kann auf alle Elemente angewendet werden, einschließlich :before und :after Pseudoelemente. Der Standardwert ist 0, was bedeutet, dass die Transformation sofort erfolgt.

transition-duration3. Transition-timing-function

Syntax:

transition-timing-function ： ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)
 [, ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)]*

Wert:

Wert Ermöglicht Ihnen um die Transformationsrate von Attributwerten entsprechend dem Fortschreiten der Zeit zu ändern. Die Übergangs-Timing-Funktion hat 6 mögliche Werte:

transition-timing-function

1. (verlangsamt sich allmählich ) Standardwert, Leichtigkeit Die Funktion entspricht der Bezier-Kurve (0,25, 0,1, 0,25, 1,0).
2. Linear: (gleichmäßige Geschwindigkeit), die lineare Funktion entspricht die Bezier-Kurve (0,0, 0,0, 1,0, 1,0).
3. Easy-In: (Beschleunigung), die Easy-In-Funktion entspricht der Bezier-Kurve (0,42, 0 , 1,0, 1,0).
4. Ease-Out: (Verzögerung), die Ease-Out-Funktion entspricht der Bezier-Kurve (0, 0, 0,58, 1,0).
5. Ease-in-out: (beschleunigen und dann abbremsen), die Ease-in-out-Funktion entspricht der Bezier-Kurve (0,42, 0, 0,58, 1,0)
6. Kubik-Bezier: (Mit diesem Wert können Sie eine Zeitkurve anpassen), eine bestimmte Kubik-Bezier-Kurve. Die vier Werte (x1, y1, x2, y2) gelten spezifisch für die Punkte P1 und P2 auf der Kurve. Alle Werte müssen im Bereich [0, 1] liegen, sonst sind sie ungültig.
4. Übergangsverzögerung

Syntax:

transition-delay是用来指定一个动画开始执行的时间，也就是说当改变元素属性值后多长时间开始执行transition效果，其取值：为数值，单位为s（秒）或者ms(毫秒)，其使用和transition-duration极其相似，也可以作用于所有元素，包括:before和:after伪元素。 默认大小是"0"，也就是变换立即执行，没有延迟。

有时我们不只改变一个css效果的属性,而是想改变两个或者多个css属性的transition效果，那么我们只要把几个transition的声明串在一起，用逗号（“，”）隔开，然后各自可以有各自不同的延续时间和其时间的速率变换方式。但需要值得注意的一点：transition-delay与transition-duration的值都是时间，所以要区分它们在连写中的位置，一般浏览器会根据先后顺序决定，第一个可以解析为时间的怭值为transition-duration,第二个为transition-delay。如：

a {-moz-transition: background 0.5s ease-in,color 0.3s ease-out;
-webkit-transition: background 0.5s ease-in,color 0.3s ease-out;
-o-transition: background 0.5s ease-in,color 0.3s ease-out;
transition: background 0.5s ease-in,color 0.3s ease-out;
  }

如果你想给元素执行所有transition效果的属性，那么我们还可以利用all属性值来操作，此时他们共享同样的延续时间以及速率变换方式，如：

a {-moz-transition: all 0.5s ease-in;
-webkit-transition: all 0.5s ease-in;-o-transition: all 0.5s ease-in;
transition: all 0.5s ease-in;
  }

综合上述我们可以给transition一个速记法：transition: 如下图所示：

相对应的一个示例代码：

p {
  -webkit-transition: all .5s ease-in-out 1s;
  -o-transition: all .5s ease-in-out 1s;
  -moz-transition: all .5s ease-in-out 1s;
  transition: all .5s ease-in-out 1s;
}

 

Das obige ist der detaillierte Inhalt vonDer Übergang umfasst hauptsächlich die Einführung von vier Attributwerten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!