Verwenden von CSS3 zum Erzielen von Übergangs- und Animationseffekten

Warum sollten wir CSS-Animationen anstelle von JS-Animationen verwenden?

Es gibt zwei Hauptgründe für die geringe Effizienz von JavaScript: die Manipulation des DOM und die Verwendung von Seitenanimationen.

Normalerweise verwenden wir DOM und CSS häufig, um visuelle Animationseffekte zu erzielen. Dies hat zwei Faktoren zur Folge, die die JS-Effizienz beeinträchtigen. Wenn DOM und CSS häufig verwendet werden, wird der Browser ständig neu formatiert und neu gezeichnet. Da der verfügbare Speicher des Browsers bei PC-Browsern relativ groß ist, können Benutzer die durch die Seitenanimation verursachte Neuzeichnung und den Neufluss mit bloßem Auge kaum erkennen. Daher müssen sich Ingenieure kaum Gedanken über die durch Animationen verursachten Leistungsprobleme machen. Auf Mobilgeräten sieht es jedoch ganz anders aus. Dem integrierten Browser von Mobilgeräten wird nicht so viel Speicher zugewiesen wie dem von PC-Browsern. Derzeit bietet der WebKit-Browser die beste Unterstützung für CSS3. Der erste Browser mit WebKit-Kernel ist Safari und der zweite Chrome.

Vorteile der Verwendung von CSS3-Animationen anstelle von JS-Simulationsanimationen:

• Belegt nicht den JS-Hauptthread;
• Kann die Vorteile der Hardwarebeschleunigung nutzen;
• Der Browser kann Animationen optimieren (keine Animation, wenn das Element nicht sichtbar ist, um die Auswirkungen auf die FPS zu verringern)

CSS3-Animation bietet 2D-, 3D- und reguläre Animationsattributschnittstellen. Sie kann mit jedem Attribut jedes Elements auf der Seite arbeiten. CSS3-Animation wird in der Sprache C geschrieben und ist eine Animation auf Systemebene.

Ob JS-Animation oder CSS3-Animation verwendet werden soll, erfordert von Entwicklern unterschiedliche Entscheidungen basierend auf unterschiedlichen Anforderungen. Es sollte jedoch ein Grundprinzip befolgt werden: Wenn Sie eine 2D-Animation durchführen müssen, müssen Sie CSS3-Übergänge oder -Animationen verwenden.

Die Unterschiede zwischen CSS3-Animation und JavaScript-Simulationsanimation sind folgende:

• CSS 3D-Animation kann nicht in js implementiert werden
• CSS3 3D-Animation ist eine sehr leistungsstarke Funktion in CSS3. Da es in einem dreidimensionalen Raum funktioniert, kann js keine 3D-Animation wie CSS3 simulieren.
• Die 2D-Matrixanimation mit CSS ist effizienter als die JS-Matrixanimation mit Rändern, links und oben.
• Die 2D-Animation von CSS3 bezieht sich auf die Änderung der 2D-Matrixtransformation. Natürlich kann js keine Deformationsanimation durchführen. Nehmen wir zum Beispiel die Koordinatenanimation. Die Verwendung von CSS3-Transformation zur Erstellung einer TranslateXY-Animation ist fast 700 mm schneller als die Links- und Rechtspositionierung in JS! Und sie ist auch optisch viel flüssiger als JS-Animation.
• Die Effizienz anderer gängiger Animationseigenschaften von CSS3 ist geringer als die von js-simulierten Animationen.
• Die regulären Animationseigenschaften beziehen sich hier auf: Höhe, Breite, Deckkraft, Rahmenbreite, Farbe

CSS3-Eigenschaften

2D-Transformationen

CSS3-Transformationen können Elemente verschieben, skalieren, drehen, strecken oder verlängern.

Das Transform-Attribut gilt für Elemente, die in 2D oder 3D transformiert werden

transform-origin Attribut, legt die Position des transformierten Elements fest

1. Die Methode translate() bewegt sich von der aktuellen Elementposition gemäß den durch die linke (X-Achse) und obere (Y-Achse) Position angegebenen Parametern.

div {
  transformieren: übersetzen(50px,100px);
  -webkit-transform: translate(50px,100px); /* Safari und Chrome */
}

2.rotate()-Methode, dreht das Element im Uhrzeigersinn um einen bestimmten Grad. Es sind auch negative Werte erlaubt, welche das Element gegen den Uhrzeigersinn drehen.

div {
  transformieren: drehen (30 Grad);
  -webkit-transform: rotate(30deg); /* Safari und Chrome */
}

3. scale()-Methode: Die Größe des Elements wird abhängig von den Parametern width (X-Achse) und height (Y-Achse) vergrößert oder verkleinert

div {
    -webkit-transform: Skala(2,3); /* Safari /
    transform: scale(2,3); /Standardsyntax*/
}

4.skew([,]) enthält zwei Parameterwerte, die jeweils die Neigungswinkel der X- und Y-Achse darstellen. Wenn der zweite Parameter leer ist, ist der Standardwert 0. Ein negativer Parameter gibt eine Neigung in die entgegengesetzte Richtung an.

