CSS3-Attribute Übergang, Animation, Transformation

Dieses Mal werde ich Ihnen die CSS3-AttributeÜbergang, Animation und Transformation vorstellen. Was sind die Vorsichtsmaßnahmen bei der Verwendung der CSS3-Attribute Übergang, Animation und Transformation? Praktische Fälle. Stehen Sie auf und werfen Sie einen Blick darauf.

Als Reaktion auf die Anforderungen des Unternehmens musste ich kürzlich CSS3 verwenden, um Animationen zu erstellen. Endlich verstand ich die drei Attribute, über die ich zuvor verwirrt war.

Machen Sie hier einfach einen einfachen Vergleich, um Ihr Gedächtnis zu vertiefen.

Browserkompatibilität

CSS3-Transformationseigenschaft

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

Internet Explorer 9 unterstützt ein alternatives -ms-transform-Attribut (nur für 2D-Transformationen).

Safari und Chrome unterstützen alternative -webkit-transform-Eigenschaften (3D- und 2D-Transformationen).

Opera unterstützt nur die 2D-Konvertierung.

transform:rotate(7deg);
-ms-transform:rotate(7deg);     /* IE 9 */
-moz-transform:rotate(7deg);     /* Firefox */
-webkit-transform:rotate(7deg); /* Safari 和 Chrome */
-o-transform:rotate(7deg);     /* Opera */

CSS3-Animationseigenschaft

Internet Explorer 10, Firefox Und Opera unterstützt das Animationsattribut.

Safari und Chrome unterstützen ein alternatives -webkit-animation-Attribut.

Hinweis: Internet Explorer 9 und früher unterstützen die Animationseigenschaft nicht.

Verwendung:

animation:mymove 5s infinite;
-webkit-animation:mymove 5s infinite; /* Safari 和 Chrome */

CSS3-Übergangseigenschaft

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

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

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

Verwendung:

transition: width 2s;
-moz-transition: width 2s; /* Firefox 4 */
-webkit-transition: width 2s; /* Safari 和 Chrome */
-o-transition: width 2s;

Andere Vergleiche

Übergang und Animation gehören dazu Animationsattribute, Transformation gehört zum Attribut statisch.
Nach dem Verständnis englischer Wörter bezieht sich „Konvertierung“, „Transformation“ und „Transformation“ hauptsächlich auf die Konvertierung von Verschiebung, Größe, Position und Form. Wenn Sie die Attributtransformation direkt schreiben, erhalten Sie die transformierte Form und Position.
Übergang und Animation sind beide Animationseigenschaften, daher haben sie beide die folgenden Eigenschaften
Eigenschaft
Dauer
Timing-Funktion
Verzögerung

: Animationszeit, Animationsform, Verzögerung Bei Animationen wird die Eigenschaft zum Namen der Animation. Die einzigartigen Eigenschaften der Animation sind:

animation-iteration-count
animation-direction
Eine zum Definieren der wie oft die Animation abgespielt wird, ein Kurzformvergleich zur Definition, ob Animationen der Reihe nach in umgekehrter Reihenfolge abgespielt werden

:

Übergangsattribut: Übergang, d. h. der Übergang des CSS-Änderungsprozesses, also definieren Sie das Übergangsattribut. Die Bedeutung besteht darin, dass, wenn das Übergangsattribut definiert und geändert wird, es entsprechend der Animation dieses Übergangs geändert wird, und nicht durch eine starre direkte Änderung, die eine gute Möglichkeit bietet Animation. Im Allgemeinen schreiben wir:
-webkit-transition:all 0.85s EASY-IN 0,1s;
-o-transition:all 0.85s EASY-IN 0,1s;
-moz-transition:all 0.85s EASY -in 0,1 s;
Übergang:alle 0,85 s easy-in 0,1 s;
alle bedeutet, dass Änderungen in allen Attributen entsprechend diesem Übergang geändert werden
Animationsschreibmethode:
-webkit-animation : tang1 0,5s Leichtigkeit 0s unendlich abwechselnd;
Animation: tang1 0,5s Leichtigkeit 0s unendlich abwechselnd, also müssen wir hier zuerst definieren, wie sich die Animation transformiert:

@keyframes tang1
{
from {left:0px;}
to {left:200px;}
}

@-webkit-keyframes tang1 /*Safari and Chrome*/
{
from {left:0px;}
to {left:200px;}
}

Aufgrund der Browserkompatibilität sollte dies auch bei der Definition der Animation geschrieben werden.

von stellt 0 % Zeit dar, bis stellt 100 % Zeit dar.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!
Empfohlene Lektüre:

So erstellen Sie eine 0,5-Pixel-Linie in CSS

Css3 Transition-Implementierung der Menüleiste für reibungslose Übergänge

Das obige ist der detaillierte Inhalt vonCSS3-Attribute Übergang, Animation, Transformation. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!