Ausführliche Erläuterung der Unterschiede zwischen den drei Eigenschaften Transformation, Übergang und Animationen in CSS3

Ich habe kürzlich in meinem Projekt Animationseigenschaften in CSS3 verwendet. Oft leicht zu verwechseln. Deshalb habe ich einige Informationen aus dem Internet überprüft und zusammengefasst, damit Freunde in Not darauf zurückgreifen und lernen können.

Transformation
In einigen Testfällen scheint das Transformationsattribut jedes Mal animiert zu sein, wenn es demonstriert wird. Dies lässt einige wenige Menschen mit intuitivem Denken denken, dass das Transformationsattribut ein Animationsattribut ist. Im Gegensatz dazu ist das Transformationsattribut ein statisches Attribut. Sobald es in den Stil geschrieben ist, wird seine Wirkung direkt angezeigt, ohne dass ein Änderungsprozess erforderlich ist. Der Hauptzweck der Transformation besteht darin, spezielle Verformungen von Elementen vorzunehmen, was Designern nicht unbekannt ist. Einfach ausgedrückt handelt es sich um ein CSS-Grafikverformungswerkzeug.

Was die Ursprungseinstellung unter den Grundbedingungen der Grafikverformung betrifft, wird transform-origin verwendet, um sie in CSS zu definieren. Der Ursprung dieser Definition sollte aus der oberen linken Ecke des vom CSS betroffenen Elements als 0,0 berechnet werden. Andere Attribute werden basierend auf diesem Attribut berechnet.

Bezüglich des Grafikänderungsmodus ist transform-style im CSS3-Standard definiert. Der Standardwert ist flach, wodurch ein einfacher Effekt angezeigt wird. Und Preserve-3D rendert den Raum im 3D-Modus. Aus normaler Sicht sollten Sie nur Preserve-3D benötigen, aber basierend auf dem Gerücht, dass „GPU-Beschleunigung verwendet wird, wenn Preserve-3D aktiviert ist“, kann dieses Attribut verwendet werden, um den Systemverbrauch zu reduzieren. Schließlich ist 3D besser als 2D . Es erfordert eine weitere Dimension der Berechnung.

Wenn Sie den 3D-Modus verwenden müssen, müssen Sie zunächst den Stil als 3D angeben und Perspektive und Perspektive-Ursprung zu jedem übergeordneten Element hinzufügen, um den Perspektivenpunkt anzugeben.

Es gibt fünf spezifische Attribute, die von Designern verwendet werden, um Elementstile zu ändern:

1. Translate3d(x,y,z) wird verwendet, um die Position von Elementen auf der Seite zu steuern die drei Achsen;
2. rotation(deg) wird verwendet, um den Rotationswinkel des Elements zu steuern
3. skew[x,y](deg) Dieses Attribut wird verwendet, um die Neigung zu erzeugen done Designer wissen möglicherweise, dass dies ein notwendiges Attribut beim Erstellen einer 3D-Perspektive in 2D ist. 4. Scale3d(x,y,z) wird zum Vergrößern und Verkleinern verwendet, und das Attribut ist ein Verhältnis .matrix3d, CSS-Matrix. Durch dieses Matrixattribut werden alle oben genannten Attributwerte abgedeckt, aber ich persönlich bin der Meinung, dass die Lesbarkeit äußerst schlecht ist (es sind nur Zahlen und Einheiten, was etwas verschwommen zu merken ist), und es gibt derzeit keinen Grund, es zu empfehlen seine Verwendung.

Im Allgemeinen gibt es aus statischer und dynamischer Sicht keinen Unterschied zwischen den Eigenschaften der CSS-Transformation und den ursprünglich verwendeten Eigenschaften links, rechts, oben und unten. Daher sollte die Transformation in diese Art der Positionierung eingeordnet werden Verformung bei Verwendung innerhalb der statischen Eigenschaften.

Übergang
Die Übergangseigenschaft ist eine einfache Animationseigenschaft, sehr einfach und benutzerfreundlich. Man kann sagen, dass es sich um eine vereinfachte Version der Animation handelt, die im Allgemeinen für einfache Spezialeffekte auf Webseiten verwendet wird. Sie haben beispielsweise die folgenden zwei Stile: Der Code lautet wie folgt:

Das Übergangsattribut von animate bedeutet: Wenn sich Ihr linkes Attribut ändert, führen Sie den Animationseffekt aus ( Basierend nur auf der linken Attributänderung, andere Attribute werden der Animationsänderung nicht hinzugefügt);

.position{
    left:100px;
    top:100px;
}
.animate{
    -webkit-transition:left 0.5s ease-out;
    left:500px;
    top:500px;
}

Zunächst ist das CSS Ihres Elements die Position. Wenn Sie animate zu seiner CSSList hinzufügen oder die Position durch animate ersetzen, wird das Attribut des Elements geändert und der Webkit-Übergang wird ausgelöst. Der Wert vor der angegebenen Attributänderung wird als Startwert und das Attribut nach der Änderung als verwendet Endwert, um den Animationseffekt auszuführen. Dies ist ein einfacher Zwei-Punkte-Änderungsprozess, der die Komplexität des Animationsattributs erheblich vereinfacht.

Ändert sich gleichzeitig der Attributwert während der Übergangsanimation, wird die aktuelle Animationsausführung unterbrochen und der Attributwert zum Zeitpunkt der Unterbrechung wird der neuen Animation als Startwert zur Verfügung gestellt Berechnen Sie den neuen Animationseffekt.

Da beim Schreiben von CSS das einzige Attribut, das sich ändert, die Transformation ist, wird das Antwortattribut als all im Übergangsattribut angegeben, das auf alle Attribute des Elements reagieren und die Änderungsanimation ausführen kann (Attribute, die dies können). animiert sein).

AnimationDieses Attribut wurde in der offiziellen Einführung eingeführt und ist eine Erweiterung des Übergangsattributs. Aber diese einfache Einführung enthält etwas nicht Einfaches: Keyframes.
Jeder, der Flash-Animationen gemacht hat, weiß, dass es in Flash zwei grundlegende Waffen gibt: Zeitleiste und Keyframes. Das Aufkommen von CSS-Keyframes bietet eine Sammlung dieser beiden Attribute in der Flash-Welt. Schauen Sie sich ein Beispiel für einfache Keyframes an:

Der Code lautet wie folgt:

@keyframes 'wobble'{
  0%{
   left:100px
}
   30%{
   left:300px;
}
  100%{
   left:500px;
}
}
.animate{
 left:100px;
   -webkit-animation:wobble 0.5s ease-out;
   -webkit-animation-fill-mode:backwards;
}

上面这个代码展示了一个keyframes 'wobble'，其中 0％ 代表在变化中不同时间点的属性值，你可以较精确的控制动画变化中任何一个时间点的属性效果。而animation则根据这个keyframes提供的属性变化方式去计算元素动画当中的属性。与 transition 不同的是，keyframes提供更多的控制，尤其是时间轴的控制，这点让css animation更加强大，使得flash的部分动画效果可以由css直接控制完成，而这一切，仅仅只需要几行代码，也因此诞生了大量（比起flash来说算是大量了）基于css的animation tools，用来取代flash的动画部分。关于动画工具，可以参考Web standards-based Animation Tools.

另外在animation属性里面还有一个最重要的就是：animation-fill-mode，这个属性标示是以(from/0%)指定的样式 还是以(to/100%)指定的样式为动画完成之后的样式。这个很方便我们控制动画的结尾样式，保证动画的整体连贯。

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der Unterschiede zwischen den drei Eigenschaften Transformation, Übergang und Animationen in CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!