Informationen
Das angeforderte Thema wird unten angezeigt. Es ist jedoch nicht in dieser Bibliothek vorhanden.

So wird's gemacht: Lebendiges Gestalten von Webseiten mit CSS-Transformationen, -Übergängen und -Animationen

Internet Explorer 10 und Windows Store-Apps mit JavaScript unterstützen CSS-3D-Transformationen, CSS-Übergänge und CSS-Animationen und erweitern somit die Unterstützung für die in Internet Explorer 9 eingeführten Cascading Stylesheet (CSS)-2D-Transformationen.

Einführung

CSS-2D- und -3D-Transformationen bieten Ihnen sehr viel interessantere und flexiblere Möglichkeiten zum Bearbeiten von Websiteelementen als zuvor mit CSS-Markup denkbar waren. Die Spezifikation bietet Unterstützung für Drehung, Translation, Skalierung und Scherung (sowie beliebige Transformationen und Kombinationen mehrerer Transformationen). In Verbindung mit der Möglichkeit, Elemente im 3D-Raum zu bearbeiten, den Projektionsmittelpunkt zu verändern und den Ursprung von Transformationen zu beeinflussen, sind CSS-Transformationen eine sehr leistungsstarke, wenn auch für Uneingeweihte auf den ersten Blick einschüchternde Technologie.

CSS-Übergänge und -Animationen können zusammen mit CSS-Transformationen eingesetzt werden, um Ihre Webinhalte lebendig werden zu lassen. Da sie in Internet Explorer 10 asynchron mit der Skripterstellung ausgeführt werden, sind sie außerdem eine deutlich schnellere Alternative zu Animationen mit JavaScript. CSS-Übergänge sind eine relativ unkomplizierte Methode, um Statuswechsel von Elementen zu animieren. CSS-Animationen sind flexibler als CSS-Übergänge, bieten eine differenziertere Steuerung der Änderungen eines Elements im Laufe der Zeit und ermöglichen das Definieren von Zwischenstatus.

Diese Features werden durch mehrere neue CSS-Eigenschaften und JavaScript-Ereignisse verfügbar gemacht, die alle in der entsprechenden World Wide Web Consortium (W3C)-Spezifikation definiert sind. Die Informationen in diesem Abschnitt sollen als Einführung in diese neuen Konzepte dienen und Ihnen eine nahtlose Integration der Features in Ihre Website ermöglichen. Sie finden hier eine Übersicht über CSS-Transformationen (sowohl 2D als auch 3D), CSS-Übergänge, CSS-Animationen und ihre wichtigsten Komponenten. Die Verwendung der Technologien wird anhand vieler Beispiele veranschaulicht.

Hinweis  Dieser Abschnitt enthält statische Abbildungen und Links zu Anwendungsbeispielen für die erläuterten Technologien. Um optimale Ergebnisse zu erzielen, sollten Sie die Beispiele mit einem Browser anzeigen, der CSS-Transformationen, -Übergänge und -Animationen unterstützt (z. B. Internet Explorer 10). Da diese Features in Internet Explorer 10 hardwarebeschleunigt sind, nutzen sie zudem die Grafikhardware Ihres Computers, um Effekte nahtlos und schnell zu rendern.

Inhalt dieses Abschnitts

ThemaBeschreibung

CSS-Transformationen in 2D und 3D

CSS-Transformationen ermöglichen es Ihnen, Elemente im zwei- und dreidimensionalen Raum zu transformieren.

CSS-Übergänge

CSS-Übergänge ermöglichen Ihnen das Erstellen einfacher Animationen durch nahtloses Ändern der CSS-Eigenschaftswerte über einen bestimmten Zeitraum.

CSS-Animationen

CSS-Animationen bieten Ihnen Möglichkeiten, die über das einfache (bereits mit CSS-Übergängen durchführbare) Ändern von CSS-Eigenschaften im Laufe der Zeit hinausgehen. Sie ermöglichen auch das Entwerfen komplexer Animationen mithilfe von Keyframes und eine differenziertere Steuerung anhand von Skripts.

 

 

 

Anzeigen:
© 2014 Microsoft