Zusammenfassung der CSS3-Transformations-, Übergangs- und Animationseigenschaften

Drei CSS3 Animation 🎜>:

Transfürm

Browser-Unterstützung:

Internet Explorer 10, Firefox, Opera unterstützen Transformationsattribut .

Internet Explorer 9 unterstützt alternative -ms-transform-Attribute (nur für 2D-Transformation) und

Chr

ome-Unterstützung und 2D-Transformationen). Opera unterstützt nur 2D-Transformationen

2D-Transformationsmethoden >

Funktion Beschreibung translate(x, y) Definieren Sie eine 2D-Transformation, die Elemente entlang der X- und Y-Achse bewegt. rotate(angle) Definieren Sie die 2D-Rotation und geben Sie den Winkel in den Parametern an scale(x,y) Definieren Sie eine 2D-Skalierungstransformation, um die Breite und Höhe des Elements zu ändern skew(x-angle,y-angle) Definieren Sie eine 2D-Neigungstransformation entlang der X- und Y-Achse matrix(n,n,n,n,n,n) Definieren Sie eine 2D-Transformation unter Verwendung einer Matrix aus sechs Werten

• Die Methode translator(x, y) bewegt sich von der aktuellen Elementposition entsprechend den Parametern, die durch die linke (X-Achse) und obere (Y-Achse) Position gegeben sind. Die Werte von x und y können positiv oder negativ sein, was jeweils einen Versatz in verschiedene Richtungen darstellt.

• rotate(angle)-Methode, stellt den Drehwinkel dar. Wenn der Winkel positiv ist, dreht sich das Element im Uhrzeigersinn; wenn er negativ ist, dreht sich das Element gegen den Uhrzeigersinn.

• scale(x, y)-Methode, die das Skalierungsverhältnis des Elements auf der x-Achse und der y-Achse angibt. Wenn der Parameter größer als 1 ist, wird das Element vergrößert. und wenn es kleiner als 1 ist, wird das Element reduziert.

• Skew-Methode (x-Winkel, y-Winkel), die zum Verzerren von Elementen verwendet wird. Der erste Parameter ist der horizontale Verzerrungswinkel und der zweite Parameter ist die vertikale Richtung. Der zweite Parameter ist ein optionaler Parameter. Wenn der zweite Parameter nicht festgelegt ist, ist die Y-Achse die Methode 0deg

• matrix(n,n,n,n,n,n). eine 2D-Transformation in Form einer Transformationsmatrix mit sechs Werten. Dieser Attributwert verwendet die Matrix

transform-origin in Bezug auf Mathematik

Die zuvor erwähnten Transformationsmethoden basieren alle auf der Mitte des Elements, d. h. der Basispunkt der Elementtransformation ist standardmäßig die Mitte des Elements. Aber manchmal müssen wir diese Operationen an Elementen an unterschiedlichen Positionen ausführen, dann können wir transform-origin verwenden, um die Basisposition des Elements zu ändern. Dieses Attribut kann drei Parameter empfangen:

transform-origin: x-axis y-axis z-axis; kann den Zeichenparameterwert links, rechts

oder den entsprechenden Prozentwert des Zeichenparameterwerts annehmen: links=0%; rechts=100%.

• y-Achse, die den Wert in vertikaler Richtung angibt, Sie können auch den Zeichenwert oben

  , Mitte,
unten
• oder festlegen Nehmen Sie den Prozentsatz, der den Zeichenparameterwerten entspricht: oben = 0 %; unten = 100 %.

  z-Achse, die angibt, wo die Ansicht

  auf der Z-Achse platziert ist, wird bei der 3D-Verformung verwendet.

• 3D-Transformationsmethode

Internet Explorer 10 und Firefox unterstützen 3D-Transformation

Chrome und Safari müssen das Präfix -webkit- hinzufügen. . Opera unterstützt noch keine 3D-Transformationen (2D-Transformationen werden unterstützt).

3D-Transformationen verwenden dieselben Eigenschaften wie 2D-Transformationen.

3D-Transformation
in CSS3 umfasst hauptsächlich die folgenden Funktionsfunktionen:

3D-Verschiebung: 3D-Verschiebung in CSS3 umfasst hauptsächlich TranslateZ() und Translate3d() Funktionsfunktionen; >

3D-Rotation: Die 3D-Rotation in CSS3 umfasst hauptsächlich vier Funktionsfunktionen: rotierenX(), rotierenY(), rotierenZ() und rotieren3d(); >3D-Skalierung: Die 3D-Skalierung in CSS3 umfasst hauptsächlich zwei Funktionsfunktionen: ScaleZ() und Scale3D(); Funktion matrix3d().
verfügt außerdem über die folgenden Transformationsattribute:
• transform-style: Gibt an, wie verschachtelte Elemente im 3D-Raum angezeigt werden.

• Perspektive: Legt den perspektivischen Effekt von 3D-Elementen fest.

perspective-origin: Gibt die untere Position des 3D-Elements an.

backface-
• visibility

  : Definiert, ob das Element sichtbar ist, wenn es nicht auf den Bildschirm blickt.

• Derzeit ist die Kompatibilität des Transformations-3D-Attributs in den wichtigsten Mainstream-Browsern nicht besonders gut. Interessierte Leser können selbst mehr darüber erfahren. Im Folgenden stellen wir einige häufig verwendete Funktionsmethoden vor:
  rotateX()-Methode, rotate das Element um seine Das Element, das entlang der Achse gedreht werden soll;
