#element {
    transform: rotateZ(45deg);
}

body {
    transform: rotateZ(45deg);
}

html {
    perspective: 500px;
}

body {
    transform-origin: 50% 100%;
    transform: rotateX(45deg);
}

html {
    perspective: 500px;
    perspective-origin: 90% 50%;
}

anh?ngen. Das folgende Markup erreicht genau das:

#element {
    transform: rotateZ(45deg);
}

Die folgende Abbildung zeigt, was passiert, wenn eine Seite vertikal scrolliert wird und wir eine Dreh- (45 -ass) -Transformation in das

-Element unseres Dokuments direkt (links) anwenden und das Wrapper -Muster (rechts) verwenden:

Die direkte Anwendung der Transformation führt zu einem verzerrten visuellen Ergebnis aufgrund der Off-Axis-Projektion (da wir nicht mehr das ?Zentrum“ des K?rperelements betrachten). Wenn Sie das Wrapper-Muster verwenden, stellt sicher

Durch die Verwendung des obigen Musters und die Einrichtung von CSS -Transformationen k?nnen wir nach M?glichkeit mit prozentualen Werten einrichten, wir k?nnen unser -Element auf konsistente Weise beeinflussen, unabh?ngig von der Gr??e seines Inhalts.

von Transformationen zu Animationen

Nachdem CSS -Animationen die Feinheiten der Anwendung von CSS -Transformationen auf das -Element aussortiert haben, sind CSS -Animationen der n?chste Schritt. Wenn wir den oben beschriebenen Prinzipien folgen, k?nnen wir Animationen erstellen, die unsere Webinhalte auf interessante Weise in die Sichtweise bringen (oder aus der Sicht entfernen).

Betrachten Sie diese grundlegende @KeyFrames -Regel:

body {
    transform: rotateZ(45deg);
}

Wenn diese Animation auf ein Element angewendet wird, dreht sie sich auf der linken Seite. Wenn Sie auf ein Element angewendet werden, das unser Wrapper -Muster verwendet, ist das visuelle Ergebnis interessanter. Das Dokument dreht sich tats?chlich von au?erhalb des sichtbaren Bereichs des Browserfensters in die volle Ansicht:

In ?hnlicher Weise k?nnen wir Animationen komponieren, die unsere Webinhalte flüssig entfernen. Wenn wir beispielsweise im Drehen in der Ferne verschwinden sollen, k?nnten wir so etwas verwenden:

#element {
    transform: rotateZ(45deg);
}

mit dem visuellen Ergebnis:

Da wir die volle Leistung von CSS -Animationen verwenden k?nnen, um die Gesamtheit unserer Webinhalte zu beeinflussen, haben wir eine gro?e Flexibilit?t bei der Erzeugung dieser Seiteneffekte (und wir sind sicherlich nicht darauf beschr?nkt, nur CSS -Transformationen zu verwenden). Aber sobald wir die Effekte komponiert haben, die wir auf unseren Inhalt anwenden m?chten, wie k?nnen wir sie w?hrend des Seitennavigationsprozesses ausl?sen?

Animationen an

anh?ngen

Unser Ziel ist es, Triggeranimationen zu strategischen Zeiten w?hrend des Browsererlebnisses zu verwenden, um das Erscheinungsbild von Inhalten zu verleihen, wenn eine Seite geladen wird, wenn der Benutzer auf einen Link klickt.

Der erste intuitive Ort, um dem K?rperelement eine Animation hinzuzufügen, w?re das Onload -JavaScript -Ereignis. Wie sich jedoch herausstellt, ist das Hinzufügen einer Animation bei Onload -Br?nden tats?chlich zu sp?t. Dieses Ereignis l?st tats?chlich aus, wenn der gesamte Inhalt auf unserer Seite geladen wurde (einschlie?lich der Bilder oder anderer bandbreitenintensiver Ressourcen). Das Anbringen einer Animation an die Onload auf einer bandbreitenintensiven Seite würde dazu führen, dass unsere Inhalte ?normal“ angezeigt werden, gefolgt von der Animation, die den Inhalt ausl?st und neu ausbringt. Nicht genau der Effekt, den wir anstrebten.

Alternativ k?nnten wir das Domcontent -Ereignis verwenden, das ausl?st, wenn der Browser die DOM -Struktur unseres Inhalts abgeschlossen hat (aber m?glicherweise bevor die Ressourcen das Laden beendet haben). Die IE Test Drive DomContent -Demo veranschaulicht den Unterschied zwischen diesen beiden Ereignissen. In F?llen komplexer Webinhalte kann ein moderner Browser jedoch die ?progressive“ Renderung durchführen und die Seite angezeigt, bevor der gesamte DOM -Baum geladen wurde. In diesen Situationen w?re das visuelle Ergebnis dem Onload -Szenario ?hnlich.

Der optimale Ort, um eine Animation einzurichten, die unseren Seiteninhalt in Ansicht übergeht, befindet sich in der Oberseite des

-Elements. Dies stellt sicher, dass die Animation richtig beginnt, wenn der Inhalt gerendert wird (und dass die Ausgangsposition des Inhalts der des Keyframe unserer ausgew?hlten Animation sein wird). Eine angenehme Nebenwirkung dieses Ansatzes ist, dass die Animation tats?chlich jedes progressive Rendering, die Wiederaufnahme oder das Laden von Ressourcen mit komplexem Inhalt maskieren kann.

Einrichten der Animationen, die unsere Inhalte aus dem Sicht stellen, ist ebenfalls interessant. Man k?nnte davon ausgehen, dass wir einen Onclick-Handler an alle Elemente, die in unseren Inhalten interessiert sind . Wenn wir jedoch die Navigation nicht tats?chlich verz?gern, werden wir unseren erwarteten Flüssigkeitsübergang nicht sehen.

