Übersetzung: CSS3-Animationstechnologie, die Sie kennen müssen
Übersetzt aus: Was Sie über Verhaltens-CSS wissen müssen
Bitte beachten Sie das Urheberrecht und geben Sie beim Nachdruck den Link zu dieser Website an!
Übersetzungsvorwort: Dieser Artikel wurde aus dem Smashingmagazine übersetzt, aber der Inhalt des Originaltextes ist etwas oberflächlich und nicht sehr vollständig. Front-End Observation fügt unter der Prämisse der Übersetzung immer mehr systematische Inhalte hinzu. Sollten Mängel vorhanden sein, korrigieren und ergänzen Sie diese bitte.
Da sich das Web weiterentwickelt und Browser immer besser in der Lage sind, komplexeren Code darzustellen, sind wir auf dem besten Weg, unser Ziel zu erreichen, alle Plattformen und Browser abzudecken. Wir können nicht nur weniger Zeit damit verbringen, sicherzustellen, dass unser Box-Modell im IE6 normal aussieht, sondern schaffen auch eine Atmosphäre, die Innovationen fördert, Hacks vermeidet und den Schwerpunkt auf Front-End-Skripte legt.
Das Internet ist eine großartige Umgebung und eine kollaborative Gemeinschaft mit einer Fülle an Wissen, das es zu teilen gilt. Wir wollten abgerundete Ecken und wir haben es möglich gemacht; wir wollten mehrere Hintergrundbilder und wir wollten Randbilder und wir haben es möglich gemacht. Die Nachfrage stellt also nie ein Problem dar. Andernfalls verwenden wir möglicherweise immer noch Tabellen zum Layouten der Seiten und verwenden zu viel Code. Wir alle wissen, dass das Internet alles kann.
Geboren für das Internet
CSS 3-Eigenschaften wie border-radius, box-shadow und text-shadow gewinnen in fortgeschrittenen Browsern wie Webkit (Safari, Chrome usw.) und Gecko (Firefox) zunehmend an Bedeutung. Sie (diese CSS-Eigenschaften) erstellen bereits einfachere Seiten und umfassendere Erlebnisse für Benutzer und werden problemlos degradiert. Dies sind jedoch nur einige der vielen Dinge, die CSS 3 für uns tun kann.
In diesem Artikel gehen wir noch einen Schritt weiter und betrachten fortgeschrittenere CSS3-Techniken wie Transformationen, Übergänge und Animationen. Wir behandeln den Code selbst, die Browserunterstützung und einige Beispiele, die deutlich veranschaulichen, wie diese neuen Eigenschaften sowohl Ihr Design als auch das gesamte Benutzererlebnis verbessern können.
CSS-Transformation
Die CSS-Transformation ist ein W3C-Entwurf. Aber als ich mich zum ersten Mal hinsetzte, um alle Funktionen zu lesen und ein paar Dinge zu lernen, brachte es mich nicht zum Leuchten. Wie Sie sich vorstellen können, ist dieses Dokument in technischer Hinsicht verfasst und konzentriert sich mehr auf deformierte grafische Elemente (d. h. Handlungselemente) und Matrizen. Da ich mich seit meinem ersten Jahr in Analysis nicht mehr mit Matrizen beschäftigt habe, musste ich für dieses Kapitel viele gute alte Browsertests durchführen und raten.
Nachdem ich jedes Tutorial, das ich finden konnte, gelesen und viele Browsertests durchgeführt habe, habe ich einige nützliche Informationen über CSS-Transformationen zusammengestellt, von denen jeder profitieren kann.
verwandeln
Das Transformationsattribut implementiert einige der gleichen Funktionen, die mit SVG implementiert werden können. Es kann für Inline-Elemente und Blockelemente verwendet werden. Es ermöglicht uns, Elemente zu drehen, zu skalieren und zu verschieben – mit nur einer Zeile CSS-Code.
Der größte Kritikpunkt an einigen avantgardistischen Designs ist, dass Text nicht auswählbar ist (dies muss durch Ausschneiden von Bildern erreicht werden). Wenn Sie mit der Verwendung des Transformationsattributs zur Textsteuerung vertraut sind, stellt dies kein Problem mehr dar, da es sich um eine reine CSS-Methode handelt und der Text innerhalb des Elements daher optional bleibt. Dies ist ein großer Vorteil von CSS gegenüber der Verwendung von Bildern (oder Hintergrundbildern).
Einige unterhaltsame und nützliche Morphing-Funktionen:
drehen
Mit Drehen können Sie ein Objekt drehen, indem Sie einen Wert in Grad übergeben.
Skala
Scale ist eine Skalierungsfunktion, die jedes Element vergrößern kann. Als Argumente werden positive und negative Zahlen sowie Dezimalzahlen akzeptiert.
übersetzen
Übersetzen positioniert Elemente basierend auf X- und Y-Koordinaten neu
verzerren
Wie der Name schon sagt, besteht Skew darin, das Objekt zu neigen, und der Parameter ist der Grad.
Matrix
transform unterstützt die Matrixtransformation, bei der Elemente basierend auf X- und Y-Koordinaten neu positioniert werden
Werfen wir einen genaueren Blick auf die einzelnen Funktionen.
Drehen
Das Transformationsattribut hat viele Verwendungszwecke, darunter die Übersetzung (Rotation). Übersetzen dreht ein Objekt basierend auf dem Winkel und kann für Inline-Elemente und Elemente auf Blockebene verwendet werden. Es kann coole Effekte erzielen.
Nachfolgend der zitierte Inhalt: #nav{ |
Bitte beachten Sie, dass Sie im IE8 (nicht standardmäßiger Modus) „-ms-filter“ anstelle von „filter“ schreiben müssen.
Browserunterstützung
Die Browserunterstützung für Translate ist überraschend umfassend. Im obigen CSS-Snippet fügen wir einfach die Präfixe -webkit- und -moz- hinzu und drehen das #nav-Element um -90 Grad.
Ziemlich einfach, oder? Das einzige Problem besteht darin, dass viele Designer ein ziemlich wichtiges Designelement nur ungern verwenden werden, wenn der IE es nicht unterstützt.
Glücklicherweise verfügt der IE dafür über einen Filter: den Grafikrotationsfilter. Es kann 4 Rotationswerte haben: 0, 1, 2 und 3. Sie erhalten nicht die gleiche detaillierte Kontrolle wie Webkit und Gecko, aber sie wird zumindest einigermaßen konsistent sein (sogar mit IE6). Obwohl dieser Filter nur 4 Werte unterstützt, was etwas nutzlos erscheint, ist er für den IE besser als nichts.
Skala
Die Skalierung funktioniert nicht so, wie Sie denken: Sie verkleinert und vergrößert einfach ein Element. Die Zoomfunktion akzeptiert sowohl Breiten- als auch Höhenwerte, die positiv, negativ oder dezimal sein können.
Positive Werte vergrößern ein Element erwartungsgemäß basierend auf der angegebenen Breite und Höhe.
Negative Werte verkleinern das Element nicht, sondern spiegeln es (z. B. wird Text umgekehrt) und skalieren es entsprechend. Sie können ein Element jedoch mit einer Dezimalzahl kleiner als 1 (z. B. .5) verkleinern oder verkleinern.
Nachfolgend der zitierte Inhalt: #nav { |
Browserunterstützung
Das Scale-Attribut wird derzeit nur von Firefox, Safari und Chrome unterstützt und bisher wird es von keiner IE-Version unterstützt. Die Skalierung eines Objekts ist eine ziemlich sinnvolle Designentscheidung. Es kann über progressives Enhancement:Hover verwendet werden, was Ihre Navigation ein wenig interessanter machen kann.
Nachfolgend der zitierte Inhalt: #nav li a:hover{ |