Methode „rotateZ()“, das Element, das um einen bestimmten Grad um die Z-Achse gedreht werden soll.

• Übergang

W3C

Der Übergang von CSS3 im Standard wird wie folgt beschrieben: „Der Übergang von CSS ermöglicht css Der Attributwert wechselt innerhalb eines bestimmten Zeitintervalls reibungslos. Dieser Effekt kann durch Mausklick, Fokus, Klick oder eine beliebige Änderung des Elements ausgelöst werden und ändert den CSS-Attributwert reibungslos mit einem Animationseffekt.“

Der Wert des

transition-Attributs umfasst die folgenden vier:

transition-property: Geben Sie an, welches CSS-Attribut des

HTML-Elements

die Übergangsgradientenverarbeitung durchführen soll Bei diesem Attribut kann es sich um verschiedene Standard-CSS-Attribute wie Farbe, Breite,

Höhe

usw. handeln.

Übergangsdauer: Geben Sie die Dauer des Attributübergangs an

Übergangs-Timing-Funktion: Geben Sie die Geschwindigkeit des Gradienten an:
1. Ease: (allmählich verlangsamt) Standardwert, die Ease-Funktion entspricht der Bezier-Kurve (0,25, 0,1). , 0,25, 1,0);
2. linear: (gleichmäßige Geschwindigkeit), die lineare Funktion entspricht der Bezier-Kurve (0,0, 0,0, 1,0, 1,0); Die Ease-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.

Übergangsverzögerung: Geben Sie die Verzögerungszeit an, also wie lange es dauert, bis der Übergangsprozess startet.

Browserkompatibilität

Internet Explorer 9 und frühere Versionen, der Übergang Attribut wird nicht unterstützt.

Internet Explorer 10, Firefox, Opera und Chrome unterstützen das Übergangsattribut. Chrome 25 und früher sowie Safari erfordern das Präfix -webkit-.

Animation

Um Animationsanimationen verwenden zu können, müssen Sie sich zunächst mit Keyframes

, den grammatikalischen Regeln von Keyframes, vertraut machen : Die Benennung beginnt mit „@keyframes“, gefolgt vom „Namen der Animation“ und einem Paar geschweifter Klammern „{}“. In den Klammern stehen einige Stilregeln für verschiedene Zeiträume. Verschiedene Keyframes werden durch „von“ (entspricht 0 %), „bis“ (entspricht 100 %) oder als Prozentsatz (um die beste Browserunterstützung zu erhalten, wird empfohlen, den Prozentsatz zu verwenden) ausgedrückt,

@keyframes ist definiert, damit es funktioniert, es muss durch Animation an einen Selektor gebunden werden, sonst hat die Animation keine Wirkung. Die Attribute der Animation sind unten aufgeführt:

Gibt an, wann die Animation beginnt.

Attribut

Beschreibung

Wert

animation

Abkürzungsattribut für alle Animationsattribute, außer dem Attribut „animation-play-state“

animation-name

Gibt den Namen der @keyframes-Animation an

animation-duration

Gibt die Sekunden oder Millisekunden an, die die Animation benötigt, um einen Zyklus abzuschließen

Der Standardwert ist 0

animation-timing- Funktion

Gibt die Geschwindigkeitskurve der Animation an

Der Standardwert ist „ease“

animation-delay

Der Standardwert ist 0

animation-iteration-count

Gibt an, wie oft die Animation abgespielt wird

Der Standardwert ist 1 (unendlich: unbegrenzte Male

animation-Richtung

Gibt an, ob die Animation im nächsten Zyklus rückwärts abgespielt wird.

Der Standardwert ist „normal“ (rückwärts: in Rückwärtsrichtung abspielen; alternativ: ungerade oft in Vorwärtsrichtung abspielen, abspielen).

animation- play-state

Gibt an, ob die Animation läuft oder pausiert

Der Standardwert ist „running“ (pausiert: Animation anhalten)

属性	描述	取值
animation	所有动画属性的简写属性，除了 animation-play-state 属性
animation-name	规定 @keyframes 动画的名称
animation-duration	规定动画完成一个周期所花费的秒或毫秒	默认是 0
animation-timing-function	规定动画的速度曲线	默认是 “ease”
animation-delay	规定动画何时开始	默认是 0
animation-iteration-count	规定动画被播放的次数	默认是 1（infinite：无限次
animation-direction	规定动画是否在下一周期逆向地播放	默认是 “normal”（reverse：反向播放；alternate：奇数次正向播放，偶数次反向播放；alternate-reverse：奇数次反向播放，偶数次正向播放。）
animation-play-state	规定动画是否正在运行或暂停	默认是 “running”（paused：暂停动画）

Browserkompatibilität

Internet Explorer 10, Firefox und Opera unterstützen @keyframes-Regeln und Animationsattribute.

Chrome und Safari erfordern das Präfix -webkit-.

Hinweis: Internet Explorer 9 und früher unterstützen keine @keyframe-Regeln oder Animationseigenschaften.

Der obige Inhalt stammt von: http://blog.csdn.net/u014607184/article/details/51801393

Das obige ist der detaillierte Inhalt vonZusammenfassung der CSS3-Transformations-, Übergangs- und Animationseigenschaften. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!