Dies ist eine gute Gelegenheit, die in der CSS -Animationsspezifikation beschriebenen Animationsereignisse zu nutzen. Insbesondere k?nnen wir das Animationend -Ereignis verwenden, um zu erkennen, wann die Animation abgeschlossen ist, und dann eine Navigation ausl?sen (durch Einstellen von Fenster.location.href, zum Beispiel). So l?st unser Onclick die Animation ?REME-FROM-View“ aus und registriert einen Handler für Animationend auf

, der sicherstellt, dass das Navigationsereignis auftritt.

Live -Demo verfügbar

Wir haben eine Demonstration und ein Tutorial zum Leben von Seiten mit CSS -Transformationen und -Animationen erstellt, die Tiefe und Beispiele liefern, die über das hinausgehen, was wir hier zeigen konnten. Das Tutorial selbst verwendet vollseitige Animationen w?hrend der Seitennavigation, die im Internet Explorer 10 unter Windows 8 und aktuelle Versionen von Chrome und Firefox funktioniert.

Um einfach die Animationen von Seite zu Seite zu genie?en, treten Sie durch die Seiten des Tutorials mit den Links ?Weiter…“ in der unteren rechten Ecke jeder Seite.

Am Ende des Tutorials geben wir einige zus?tzliche Anleitung und Beispielcode zum Einbinden dieser Animationen in Ihren eigenen Webinhalt.

wickeln Sie es

ein

CSS-Transformationen und CSS-Animationen sind zwei leistungsstarke Feature-Sets, die reichhaltigere und immersivere Web-Erlebnisse erm?glichen. Mit einer geringen Menge an Aufwand k?nnen Sie Webseiten (sogar statische) erstellen, die ein flüssiges und fast app-?hnliches Navigationserlebnis bieten.

Wenn Sie diesen Beitrag genossen haben, werden Sie Lernable lieben. Der Ort, um frische F?higkeiten und Techniken von den Meistern zu erlernen. Mitglieder erhalten sofortigen Zugang zu allen E -Books und interaktiven Online -Kursen von SitePoint, wie praktischen CSS.

h?ufig gestellte Fragen zu ganzseitigen CSS-Animationen

Was sind die wichtigsten Unterschiede zwischen CSS -Animationen und JavaScript -Animationen? CSS -Animationen sind einfacher und einfacher zu implementieren, insbesondere für einfache Animationen. Sie sind auch leistungsfreundlicher, da sie vom Browser-Rendering-Motor behandelt werden. CSS -Animationen haben jedoch im Vergleich zu JavaScript -Animationen nur begrenzte Kontrolle und Flexibilit?t. JavaScript -Animationen hingegen bieten mehr Kontrolle und Flexibilit?t und erm?glichen komplexe Animationen. Sie k?nnen in Echtzeit angehalten, umgekehrt oder manipuliert werden und auch auf Benutzerinteraktionen reagieren. Einheiten wie Prozents?tze oder Ansichtsfenster anstelle von absoluten Einheiten wie Pixel. Dies stellt sicher, dass die Animationen unabh?ngig von der Bildschirmgr??e ordnungsgem?? skalieren. Sie k?nnen auch Medienabfragen verwenden, um die Animationen basierend auf bestimmten Bildschirmgr??en oder Ger?tetypen anzupassen.

Kann ich CSS -Animationen mit SVG verwenden? SVG hat seine eigenen CSS -Eigenschaften, die animiert werden k?nnen, wie Füllung, Schlaganfall und Transformation. Dies erm?glicht komplexere und interessantere Animationen im Vergleich zu regelm??igen HTML -Elementen.

Warum funktionieren meine CSS -Animationen in einigen Browsern nicht? Zum Beispiel unterstützt Internet Explorer die Eigenschaft mit Animations-Timing-Funktionen nicht. Um die Kompatibilit?t des Cross-Browsers zu gew?hrleisten, k?nnen Sie vor den Animationseigenschaften Anbieterpr?fixe wie -webkit-, -moz-, -o- und -ms- verwenden. Sie k?nnen auch Tools wie autoprefixer verwenden, um diese Pr?fixe automatisch hinzuzufügen.

Wie kann ich die Leistung meiner CSS -Animationen optimieren? Animierte Eigenschaften, insbesondere solche, die Layout ausl?sen, ?ndert sich wie Breite, H?he und Rand. Verwenden Sie stattdessen Eigenschaften, die nur zusammengesetzte ?nderungen wie Transformation und Deckkraft ausl?sen. Sie k?nnen auch die Willensbeschreibung verwenden, um den Browser über die Eigenschaften zu informieren, die wahrscheinlich animiert sind.

Kann ich die Anzeigeeigenschaft mit CSS animieren? mit CSS animiert werden. Dies liegt daran, dass es zwischen seinen Werten keine Zwischenzust?nde hat. Sie k?nnen jedoch einen ?hnlichen Effekt erzielen, indem Sie die Eigenschaften der Opazit?t und Sichtbarkeit animieren. -Eration-zahlreiche Eigentum. Durch die Festlegung ihres Wertes auf unendliche Animation wird die Animation auf unbestimmte Zeit wiederholt.

Kann ich die Geschwindigkeit meiner CSS-Animationen steuern? Eigentum. Diese Eigenschaft definiert die Zeitdauer, die eine Animation zum Abschluss eines Zyklus ben?tigt.

Wie kann ich eine CSS-Animation pausieren? . Durch die Festlegung ihres Werts auf Pause wird die Animation nicht mehr ausgeführt. Sie k?nnen jedoch einen ?hnlichen Effekt erzielen, indem Sie zwischen mehreren Hintergrundbildern mithilfe der Eigenschaft Opazit?t verblassen.