div {
    Transformation: Schrägstellung (30 Grad, 20 Grad);
    -ms-transform:skew(30deg,20deg); /* IE 9 /
    -webkit-transform: skew(30deg,20deg); / Safari und Chrome */
}

3D-Transformation

 translate3d(x,y,z) definiert eine 3D-Verschiebung.
translateX(x) definiert eine 3D-Translation, wobei nur Werte für die X-Achse verwendet werden.
translateY(y) definiert eine 3D-Translation, wobei nur Werte für die Y-Achse verwendet werden.
translateZ(z) definiert eine 3D-Translation, wobei nur Werte für die Z-Achse verwendet werden.
scale3d(x,y,z) definiert eine 3D-Skalierungstransformation.
scaleX(x) definiert eine 3D-Skalierungstransformation, indem ein Wert entlang der x-Achse angegeben wird.
scaleY(y) definiert eine 3D-Skalierungstransformation, indem ein Wert entlang der Y-Achse angegeben wird.
scaleZ(z) definiert eine 3D-Skalierungstransformation, indem ein Wert entlang der Z-Achse angegeben wird.
rotate3d(x,y,z,angle) definiert eine 3D-Rotation.
rotateX(angle) definiert eine 3D-Rotation um die X-Achse.
rotateY(angle) definiert eine 3D-Rotation um die Y-Achse.
rotateZ(angle) definiert eine 3D-Rotation um die Z-Achse.
Perspektive(n) Definiert die perspektivische Ansicht eines transformierten 3D-Elements.

CSS3-Übergänge

Kurzeigenschaft für Übergänge, die verwendet wird, um vier Übergangseigenschaften in einer Eigenschaft festzulegen.
Übergangseigenschaft: Gibt den Namen der CSS-Eigenschaft an, auf die der Übergang angewendet wird.
Übergangsdauer definiert, wie lange der Übergangseffekt dauert. Der Standardwert ist 0. Übergangsdauer: 5s;
Die Übergangszeitfunktion gibt die Zeitkurve des Übergangseffekts an. Der Standardwert ist „Ease“.
    linear gibt einen Übergangseffekt an, der mit der gleichen Geschwindigkeit beginnt und endet (entspricht cubic-bezier(0,0,1,1)).
    ease gibt einen Übergangseffekt an, der langsam beginnt, dann schneller wird und schließlich langsam endet (cubic-bezier(0.25,0.1,0.25,1)).
    ease-in gibt einen Übergangseffekt an, der langsam beginnt (entspricht cubic-bezier(0.42,0,1,1)).
    ease-out gibt einen Übergangseffekt an, der langsam endet (entspricht cubic-bezier(0,0,0.58,1)).
    ease-in-out gibt einen Übergangseffekt an, der langsam beginnt und endet (entspricht cubic-bezier(0.42,0,0.58,1)).
    cubic-bezier(n,n,n,n) definiert eigene Werte in der cubic-bezier-Funktion. Mögliche Werte sind Zahlen zwischen 0 und 1.
Übergangsverzögerung gibt an, wann der Übergangseffekt beginnt. Der Standardwert ist 0. Übergangsverzögerung: 2s;

CSS3-Animation

@keyframes gibt die Animation an.    
Animation. Eine Kurzeigenschaft für alle Animationseigenschaften, außer der Eigenschaft „Animation-Play-State“.    
Animationsname gibt den Namen der @keyframes-Animation an.    
Die Animationsdauer gibt die Anzahl der Sekunden oder Millisekunden an, die eine Animation benötigt, um einen Zyklus abzuschließen. Der Standardwert ist 0.    
Die Animations-Timing-Funktion gibt die Geschwindigkeitskurve der Animation an. Der Standardwert ist „Ease“.    
Der Animationsfüllmodus gibt die Stile an, die auf ein Element angewendet werden sollen, wenn keine Animation abgespielt wird (wenn die Animation abgeschlossen ist oder wenn die Animation eine Verzögerung aufweist und deshalb nicht abgespielt wird).    
Animationsverzögerung gibt an, wann die Animation startet. Der Standardwert ist 0.    
„animation-iteration-count“ gibt an, wie oft die Animation abgespielt wird. Der Standardwert ist 1.
animation-direction gibt an, ob die Animation im nächsten Zyklus in umgekehrter Richtung abgespielt werden soll. Die Standardeinstellung ist „normal“.
animation-play-state gibt an, ob die Animation läuft oder angehalten ist. Die Standardeinstellung ist „läuft“.

Zusammenfassen

Oben habe ich Ihnen die Verwendung von CSS3 zum Erzielen von Übergangs- und Animationseffekten vorgestellt. Ich hoffe, es wird Ihnen hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und ich werde Ihnen rechtzeitig antworten. Ich möchte auch allen für ihre Unterstützung der Website 123WORDPRESS.COM danken! Wenn Sie diesen Artikel hilfreich finden, können Sie ihn gerne abdrucken und dabei bitte die Quelle angeben. Vielen Dank!