Analyse der Unterschiede zwischen Animationsattributen Transformation, Übergang und Animationsattributen in CSS3-CSS-Tutorial-php.cn

Dieser Artikel stellt hauptsächlich die Analyse des Unterschieds zwischen der Animationsattributtransformation und dem Animationsattribut in CSS3 vor. Jetzt kann ich ihn mit Ihnen teilen.

Kürzlich in Die Animationseigenschaften in CSS3 werden im Projekt verwendet. Leider bin ich mit einigen neu hinzugefügten Eigenschaften von CSS3 nicht sehr vertraut und es kommt oft leicht zu Verwirrung. Deshalb habe ich einige Informationen auf der Website recherchiert und sie 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 intuitive Denker (einschließlich mir) denken, dass die Transformationseigenschaft eine Animationseigenschaft 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 (zu untersuchen) 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 das 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 handelt sich nur um Zahlen und Einheiten, was beim Auswendiglernen etwas verschwommen ist), und es gibt derzeit keinen Grund, es zu empfehlen seine Verwendung.

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

Übergang
Das Übergangsattribut ist ein einfaches Animationsattribut, 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:

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

Nach dem Login kopieren

Das Übergangsattribut von animate bedeutet: Wenn sich Ihr linkes Attribut ändert, führen Sie Animationseffekte aus (nur basierend auf Änderungen des linken Attributs, andere Die Attribute werden nicht sein zu den Animationsänderungen hinzugefügt);

Zuallererst ist das CSS Ihres Elements die Position. Wenn Sie animate zu seiner CSS-Liste 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.

Als ich CSS schrieb, habe ich das Antwortattribut als all im Übergangsattribut angegeben, da das einzige sich ändernde Attribut transform war, das auf alle Attribute des Elements (Attribute) reagieren und die Änderungsanimation ausführen kann kann animiert werden).

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. Sehen Sie sich ein Beispiel für einfache Keyframes an:

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

Nach dem Login kopieren

上面这个代码展示了一个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%)指定的样式为动画完成之后的样式。这个很方便我们控制动画的结尾样式，保证动画的整体连贯。

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！